/* LUM360 Lab · hub (/lab/explora/): hero, experiencias, juegos para clientes, beneficios, industrias y cierre.
   Se carga solo en el hub, después de lab.css. Los componentes compartidos con las experiencias (botones, etiquetas, títulos) viven en lab.css. */

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hub-hero { position: relative; isolation: isolate; display: grid; align-content: center; gap: var(--lab-space-xl); min-height: calc(100svh - var(--lab-nav)); padding-block: var(--lab-space-2xl) var(--lab-space-lg); overflow: hidden; }
.hub-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(60% 70% at 78% 45%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 70%),
  radial-gradient(50% 60% at 10% 90%, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 70%); }
.hub-hero__sky { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hub-hero__grid { display: grid; gap: var(--lab-space-xl); align-items: center; }
.hub-hero__copy { position: relative; z-index: 2; min-width: 0; }
.hub-hero__title { margin-top: var(--lab-space-lg); font-size: clamp(2.5rem, 1.1rem + 5.2vw, 5.4rem); }
.hub-hero__lead { max-width: 30rem; margin-top: var(--lab-space-lg); }
.hub-hero__lead strong { color: var(--color-text-primary); font-weight: 500; }
.hub-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lab-space-md) var(--lab-space-lg); margin-top: var(--lab-space-xl); }
.hub-hero__side { min-width: 0; }
@media (min-width: 60rem) {
  .hub-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--lab-space-2xl); }
}

.hub-badge { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; padding: 0.45rem 1rem 0.45rem 0.7rem; border: 1px solid var(--lab-accent-line); border-radius: 999px; background: color-mix(in srgb, var(--color-bg-primary) 60%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--color-accent-strong); font-size: var(--lab-text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.hub-badge img { width: 1.4rem; height: 1.4rem; }
.hub-badge i { padding-left: 0.7rem; border-left: 1px solid var(--lab-accent-line); color: var(--color-text-muted); font-style: normal; }

.hub-stats { display: flex; flex-wrap: wrap; gap: var(--lab-space-xs) var(--lab-space-lg); margin: var(--lab-space-xl) 0 0; padding: 0; list-style: none; }
.hub-stats li { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--color-text-secondary); font-size: var(--lab-text-sm); }
.hub-stats li::before { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--color-accent-strong); box-shadow: 0 0 0.7rem var(--color-accent-strong); }

/* Órbita: los cinco experimentos giran alrededor del isotipo y cada nodo lleva a su tarjeta */
.hub-orbit { position: relative; width: min(100%, 36rem); aspect-ratio: 1; margin-inline: auto; --ox: 0; --oy: 0; }
.hub-orbit__stage { position: absolute; inset: 0; display: grid; place-items: center; transform: translate3d(calc(var(--ox) * 14px), calc(var(--oy) * 14px), 0); }
.hub-orbit__ring { position: absolute; border: 1px solid var(--lab-accent-line); border-radius: 50%; }
.hub-orbit__ring--a { inset: 6%; border-style: dashed; animation: hub-spin 60s linear infinite; }
.hub-orbit__ring--b { inset: 22%; animation: hub-spin 40s linear infinite reverse; }
.hub-orbit__ring--c { inset: 38%; animation: hub-spin 26s linear infinite; }
.hub-orbit__ring::after { content: ""; position: absolute; top: -0.3rem; left: 50%; width: 0.6rem; height: 0.6rem; margin-left: -0.3rem; border-radius: 50%; background: var(--color-accent-strong); box-shadow: 0 0 1.2rem var(--color-accent-strong); }
.hub-orbit__core { position: relative; display: grid; place-items: center; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%); animation: hub-pulse 4s ease-in-out infinite; }
.hub-orbit__core img { width: 78%; height: auto; filter: drop-shadow(0 0 1.4rem color-mix(in srgb, var(--color-accent) 70%, transparent)); }
@keyframes hub-spin { to { transform: rotate(360deg); } }
@keyframes hub-pulse { 50% { transform: scale(1.07); } }

.hub-orbit__nodes { position: absolute; inset: 0; }
.hub-node { position: absolute; left: 50%; top: 50%; display: grid; gap: 0.1rem; min-width: 7.6rem; padding: 0.6rem 0.9rem; border: 1px solid var(--lab-accent-line); border-radius: 0.8rem; color: var(--color-text-primary); background: color-mix(in srgb, var(--color-bg-primary) 72%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-decoration: none; transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0)) scale(var(--s, 1)); transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; will-change: transform; }
.hub-node .lab-code { color: var(--color-accent-strong); font-size: var(--lab-text-xs); letter-spacing: 0.16em; }
.hub-node b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; line-height: 1.1; }
.hub-node:hover, .hub-node:focus-visible { border-color: var(--color-accent-strong); box-shadow: 0 0 2.4rem -0.6rem var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg-primary)); }
/* sin JS: los nodos quedan en fila bajo la órbita */
html:not(.hub-js) .hub-orbit__nodes { position: static; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
html:not(.hub-js) .hub-node { position: static; transform: none; }

@media (max-width: 59.999rem) {
  .hub-orbit { width: min(100%, 24rem); }
  .hub-node { min-width: 4.6rem; padding: 0.3rem 0.5rem; }
  .hub-node b { font-size: 0.74rem; }
  .hub-node .lab-code { font-size: 0.6rem; letter-spacing: 0.1em; }
}


/* ── Encabezados de sección ────────────────────────────────────────────── */
.hub-head { display: grid; gap: var(--lab-space-md); max-width: 46rem; margin-bottom: var(--lab-space-2xl); }
.hub-head .lab-h2 { font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4rem); }
.hub-head .lab-prose { margin-top: 0; }

/* ── Barra fija de experiencias ────────────────────────────────────────── */

/* ── Experiencias propias ──────────────────────────────────────────────── */
.hub-exps__list { display: grid; gap: var(--lab-space-lg); }
@media (min-width: 56rem) {
  .hub-exps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}

/* La tarjeta reemplaza el diseño alterno de lab.css: en una columna o en dos, siempre con el póster arriba */
.hub-exps .lab-exp,
.hub-exps .lab-exp + .lab-exp { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 0; margin: 0; padding: clamp(0.8rem, 1.5vw, 1.1rem); border: 1px solid var(--lab-line); border-radius: 1.5rem; background: linear-gradient(165deg, color-mix(in srgb, var(--color-accent) 9%, var(--color-bg-primary)), var(--color-bg-primary) 58%); overflow: hidden; transition: border-color 0.5s, box-shadow 0.5s; }
.hub-exps .lab-exp::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at var(--mx, 70%) var(--my, 0%), color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 70%); opacity: 0; transition: opacity 0.5s; pointer-events: none; }
.hub-exps .lab-exp:hover { border-color: var(--lab-accent-line); box-shadow: 0 2.4rem 4.6rem -2.8rem var(--color-accent); }
.hub-exps .lab-exp:hover::before { opacity: 1; }

/* (0,3,0) para ganar a `.lab-exp:nth-of-type(even) .lab-exp__poster` de lab.css, que pone el póster a la derecha en las tarjetas pares */
.hub-exps .lab-exp .lab-exp__poster { order: 0; aspect-ratio: 16 / 10; border: 1px solid var(--lab-line); border-radius: 1.05rem; box-shadow: 0 1.8rem 3.4rem -2.2rem rgba(0, 0, 0, 0.8); }
.hub-exps .lab-exp__poster::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent 26%, transparent 72%, rgba(0, 0, 0, 0.4)); pointer-events: none; }
.lab-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); background: #05070a; }
.lab-clip.is-playing { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .lab-exp__poster:hover .lab-clip { transform: scale(1.03); } }
.hub-exps .lab-exp__poster .lab-exp__status { z-index: 2; border-radius: 999px; padding: 0.3rem 0.75rem; }

.hub-exps .lab-exp__body { display: grid; gap: var(--lab-space-sm); min-width: 0; padding: var(--lab-space-lg) clamp(0.2rem, 0.6vw, 0.4rem) clamp(0.2rem, 0.6vw, 0.4rem); }
.hub-exps .lab-exp__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.7rem; margin: 0; }
.hub-exps .lab-exp__title { margin: 0; font-size: clamp(2.2rem, 1.5rem + 1.6vw, 3.1rem); line-height: 1.02; }
.hub-exps .lab-exp__subtitle { margin: 0; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); }
.hub-exps .lab-exp__desc { margin: 0; color: var(--color-text-secondary); font-size: var(--lab-text-base); line-height: 1.6; }

/* La idea para el negocio: el dato que convence, en una sola frase */
.hub-idea { display: grid; gap: 0.35rem; margin-top: var(--lab-space-xs); padding: var(--lab-space-md) var(--lab-space-lg); border-left: 2px solid var(--color-accent-strong); border-radius: 0 0.7rem 0.7rem 0; background: var(--lab-accent-faint); }
.hub-idea__label { margin: 0; color: var(--color-accent-strong); }
.hub-idea__text { margin: 0; font-family: var(--font-display); font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem); line-height: 1.3; color: var(--color-text-primary); }

.hub-exps .lab-exp__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lab-space-md); margin-top: var(--lab-space-sm); padding-top: var(--lab-space-md); border-top: 1px solid var(--lab-line); }
.hub-exps .lab-exp__foot .lab-play { margin: 0; }
.hub-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0; }
.hub-meta div { display: grid; gap: 0.15rem; }
.hub-meta dt { color: var(--color-text-muted); font-size: var(--lab-text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.hub-meta dd { margin: 0; color: var(--color-text-primary); font-size: var(--lab-text-sm); }

/* En exploración: una línea, sin tarjetas */
.hub-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: var(--lab-space-2xl) 0 0; color: var(--color-text-secondary); font-size: var(--lab-text-sm); }
.hub-soon .lab-label { margin-right: 0.3rem; }
.hub-soon i { color: var(--color-text-muted); font-style: normal; }
.hub-soon__item b { margin-right: 0.4rem; color: var(--color-accent-strong); font-size: var(--lab-text-xs); letter-spacing: 0.12em; }

/* ── Juegos para clientes ──────────────────────────────────────────────── */
.hub-games { border-top: 1px solid var(--lab-line); }
.hub-client + .hub-client { margin-top: var(--lab-space-3xl); }
.hub-client__head { display: grid; gap: var(--lab-space-xs); margin-bottom: var(--lab-space-xl); }
.hub-client__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1.2rem; }
.hub-client__name { margin: 0; font-family: var(--font-display); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); font-weight: 400; line-height: 1.05; }
.hub-client__site { color: var(--color-accent-strong); font-size: var(--lab-text-sm); text-decoration: none; border-bottom: 1px solid var(--lab-accent-line); }
.hub-client__blurb { margin: 0; max-width: 40rem; color: var(--color-text-secondary); line-height: 1.6; }

.hub-games__grid { display: grid; gap: var(--lab-space-md); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .hub-games__grid:not(.hub-games__grid--n3) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .hub-games__grid--n3, .hub-games__grid--n1 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hub-game { display: grid; overflow: hidden; border: 1px solid var(--lab-line); border-radius: 1.2rem; background: color-mix(in srgb, var(--color-bg-primary) 84%, transparent); transition: border-color 0.4s, box-shadow 0.4s; }
.hub-game:hover { border-color: var(--lab-accent-line); box-shadow: 0 1.6rem 3rem -1.8rem var(--color-accent); }
.hub-game__art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0d0f13; }
.hub-game__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) and (pointer: fine) { .hub-game:hover .hub-game__poster { transform: scale(1.04); } }
.hub-game__badge { position: absolute; left: 0.8rem; top: 0.8rem; padding: 0.3rem 0.7rem; border-radius: 999px; color: #fff; background: rgba(8, 9, 12, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hub-game__body { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--lab-space-lg); }
.hub-game__kind { margin: 0; }
.hub-game__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.45rem, 1.2rem + 0.6vw, 1.8rem); font-weight: 400; line-height: 1.12; }
.hub-game__text { margin: 0; color: var(--color-text-secondary); font-size: 0.95rem; line-height: 1.55; }
.hub-game .lab-play { align-self: flex-start; margin-top: auto; }
.hub-game__body > .hub-game__text { margin-bottom: var(--lab-space-sm); }

/* ── Por qué funciona y cómo se trabaja ────────────────────────────────── */
.hub-what .hub-head { margin-bottom: var(--lab-space-xl); }
.hub-gains { display: grid; gap: var(--lab-space-md); margin: 0 0 var(--lab-space-3xl); padding: 0; list-style: none; }
@media (min-width: 52rem) { .hub-gains { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hub-gain { position: relative; display: grid; align-content: start; gap: var(--lab-space-sm); padding: var(--lab-space-xl) var(--lab-space-lg) var(--lab-space-lg); border: 1px solid var(--lab-line); border-radius: 1.2rem; background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 62%); overflow: hidden; transition: border-color 0.4s, box-shadow 0.4s; }
.hub-gain::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--color-accent-strong), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.hub-gain:hover { border-color: var(--lab-accent-line); box-shadow: 0 1.8rem 3rem -2rem var(--color-accent); }
.hub-gain:hover::before, .hub-gain.is-in::before { transform: scaleX(1); }
.hub-gain__ico { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border: 1px solid var(--lab-accent-line); border-radius: 1rem; color: var(--color-accent-strong); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.hub-gain__ico svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.hub-gain h3 { margin: 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; line-height: 1.1; }
.hub-gain p { margin: 0; color: var(--color-text-secondary); font-size: 0.97rem; line-height: 1.55; }
.hg-hand { transform-origin: 24px 24px; animation: hg-tick 6s linear infinite; }
.hg-ring { transform-origin: 24px 24px; animation: hg-turn 6s linear infinite; }
.hg-spark { transform-origin: 24px 22px; animation: hg-beat 2.8s ease-in-out infinite; }
.hg-flag { transform-origin: 12px 14px; animation: hg-wave 2.6s ease-in-out infinite; }
@keyframes hg-tick { to { transform: rotate(360deg); } }
@keyframes hg-turn { to { transform: rotate(360deg); } }
@keyframes hg-beat { 50% { transform: scale(1.12) rotate(8deg); } }
@keyframes hg-wave { 50% { transform: skewY(-6deg) scaleX(0.96); } }

.hub-flow__title { margin: 0 0 var(--lab-space-lg); }
.hub-flow { display: grid; gap: var(--lab-space-lg); margin: 0; padding: 0; list-style: none; }
@media (min-width: 52rem) { .hub-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lab-space-xl); } }
.hub-flow__step { position: relative; display: grid; align-content: start; gap: var(--lab-space-xs); padding-top: 1.8rem; }
.hub-flow__step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--lab-line); }
.hub-flow__step::after { content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--color-accent-strong), var(--color-accent)); box-shadow: 0 0 1rem var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.25s; }
.hub-flow__step.is-in::after { transform: scaleX(1); }
.hub-flow__n { position: absolute; top: -0.8rem; left: 0; padding-right: 0.8rem; color: var(--color-accent-strong); background: var(--color-bg-primary); font-size: var(--lab-text-xs); letter-spacing: 0.2em; }
.hub-flow__step h3 { margin: 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; line-height: 1.1; }
.hub-flow__step p { margin: 0; color: var(--color-text-secondary); line-height: 1.55; font-size: 0.95rem; }

/* ── Industrias ────────────────────────────────────────────────────────── */
.hub-apps { border-top: 1px solid var(--lab-line); background: linear-gradient(180deg, var(--lab-accent-faint), transparent 38%); }
.hub-apps__grid { display: grid; gap: var(--lab-space-md); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .hub-apps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .hub-apps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hub-ind { position: relative; display: grid; align-content: start; gap: var(--lab-space-xs); padding: var(--lab-space-lg); border: 1px solid var(--lab-line); border-radius: 1rem; background: color-mix(in srgb, var(--color-bg-primary) 80%, transparent); overflow: hidden; transition: border-color 0.4s, box-shadow 0.4s; }
.hub-ind::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at var(--mx, 80%) var(--my, 0%), var(--lab-accent-wash), transparent 70%); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.hub-ind:hover { border-color: var(--lab-accent-line); box-shadow: 0 1.6rem 3rem -1.6rem color-mix(in srgb, var(--color-accent) 40%, transparent); }
.hub-ind:hover::before { opacity: 1; }
.hub-ind__n { color: var(--color-accent-strong); font-size: 0.78rem; letter-spacing: 0.2em; }
.hub-ind__name { margin: 0; font-family: var(--font-display); font-size: var(--lab-text-2xl); font-weight: 400; line-height: 1.1; }
.hub-ind__idea { margin: 0; color: var(--color-text-secondary); line-height: 1.6; }
.hub-ind__from { margin: var(--lab-space-sm) 0 0; }
.hub-ind__from a { color: var(--color-accent-strong); text-decoration: none; border-bottom: 1px solid var(--lab-accent-line); }

/* ── De dónde viene (banda panorámica) ─────────────────────────────────── */
.hub-manifest { --color-text-primary: #f3efe6; --color-text-secondary: rgba(243, 239, 230, 0.8); --color-text-muted: rgba(243, 239, 230, 0.62); --color-accent: #e6b94a; --color-accent-strong: #ffd978; --lab-line: rgba(255, 255, 255, 0.14); --lab-accent-line: rgba(255, 217, 120, 0.42); position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(4.5rem, 10vw, 9rem); border-top: 1px solid var(--lab-line); color: var(--color-text-primary); background: #05070a; }
.hub-manifest::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(60% 70% at 78% 42%, rgba(255, 217, 120, 0.10), transparent 70%), radial-gradient(50% 60% at 12% 90%, rgba(95, 227, 255, 0.07), transparent 70%), linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 3.2rem 3.2rem, linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 3.2rem 3.2rem; -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 100%); mask-image: radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 100%); }
.hub-manifest::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, #05070a 0%, transparent 22%, transparent 78%, #05070a 100%); }
.hub-manifest__grid { display: grid; gap: var(--lab-space-2xl); grid-template-areas: "copy" "fig" "principles"; }
.hub-manifest__copy { grid-area: copy; align-self: center; }
.hub-manifest .hub-principles { grid-area: principles; }
@media (min-width: 60rem) { .hub-manifest__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); align-items: center; grid-template-areas: "copy fig" "principles principles"; } }

/* ---- animación «del espacio real al juego» (SVG + CSS, 15 s en bucle, sin JavaScript para animar) ---- */
.hub-origin { grid-area: fig; margin: 0; position: relative; border: 1px solid var(--lab-line); border-radius: 1.4rem; background: linear-gradient(160deg, rgba(16, 21, 31, 0.92), rgba(6, 8, 12, 0.92)); box-shadow: 0 2.4rem 4rem -2rem rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.03); overflow: hidden; --o-t: 15s; }
.hub-origin__svg { display: block; width: 100%; height: auto; aspect-ratio: 560 / 400; }
.o-l, .o-r, .o-t, .o-w, .o-d, .o-pool { stroke-linejoin: round; }
.o-stage--real { --cl: #d8c39b; --cr: #b39a6c; --ct: #7f5238; --cw: #355c73; --cd: #5a3a28; --cp: #38a6c6; --cs: rgba(255, 255, 255, 0.0); --cw-s: 0; --leaf: #3f8f52; --trunk: #7a5a3a; --sh: rgba(0, 0, 0, 0.4); }
.o-stage--twin { --cl: rgba(95, 227, 255, 0.08); --cr: rgba(95, 227, 255, 0.05); --ct: rgba(95, 227, 255, 0.12); --cw: rgba(95, 227, 255, 0.2); --cd: rgba(95, 227, 255, 0.16); --cp: rgba(95, 227, 255, 0.16); --cs: #5fe3ff; --leaf: rgba(95, 227, 255, 0.1); --trunk: #5fe3ff; --sh: transparent; }
.o-stage--game { --cl: #2b3345; --cr: #1f2736; --ct: #3b455c; --cw: #ffd978; --cd: #ffd978; --cp: #2a8ca8; --cs: #ffd978; --leaf: #2d6b45; --trunk: #6d5a40; --sh: transparent; }
.o-l { fill: var(--cl); } .o-r { fill: var(--cr); } .o-t { fill: var(--ct); } .o-w { fill: var(--cw); } .o-d { fill: var(--cd); } .o-pool { fill: var(--cp); }
.o-l, .o-r, .o-t, .o-w, .o-d, .o-pool, .o-leaves ellipse { stroke: var(--cs); stroke-width: 1.4; }
.o-leaves ellipse { fill: var(--leaf); }
.o-trunk { fill: none; stroke: var(--trunk); stroke-width: 6; stroke-linecap: round; }
.o-shadow { fill: var(--sh, rgba(0, 0, 0, 0.35)); }
.o-grid path { fill: none; stroke: rgba(95, 227, 255, 0.28); stroke-width: 1; }
.o-tag rect { fill: rgba(5, 12, 18, 0.82); stroke: rgba(95, 227, 255, 0.7); stroke-width: 1; }
.o-tag circle { fill: #5fe3ff; transform-box: fill-box; transform-origin: center; animation: o-pulse 1.6s ease-in-out infinite; }
.o-tag text { fill: #bff4ff; font: 600 9.5px/1 var(--font-body, system-ui, sans-serif); letter-spacing: 0.08em; }
.o-robot rect, .o-robot path:not(.o-warn) { fill: #c8434b; stroke: #ffb3b8; stroke-width: 1.2; }
.o-robot path { fill: none; }
.o-robot circle { fill: #fff; }
.o-warn { fill: #ffd978 !important; stroke: #5a3a00 !important; }
.o-beam { fill: none; stroke: #ffd978; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 6 8; filter: drop-shadow(0 0 4px rgba(255, 217, 120, 0.9)); }
.o-hud rect { fill: rgba(6, 8, 12, 0.78); stroke: rgba(255, 217, 120, 0.55); stroke-width: 1; }
.o-hud path { fill: #ff6f7b; }
.o-hud text { fill: #ffe9b0; font: 700 12px/1 var(--font-body, system-ui, sans-serif); letter-spacing: 0.06em; }
.o-pad circle { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.4; }
.o-pad circle:nth-child(2) { fill: rgba(255, 217, 120, 0.5); stroke: none; }
.o-pad text { fill: #ffe9b0; font: 700 18px/1 var(--font-body, system-ui, sans-serif); text-anchor: middle; }
.o-scan rect { fill: url(#none); fill: rgba(255, 217, 120, 0.12); }
.o-scan path { stroke: #ffd978; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(255, 217, 120, 0.9)); }
.o-badge rect { fill: #ffd978; }
.o-badge text { fill: #1a1400; font: 800 11px/1 var(--font-body, system-ui, sans-serif); text-anchor: middle; letter-spacing: 0.06em; }
.o-stage { opacity: 0; animation-duration: var(--o-t); animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.o-stage--real { animation-name: o-real; }
.o-stage--twin { animation-name: o-twin; }
.o-stage--game { animation-name: o-game; }
.o-scan { opacity: 0; animation: o-scan var(--o-t) linear infinite; }
.o-beam { animation: o-beam 0.5s linear infinite; }
.o-robot { animation: o-robot var(--o-t) ease-in infinite; }
@keyframes o-real { 0%, 27% { opacity: 1; } 35%, 91% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes o-twin { 0%, 24% { opacity: 0; } 35%, 60% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes o-game { 0%, 62% { opacity: 0; } 72%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes o-scan { 0%, 7% { opacity: 0; transform: translateX(40px); } 10% { opacity: 1; } 31% { opacity: 1; transform: translateX(520px); } 34%, 100% { opacity: 0; transform: translateX(520px); } }
@keyframes o-beam { to { stroke-dashoffset: -14; } }
@keyframes o-robot { 0%, 64% { transform: translateX(90px); opacity: 0; } 72% { opacity: 1; } 88% { transform: translateX(0); opacity: 1; } 91%, 100% { transform: translateX(-6px); opacity: 0; } }
@keyframes o-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.7); } }
.hub-origin__steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lab-line); }
.hub-origin__steps li { display: grid; gap: 0.25rem; align-content: start; padding: 0.8rem clamp(0.5rem, 1.6vw, 1rem) 0.9rem; opacity: 0.5; border-left: 1px solid var(--lab-line); position: relative; animation: o-step var(--o-t) ease-in-out infinite; animation-delay: calc(var(--k) * 5s); }
.hub-origin__steps li:first-child { border-left: 0; animation-delay: 0s; }
.hub-origin__steps li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--color-accent-strong); transform: scaleX(0); transform-origin: left; animation: o-bar var(--o-t) linear infinite; animation-delay: calc(var(--k) * 5s); }
.hub-origin__steps b { font-size: clamp(0.72rem, 0.6rem + 0.5vw, 0.86rem); font-weight: 700; letter-spacing: 0.04em; color: var(--color-text-primary); }
.hub-origin__steps span { font-size: 0.78rem; line-height: 1.4; color: var(--color-text-muted); display: none; }
@media (min-width: 34rem) { .hub-origin__steps span { display: block; } }
@keyframes o-step { 0%, 31% { opacity: 1; } 35%, 100% { opacity: 0.5; } }
@keyframes o-bar { 0% { transform: scaleX(0); } 33% { transform: scaleX(1); } 34%, 100% { transform: scaleX(0); } }
.hub-origin.is-paused *, .hub-origin.is-paused *::before { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .o-stage, .o-scan, .o-robot, .o-beam, .o-tag circle, .hub-origin__steps li, .hub-origin__steps li::before { animation: none !important; }
  .o-stage--real { opacity: 1; } .o-stage--twin { opacity: 0.85; } .o-stage--game { opacity: 0.9; } .o-scan { display: none; }
  .hub-origin__steps li { opacity: 1; }
}
.hub-manifest .hub-head { margin-bottom: 0; }
.hub-manifest .hub-manifest__title { font-size: clamp(2.6rem, 1rem + 5.4vw, 5.6rem); line-height: 0.98; letter-spacing: -0.03em; }
.hub-manifest .hub-manifest__title em { color: var(--color-accent-strong); }
.hub-manifest .lab-prose { color: var(--color-text-secondary); }
.hub-principles { display: grid; gap: var(--lab-space-md); margin: 0; }
@media (min-width: 52rem) { .hub-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hub-principle { position: relative; display: grid; gap: var(--lab-space-xs); align-content: start; padding: var(--lab-space-lg); border: 1px solid var(--lab-line); border-radius: 1.2rem; background: rgba(8, 10, 14, 0.58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; transition: border-color 0.4s, box-shadow 0.4s; }
.hub-principle::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--color-accent-strong), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.hub-principle:hover { border-color: var(--lab-accent-line); box-shadow: 0 1.8rem 3rem -1.6rem var(--color-accent); }
.hub-principle:hover::after, .hub-principle.is-in::after { transform: scaleX(1); }
.hub-principle dt { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; line-height: 1.1; }
.hub-principle dd { margin: 0; color: var(--color-text-secondary); line-height: 1.55; font-size: 0.95rem; }

/* ── Cierre ────────────────────────────────────────────────────────────── */
.hub-close__grid { display: grid; gap: var(--lab-space-2xl); }
@media (min-width: 60rem) {
  .hub-close__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; gap: var(--lab-space-3xl); }
}
.hub-close .lab-label { margin: 0; }
.hub-close .lab-h2 { margin-top: var(--lab-space-md); }
.hub-close .lab-prose { margin-top: var(--lab-space-lg); }
.hub-close__actions { display: flex; flex-wrap: wrap; gap: var(--lab-space-md); margin-top: var(--lab-space-xl); }
.hub-services { display: grid; gap: var(--lab-space-sm); }
.hub-services ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lab-line); }
.hub-services li { border-bottom: 1px solid var(--lab-line); }
.hub-services a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--lab-space-md); padding: var(--lab-space-md) 0; color: var(--color-text-primary); font-family: var(--font-display); font-size: var(--lab-text-xl); text-decoration: none; transition: color 0.3s; }
.hub-services a span { flex: none; color: var(--color-accent-strong); font-family: var(--font-body); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) and (pointer: fine) {
  .hub-services a:hover { color: var(--color-accent-strong); }
  .hub-services a:hover span { transform: translateX(6px); }
}

/* ── Botón «Jugar» ─────────────────────────────────────────────────────── */
.lab-play { --tx: 0; --ty: 0; position: relative; display: inline-flex; align-items: center; gap: 0.9rem; padding: 0.45rem 1.6rem 0.45rem 0.45rem; border-radius: 999px; color: var(--color-bg-primary); font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1; text-decoration: none; text-transform: uppercase; background: linear-gradient(120deg, var(--color-accent-strong), var(--color-accent)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent-strong) 70%, transparent), 0 1.2rem 2.6rem -1rem var(--color-accent); isolation: isolate; overflow: hidden; transform: translate(calc(var(--tx) * 1px), calc(var(--ty) * 1px)); transition: box-shadow 0.4s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.lab-play::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%); transform: translateX(-130%); animation: lab-sheen 4.2s ease-in-out infinite; }
@keyframes lab-sheen { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.lab-play__orb { position: relative; display: grid; flex: none; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; color: var(--color-accent-strong); background: var(--color-bg-primary); }
.lab-play__orb svg { width: 1.1rem; height: 1.1rem; margin-left: 0; fill: currentColor; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.lab-play__orb::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--color-bg-primary); border-radius: 50%; animation: lab-ping 2.2s ease-out infinite; }
@keyframes lab-ping { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.7); opacity: 0; } }
.lab-play:hover, .lab-play:focus-visible { box-shadow: 0 0 0 1px var(--color-accent-strong), 0 1.6rem 3.4rem -0.8rem var(--color-accent); }
.lab-play:hover .lab-play__orb svg, .lab-play:focus-visible .lab-play__orb svg { transform: scale(1.22); }
.lab-play:active { transform: translate(calc(var(--tx) * 1px), calc(var(--ty) * 1px + 2px)) scale(0.985); }
.lab-play--ext { color: var(--color-text-primary); background: color-mix(in srgb, var(--color-bg-primary) 82%, transparent); box-shadow: inset 0 0 0 1px var(--lab-accent-line); }
.lab-play--ext .lab-play__orb { color: var(--color-bg-primary); background: var(--color-accent-strong); }
.lab-play--ext .lab-play__orb::after { border-color: var(--color-accent-strong); }
.lab-play--ext::before { background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--color-accent-strong) 35%, transparent) 50%, transparent 70%); }
.lab-play--ext:hover, .lab-play--ext:focus-visible { box-shadow: inset 0 0 0 1px var(--color-accent-strong), 0 1.4rem 3rem -1rem var(--color-accent); }

/* ── Revelado al entrar ────────────────────────────────────────────────── */
html.hub-js [data-hub-reveal], html.hub-js [data-hub-ind] { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s, box-shadow 0.4s; }
html.hub-js [data-hub-reveal].is-in, html.hub-js [data-hub-ind].is-in { opacity: 1; transform: none; }

/* Anclas: la sección o la tarjeta quedan visibles bajo el navbar y la barra fija */
.hub-exps .lab-exp, #experimentos, #juegos-clientes, #que-es, #aplicaciones, #manifiesto, #contacto { scroll-margin-top: calc(var(--lab-nav, 4.5rem) + 4rem); }

@media (prefers-reduced-motion: reduce) {
  .hub-orbit__ring, .hub-orbit__core, .lab-play::before, .lab-play__orb::after, .hg-hand, .hg-ring, .hg-spark, .hg-flag { animation: none; }
  html.hub-js [data-hub-reveal], html.hub-js [data-hub-ind] { opacity: 1; transform: none; transition: none; }
  .lab-clip { transition: none; }
}