/* ============================================================
   Ludik — Hero "Despertando la energía de las personas"
   Light editorial premium: lienzo claro, titular gigante,
   gradiente energía en la palabra clave, orbe + chips game-UI.
   Animación orquestada en JS (GSAP/Lenis); aquí viven los
   estados de reposo y los fallbacks.
   ============================================================ */

.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	background: var(--color-bg);
	color: var(--color-text);
	isolation: isolate;
	padding-block: calc(68px + var(--sp-2xl)) var(--sp-2xl);
}

/* ---------- Fondo: orbes de gradiente + retícula sutil ---------- */
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	/* Desvanece el fondo (orbes+grid) hacia el borde inferior para que el
	   resplandor muera dentro del hero y NO se corte con la sección de marcas. */
	-webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 92%);
	mask-image: linear-gradient(to bottom, #000 58%, transparent 92%);
}

.hero__grid-overlay {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(57, 61, 100, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(57, 61, 100, 0.05) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 70%);
	-webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 70%);
}

/* Orbes desenfocados que tiñen el lienzo blanco sin saturarlo. */
.hero__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.5;
	will-change: transform;
}
.hero__orb--main {
	width: 46vw;
	height: 46vw;
	max-width: 620px;
	max-height: 620px;
	top: -12%;
	right: -8%;
	background: radial-gradient(circle at 30% 30%, var(--c-brand-blue) 0%, rgba(75, 0, 255, 0) 70%),
				radial-gradient(circle at 70% 70%, var(--c-pink-2) 0%, rgba(248, 77, 222, 0) 70%);
}
.hero__orb--accent {
	width: 34vw;
	height: 34vw;
	max-width: 460px;
	max-height: 460px;
	bottom: -14%;
	left: -10%;
	opacity: 0.4;
	background: radial-gradient(circle, var(--c-green-2) 0%, rgba(33, 236, 200, 0) 70%);
}

/* ---------- Layout ---------- */
.hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-2xl);
	align-items: center;
	width: 100%;
}

.hero__content { max-width: 38rem; }

/* ---------- Eyebrow + badge "Nivel 01" ---------- */
.hero__eyebrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-sm);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: var(--sp-lg);
}
.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-caption);
	letter-spacing: 0.08em;
	padding: 0.4em 0.8em;
	border-radius: var(--radius-pill);
	color: var(--c-neutral-900);
	background: var(--color-accent-green);
}
.hero__badge-dot {
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--c-neutral-900);
	animation: ludik-pulse 2s var(--ease-out) infinite;
}
@keyframes ludik-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.45; transform: scale(0.7); }
}

/* ---------- Titular gigante ---------- */
.hero__title {
	font-size: clamp(2.5rem, 8.5vw, 5rem);
	line-height: 0.95;
	letter-spacing: -0.025em;
	color: var(--color-text);
	margin-bottom: var(--sp-sm);
}
.hero__line {
	display: block;
	overflow: hidden; /* máscara para el clip-reveal por línea (GSAP) */
	padding-bottom: 0.04em; /* evita recorte de descendentes/tildes */
}
.hero__line-inner {
	display: inline-block;
	will-change: transform;
}

/* Palabra clave con gradiente "energía". */
.hero__title-accent {
	position: relative;
	background: var(--gradient-energy);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Subrayado manuscrito turquesa que se "dibuja". */
.hero__scribble {
	position: absolute;
	left: 0;
	bottom: -0.18em;
	width: 100%;
	height: 0.28em;
	color: var(--color-accent-green);
}
.hero__scribble svg { width: 100%; height: 100%; overflow: visible; }
.hero__scribble-path {
	stroke-dasharray: 1;
	stroke-dashoffset: 0; /* visible por defecto (sin JS); GSAP lo redibuja */
}

/* ---------- Nota manuscrita ---------- */
.hero__note {
	font-family: var(--font-accent);
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	font-weight: var(--fw-semibold);
	line-height: 1;
	color: var(--color-accent-pink);
	transform: rotate(-3deg);
	transform-origin: left center;
	margin: var(--sp-md) 0 var(--sp-lg);
	width: fit-content;
}

.hero__lead {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-relaxed);
	max-width: 46ch;
	color: var(--color-text-muted);
	margin-bottom: var(--sp-xl);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-md);
}

/* ============================================================
   Aside: orbe-player + chips de game-UI (glass)
   ============================================================ */
.hero__aside {
	position: relative;
	display: none; /* se muestra >= desktop */
	min-height: 420px;
}

/* Botón "play" central con anillo cónico girando. */
.hero__player {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 200px;
	height: 200px;
	will-change: transform;
}
.hero__player-core {
	position: absolute;
	inset: 18px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	gap: 0.4rem;
	background: var(--gradient-energy);
	box-shadow: var(--shadow-lg), 0 0 50px rgba(75, 0, 255, 0.35);
	color: var(--color-text-on-dark);
	z-index: 1;
}
.hero__player-tag {
	position: absolute;
	top: 28%;
	font-family: var(--font-display);
	font-size: var(--fs-caption);
	font-weight: var(--fw-bold);
	letter-spacing: 0.14em;
	opacity: 0.85;
}
.hero__player-icon { width: 56px; height: 56px; margin-top: 0.6rem; }
.hero__player-icon svg { width: 100%; height: 100%; }
.hero__player-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	padding: 3px;
	background: conic-gradient(from 0deg, var(--c-green-2), var(--c-pink-2), var(--c-brand-blue), var(--c-green-2));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: ludik-spin 8s linear infinite;
}
@keyframes ludik-spin { to { transform: rotate(360deg); } }

/* Variante interactiva: el orbe abre el showreel. */
.hero__player--btn {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
}
.hero__player--btn .hero__player-core {
	transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease-out);
}
.hero__player--btn .hero__player-icon { transition: transform 0.4s var(--ease-spring); }
.hero__player--btn:hover .hero__player-core {
	transform: scale(1.06);
	box-shadow: var(--shadow-lg), 0 0 70px rgba(75, 0, 255, 0.5);
}
.hero__player--btn:hover .hero__player-icon { transform: scale(1.12); }
.hero__player--btn:focus-visible { outline: none; }
.hero__player--btn:focus-visible .hero__player-ring {
	outline: 3px solid var(--color-accent-green);
	outline-offset: 6px;
}

/* Chips de game-UI flotantes (glassmorphism claro). */
.hero__chip {
	position: absolute;
	display: flex;
	align-items: center;
	gap: var(--sp-xs);
	padding: var(--sp-sm) var(--sp-md);
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(10px) saturate(140%);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	border: 1px solid rgba(57, 61, 100, 0.1);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	will-change: transform;
}
.hero__chip-label {
	font-family: var(--font-display);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text);
}
.hero__chip--xp {
	top: 8%;
	right: 2%;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-2xs);
}
.hero__chip-bar {
	display: block;
	width: 120px;
	height: 8px;
	border-radius: var(--radius-pill);
	background: var(--c-neutral-100);
	overflow: hidden;
}
.hero__chip-bar-fill {
	display: block;
	height: 100%;
	width: 78%;
	border-radius: inherit;
	background: var(--gradient-energy);
	transform-origin: 0 50%;
}
.hero__chip--unlock {
	bottom: 14%;
	left: -4%;
	color: var(--c-neutral-900);
}
.hero__chip-star { color: var(--color-accent-green); font-size: 1.1rem; }
.hero__chip-text {
	font-family: var(--font-display);
	font-size: var(--fs-caption);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.hero__chip--combo {
	bottom: 6%;
	right: 8%;
	flex-direction: column;
	gap: 0;
	text-align: center;
}
.hero__chip-combo-num {
	display: inline-flex;
	align-items: center;
	gap: 0.12em;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h3);
	line-height: 1;
	background: var(--gradient-energy);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hero__chip-combo-arrow {
	font-size: 0.62em;
	color: var(--color-success);
	-webkit-text-fill-color: var(--color-success); /* no hereda el clip transparente */
}
.hero__chip-combo-label {
	font-size: var(--fs-caption);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ============================================================
   Stats con counters
   ============================================================ */
.hero__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-lg) var(--sp-md);
	margin-top: var(--sp-3xl);
	padding-top: var(--sp-lg);
	border-top: 1px solid var(--color-border);
}
.hero__stat { display: flex; flex-direction: column; gap: 0.15em; }
.hero__stat-value {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: clamp(1.9rem, 5vw, 2.75rem);
	line-height: 1;
	color: var(--color-text);
	font-variant-numeric: tabular-nums;
}
.hero__stat-label {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

/* ============================================================
   Scroll hint
   ============================================================ */
.hero__scroll-hint {
	position: absolute;
	left: 50%;
	bottom: var(--sp-lg);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-xs);
	color: var(--color-text-muted);
	transition: color 0.3s var(--ease-out);
}
.hero__scroll-hint:hover { color: var(--color-text); }
.hero__scroll-text {
	font-family: var(--font-display);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.16em;
}
.hero__scroll-track {
	width: 24px;
	height: 40px;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-pill);
	display: flex;
	justify-content: center;
	padding-top: 7px;
}
.hero__scroll-dot {
	width: 4px;
	height: 8px;
	border-radius: var(--radius-pill);
	background: var(--color-accent-pink);
	animation: ludik-scroll-dot 1.6s var(--ease-out) infinite;
}
@keyframes ludik-scroll-dot {
	0%   { opacity: 0; transform: translateY(-4px); }
	40%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(12px); }
}

/* ============================================================
   Showreel (modal nativo <dialog>)
   ============================================================ */
.showreel {
	width: 100vw;
	height: 100svh;
	max-width: 100vw;
	max-height: 100svh;
	margin: 0;
	padding: 0;
	border: 0;
	inset: 0;
	background: transparent;
	color: var(--color-text-on-dark);
	overflow: hidden;
}
.showreel::backdrop {
	background: rgba(15, 16, 30, 0.82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.showreel__inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-xl);
}
.showreel__frame {
	position: relative;
	aspect-ratio: 9 / 16;
	height: min(85svh, 760px);
	max-width: 100%;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #000;
	box-shadow: var(--shadow-lg);
}
.showreel[open] .showreel__frame { animation: showreel-in 0.4s var(--ease-out); }
@keyframes showreel-in {
	from { opacity: 0; transform: scale(0.92); }
	to   { opacity: 1; transform: none; }
}
.showreel__frame video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	background: #000;
}
.showreel__close {
	position: absolute;
	top: var(--sp-lg);
	right: var(--sp-lg);
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: var(--color-text-on-dark);
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-spring);
}
.showreel__close svg { width: 22px; height: 22px; }
.showreel__close:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); }

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 768px) {
	.hero__stats { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
	.hero__inner {
		grid-template-columns: 1.25fr 0.75fr;
		gap: var(--sp-3xl);
	}
	.hero__aside { display: block; }
	.hero__title { font-size: clamp(3rem, 5vw, 5rem); }
}

/* ============================================================
   Estado de entrada (solo con .ludik-anim, que añade un inline-script
   en <head> cuando NO hay prefers-reduced-motion). Ocultamos SOLO los
   contenedores: así GSAP lee los valores naturales de los hijos con .from().
   Sin JS / sin la clase, todo queda visible — progressive enhancement, cero parpadeo.
   ============================================================ */
.ludik-anim .hero__inner,
.ludik-anim .hero__stats,
.ludik-anim .hero__scroll-hint { opacity: 0; }

/* ============================================================
   Reduce-motion: congela todo movimiento autónomo.
   Las animaciones de entrada GSAP se desactivan desde app.js.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.hero__orb { animation: none; }
	.hero__player-ring,
	.hero__badge-dot,
	.hero__scroll-dot { animation: none; }
	.hero__scribble-path { stroke-dashoffset: 0; }
	.hero__note { transform: rotate(-3deg); }
	.showreel[open] .showreel__frame { animation: none; }
	.showreel__close:hover { transform: none; }
}