/* La Sombra · Logrus Training Studio (prueba 2)
   Marca: rojo #FF003D, negro #141213, vino #661424, hueso #DFD3D1. Montserrat + Rubik. */
:root {
  --black: #141213; --black-2: #1b1719; --red: #ff003d; --red-2: #ff2b5e; --wine: #661424; --wine-2: #4a0f1b;
  --bone: #dfd3d1; --muted: #bcaeab; --line: rgba(223, 211, 209, 0.16); --line-2: rgba(223, 211, 209, 0.32);
  --plate: rgba(20, 18, 19, 0.84);
  --f-d: 'Montserrat', system-ui, sans-serif; --f-t: 'Rubik', system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: clamp(20px, 5vw, 88px);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); color: var(--bone); -webkit-text-size-adjust: 100%; scrollbar-color: var(--wine) var(--black); scrollbar-width: thin; }
html.is-static { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.is-static { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--f-t); font-size: 1.0625rem; line-height: 1.6; background: var(--black); color: var(--bone); overflow-x: clip; caret-color: var(--red); -webkit-font-smoothing: antialiased; }
::selection { background: var(--red); color: var(--black); }
::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--black); } ::-webkit-scrollbar-thumb { background: var(--wine); border-radius: 8px; border: 2px solid var(--black); }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
h1, h2, h3 { font-family: var(--f-d); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; border-radius: 6px; }
.tnum { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 18px; height: 18px; flex: none; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 50; background: var(--bone); color: var(--black); padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ------------------------------------------------ botones */
.ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 48px; padding: 0 1.15rem; border-radius: 10px; font-family: var(--f-d); font-weight: 700; font-size: 0.92rem; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; transition: transform 0.25s var(--ease), background-color 0.2s, border-color 0.2s, color 0.2s; }
.btn-primary { background: var(--red); color: var(--black); }
.btn-primary:hover { background: var(--red-2); transform: translateY(-2px); }
.btn-ghost { background: rgba(20, 18, 19, 0.6); color: var(--bone); border: 1.5px solid var(--line-2); }
.btn-ghost:hover { border-color: var(--bone); transform: translateY(-2px); }
.btn-line { border: 1.5px solid var(--line-2); color: var(--bone); background: transparent; }
.btn-line:hover { border-color: var(--red); color: #fff; }
.btn:active { transform: translateY(0); }

/* ------------------------------------------------ capas fijas */
.world { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.hero-art { position: fixed; inset: 0; z-index: 1; transform-origin: 56% 46%; will-change: transform, opacity; pointer-events: none; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,18,19,0.9) 0%, rgba(20,18,19,0.55) 34%, rgba(20,18,19,0) 62%), linear-gradient(0deg, rgba(20,18,19,0.85) 0%, rgba(20,18,19,0) 40%); }
.scrim { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.9s var(--ease), background 0.9s; background: linear-gradient(90deg, rgba(20,18,19,0.94) 0%, rgba(20,18,19,0.8) 30%, rgba(20,18,19,0.25) 52%, rgba(20,18,19,0) 66%); }
.is-3d[data-frame="left"] .scrim { opacity: 1; }
.is-3d[data-frame="center"] .scrim { opacity: 1; background: linear-gradient(0deg, rgba(20,18,19,0.95) 0%, rgba(20,18,19,0.7) 34%, rgba(20,18,19,0) 62%); }
.is-3d[data-ch="triunfos"] .scrim { background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(20,18,19,0.7) 0%, rgba(20,18,19,0.4) 60%, rgba(20,18,19,0.1) 100%); }
.is-3d[data-ch="contact"] .scrim { background: radial-gradient(ellipse 46% 40% at 50% 50%, rgba(20,18,19,0.62) 0%, rgba(20,18,19,0.25) 70%, rgba(20,18,19,0) 100%); }
.vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 55% 50%, transparent 55%, rgba(10,8,9,0.7) 100%); }
.is-static .world, .is-static .scrim, .is-static .vignette { display: none; }

/* ------------------------------------------------ intro */
.intro { position: fixed; inset: 0; z-index: 40; background: var(--black); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity 0.9s var(--ease), visibility 0s 0.9s; }
.is-intro .intro { opacity: 1; visibility: visible; transition: none; }
.intro-logo { width: min(46vmin, 360px); height: auto; }
.is-intro body { overflow: hidden; }

/* ------------------------------------------------ barra superior */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; padding: 0 var(--pad); padding-right: max(var(--pad), 24px); background: linear-gradient(180deg, rgba(20,18,19,0.86) 0%, rgba(20,18,19,0.5) 60%, rgba(20,18,19,0) 100%); }
.brand img { width: 46px; height: auto; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.lang { display: inline-flex; padding: 3px; border-radius: 10px; border: 1px solid var(--line); background: rgba(20,18,19,0.6); }
.lang button { appearance: none; border: 0; background: transparent; min-width: 40px; height: 34px; border-radius: 7px; font-family: var(--f-d); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.lang button:hover { color: var(--bone); }
.lang button[aria-pressed="true"] { background: var(--bone); color: var(--black); }
.ctas-top .btn { min-height: 42px; font-size: 0.86rem; padding: 0 0.95rem; }

.zone-card { position: fixed; left: 50%; top: 92px; transform: translate(-50%, -8px); display: flex; align-items: center; gap: 14px; opacity: 0; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); pointer-events: none; white-space: nowrap; }
.zone-card.is-on { opacity: 1; transform: translate(-50%, 0); }
.is-3d[data-frame="left"] .zone-card { left: 66%; }
.zone-text { font-family: var(--f-d); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.22em; color: var(--bone); }
.zone-line { width: 44px; height: 1.5px; background: var(--red); }

/* ------------------------------------------------ HUD */
.hud { position: fixed; right: 64px; bottom: 26px; justify-items: end; z-index: 15; display: grid; gap: 8px; font-family: var(--f-d); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.12em; pointer-events: none; transition: opacity 0.6s; }
.is-static .hud, .is-intro .hud { opacity: 0; }
.is-3d[data-ch="hero"] .hud, .at-footer .hud, .at-footer .rail { opacity: 0; }
.at-footer .rail { pointer-events: none; }
.hud-xp, .hud-energy { display: flex; align-items: center; gap: 9px; padding: 7px 12px; border-radius: 9px; background: rgba(20,18,19,0.78); border: 1px solid var(--line); width: max-content; }
.hud-xp .ico { color: var(--red); }
.hud-xp-val { font-size: 0.95rem; letter-spacing: 0.06em; color: var(--bone); min-width: 4ch; }
.hud-boost { display: none; padding: 1px 6px; border-radius: 5px; background: var(--red); color: var(--black); font-size: 0.68rem; letter-spacing: 0.04em; }
.is-boost .hud-boost { display: inline-block; }
.hud-energy .ico { color: var(--bone); }
.hud-energy .bar { width: 120px; }
.hud-low { position: absolute; right: 0; bottom: calc(100% + 8px); width: max-content; text-align: right; font-family: var(--f-t); font-weight: 500; letter-spacing: 0; font-size: 0.82rem; color: var(--bone); opacity: 0; transform: translateY(4px); transition: opacity 0.4s, transform 0.4s; max-width: 30ch; }
.is-low[data-ch="assets"] .hud-low, .is-low[data-ch="platforms"] .hud-low, .is-low[data-ch="work"] .hud-low { opacity: 1; transform: none; }
.bar { position: relative; display: block; height: 8px; border-radius: 4px; background: rgba(223,211,209,0.14); overflow: hidden; }
.bar-fill { position: absolute; inset: 0; background: var(--bone); transform-origin: left; transition: transform 0.35s var(--ease), background-color 0.3s; }
.is-low .bar-fill { background: var(--red); animation: lowpulse 0.9s steps(2, jump-none) infinite; }
.is-boost .bar-fill { background: var(--red); }
@keyframes lowpulse { 50% { opacity: 0.45; } }

/* ------------------------------------------------ riel de capítulos */
.rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 15; transition: opacity 0.6s; }
.is-intro .rail { opacity: 0; }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rail a { position: relative; display: flex; align-items: center; justify-content: flex-end; height: 22px; width: 30px; text-decoration: none; }
.rail-dot { width: 6px; height: 6px; border-radius: 2px; background: rgba(223,211,209,0.4); transition: all 0.35s var(--ease); }
.rail a:hover .rail-dot, .rail a:focus-visible .rail-dot { background: var(--bone); }
.rail a.is-active .rail-dot { width: 16px; background: var(--red); }
.rail-label { position: absolute; right: 30px; white-space: nowrap; font-family: var(--f-d); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.16em; padding: 4px 8px; border-radius: 6px; background: rgba(20,18,19,0.9); opacity: 0; transform: translateX(6px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
.rail a:hover .rail-label, .rail a:focus-visible .rail-label { opacity: 1; transform: none; }

/* ------------------------------------------------ toasts */
.toasts { position: fixed; bottom: 128px; right: 64px; z-index: 30; display: grid; gap: 8px; justify-items: end; pointer-events: none; width: min(92vw, 420px); }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 12px; background: var(--black-2); border: 1px solid var(--line-2); box-shadow: 0 14px 34px -12px rgba(0,0,0,0.8); opacity: 0; transform: translateY(-10px) scale(0.98); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.toast.is-in { opacity: 1; transform: none; }
.toast-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: var(--red); color: var(--black); flex: none; }
.toast-ico svg { width: 22px; height: 22px; }
.toast-txt { display: grid; line-height: 1.3; }
.toast-txt strong { font-family: var(--f-d); font-weight: 800; font-size: 0.95rem; }
.toast-txt span { font-size: 0.88rem; color: var(--muted); }

/* ------------------------------------------------ capítulos y paneles */
main { position: relative; z-index: 3; }
.ch { position: relative; }
.panel { position: relative; width: min(600px, 44vw); margin-left: calc(var(--pad) + 8px); text-shadow: 0 1px 2px rgba(10,8,9,0.55); }
.panel-wide { width: min(700px, 50vw); }
.panel h2 { font-weight: 800; font-size: clamp(2rem, 3.7vw, 3.5rem); line-height: 1.02; letter-spacing: -0.028em; margin-bottom: 1.1rem; max-width: 18ch; }
.panel-wide h2 { max-width: 20ch; }
.panel > p { max-width: 58ch; color: var(--bone); }
.panel > p + p { margin-top: 0.8rem; }
.lead { font-size: clamp(1.08rem, 1.35vw, 1.25rem); line-height: 1.55; }
.note { font-size: 0.92rem; color: var(--muted); margin-top: 1rem; }
.sub-h { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 2rem 0 0.8rem; }
.tag { display: inline-block; font-family: var(--f-d); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--line-2); color: var(--bone); text-shadow: none; }

/* 3D: cada capítulo deja aire de mundo antes y después de su panel */
.is-3d .ch:not(.ch-hero) { padding-top: 34vh; }
.is-3d .ch:not(.ch-hero)::after { content: ''; display: block; height: 70vh; }
.is-3d .ch-phygital::after { height: 115vh; }
.is-3d .ch-contact::after { height: 50vh; }
.is-3d .panel.stick { position: sticky; }
.is-3d .work-video { display: none; }
.phy-art { margin: 1.2rem 0 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.phy-art img { width: 100%; height: 120px; object-fit: cover; object-position: 50% 45%; }
.side-art { width: calc(100% + 40px); max-width: none; margin: -18px -20px 14px; height: 130px; object-fit: cover; border-radius: 13px 13px 0 0; }
.side { overflow: hidden; }
.is-3d [data-frame="center"] .panel { margin-inline: auto; }

/* héroe */
.ch-hero { min-height: 100svh; display: flex; align-items: flex-end; }
.panel-hero { width: min(760px, 92vw); padding-bottom: clamp(56px, 11vh, 120px); }
.hero-kicker { font-family: var(--f-d); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.24em; color: var(--muted); margin-bottom: 1.1rem; }
.panel-hero h1 { font-weight: 800; font-size: clamp(3rem, 7.2vw, 6rem); line-height: 0.94; letter-spacing: -0.035em; margin-bottom: 1.4rem; max-width: 12ch; }
.panel-hero .lead { max-width: 52ch; margin-bottom: 1.8rem; }
.scroll-cue { display: flex; align-items: center; gap: 12px; margin-top: 2.4rem; font-family: var(--f-d); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cue-line { position: relative; width: 2px; height: 34px; background: var(--line); overflow: hidden; border-radius: 2px; }
.cue-line::after { content: ''; position: absolute; left: 0; right: 0; top: -40%; height: 40%; background: var(--red); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { to { top: 100%; } }

/* lore */
.forces { display: flex; align-items: center; gap: 14px; margin-top: 1.6rem; font-family: var(--f-d); font-weight: 800; font-size: 0.86rem; letter-spacing: 0.18em; text-transform: uppercase; }
.force-order { color: var(--bone); } .force-chaos { color: var(--red); }
.force-vs { flex: 0 0 90px; height: 1.5px; background: linear-gradient(90deg, var(--bone), var(--red)); }

/* why */
.quote { margin: 1.8rem 0 0; padding: 0; }
.quote blockquote { margin: 0; font-family: var(--f-d); font-weight: 700; font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.25; letter-spacing: -0.015em; max-width: 26ch; }
.quote blockquote::before { content: ''; display: block; width: 36px; height: 3px; background: var(--red); margin-bottom: 0.9rem; }
.quote figcaption { margin-top: 0.7rem; color: var(--muted); font-size: 0.95rem; }
.quote-echo blockquote { font-size: clamp(1.3rem, 2.1vw, 1.9rem); max-width: 28ch; }

/* how: misiones y rangos */
.quests { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 2px; }
.quest { display: grid; grid-template-columns: 30px 82px 1fr; column-gap: 12px; align-items: baseline; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.quest:last-child { border-bottom: 1px solid var(--line); }
.quest-mark { grid-row: span 2; align-self: start; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid var(--line-2); color: transparent; transition: background-color 0.4s, border-color 0.4s, color 0.4s; margin-top: 2px; }
.quest-mark .ico { width: 15px; height: 15px; stroke-width: 3; }
.quest.is-done .quest-mark { background: var(--red); border-color: var(--red); color: var(--black); }
.quest-k { font-family: var(--f-d); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.quest-t { font-family: var(--f-d); font-weight: 700; font-size: 1.05rem; }
.quest-d { grid-column: 3; font-size: 0.95rem; color: var(--muted); line-height: 1.5; }
.tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tier { display: grid; align-content: start; gap: 6px; padding-top: 12px; border-top: 2px solid var(--line-2); }
.tier-2 { border-top-color: var(--red); }
.tier-rank { display: flex; gap: 3px; height: 10px; }
.tier-rank i { width: 14px; height: 6px; background: var(--red); clip-path: polygon(0 100%, 50% 0, 100% 100%, 82% 100%, 50% 36%, 18% 100%); }
.tier-n { font-family: var(--f-d); font-weight: 800; font-size: 1.1rem; }
.tier-d { font-size: 0.9rem; color: var(--muted); line-height: 1.45; }

/* assets: inventario */
.inventory { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.slot { position: relative; display: grid; align-content: space-between; gap: 10px; min-height: 108px; padding: 11px 11px 10px; border-radius: 10px; border: 1.5px dashed rgba(223,211,209,0.22); background: rgba(20,18,19,0.5); color: var(--muted); text-shadow: none; transition: border-color 0.5s, background-color 0.5s, color 0.5s, transform 0.5s var(--ease); }
.slot-ico .ico { width: 22px; height: 22px; opacity: 0.45; transition: opacity 0.5s, color 0.5s; }
.slot-n { font-family: var(--f-d); font-weight: 700; font-size: 0.84rem; line-height: 1.2; }
.slot-m { font-family: var(--f-d); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
.slot.is-filled { border-style: solid; border-color: var(--line-2); background: rgba(102,20,36,0.62); color: var(--bone); }
.slot.is-filled .slot-ico .ico { opacity: 1; color: var(--red); }
.is-3d .slot.is-filled { animation: slotin 0.6s var(--ease); }
@keyframes slotin { from { transform: scale(0.9); } }

/* phygital: el pico */
.demo { margin-top: 1.6rem; padding: 18px; border-radius: 14px; background: var(--plate); border: 1px solid var(--line); text-shadow: none; }
.demo-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 14px; }
.demo-head h3 { font-weight: 800; font-size: 1.15rem; }
.demo-head p { font-size: 0.92rem; color: var(--muted); }
.demo-body { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.scan { appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer; display: grid; gap: 10px; justify-items: center; }
.scan-qr { position: relative; display: block; width: 148px; aspect-ratio: 1; padding: 10px; border-radius: 12px; background: var(--bone); transition: transform 0.3s var(--ease); overflow: hidden; }
.qr-svg { width: 100%; height: 100%; }
.scan-beam { position: absolute; left: 6px; right: 6px; top: 8%; height: 3px; background: var(--red); box-shadow: 0 4px 10px -2px rgba(255,0,61,0.6); opacity: 0; }
.scan:hover .scan-qr { transform: translateY(-3px) rotate(-1.5deg); }
.scan:hover .scan-beam { opacity: 1; animation: beam 1.4s ease-in-out infinite alternate; }
.scan.is-scanning .scan-beam { opacity: 1; animation: beam 0.45s ease-in-out 2 alternate; }
.scan.is-scanning .scan-qr { animation: scanpop 0.5s var(--ease); }
@keyframes beam { from { top: 8%; } to { top: 90%; } }
@keyframes scanpop { 40% { transform: scale(0.94); } }
.scan-label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px; background: var(--red); color: var(--black); font-family: var(--f-d); font-weight: 800; font-size: 0.9rem; transition: background-color 0.2s; }
.scan:hover .scan-label { background: var(--red-2); }
.scan:focus-visible { outline: none; } .scan:focus-visible .scan-label { outline: 2px solid var(--bone); outline-offset: 3px; }
.demo-side { display: grid; gap: 14px; min-width: 0; }
.energy { display: grid; gap: 7px; }
.energy-top { display: flex; justify-content: space-between; font-family: var(--f-d); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.energy-val { color: var(--bone); letter-spacing: 0.04em; }
.bar-big { height: 14px; border-radius: 7px; }
.dash { border-top: 1px solid var(--line); padding-top: 12px; }
.dash-head { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.tag-sample { border-color: var(--red); color: var(--bone); }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0; }
.dash-cell { min-width: 0; }
.dash-cell dt { font-size: 0.78rem; color: var(--muted); line-height: 1.3; }
.dash-cell dd { margin: 2px 0 0; font-family: var(--f-d); font-weight: 800; font-size: 1.5rem; line-height: 1.1; }
.dash-note { font-size: 0.76rem; color: var(--muted); margin-top: 10px; line-height: 1.4; }

/* platforms: versus */
.panel-split { width: min(1040px, calc(100vw - 2 * var(--pad) - 40px)); margin-inline: auto; text-align: center; }
.panel-split h2 { margin-inline: auto; max-width: 22ch; }
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; text-align: left; }
.side { padding: 18px 20px; border-radius: 14px; background: var(--plate); border: 1px solid var(--line); text-shadow: none; }
.side h3 { font-weight: 800; font-size: 1.35rem; margin-bottom: 0.4rem; }
.side p { color: var(--muted); font-size: 0.98rem; }
.side-roblox { border-top: 3px solid var(--bone); } .side-uefn { border-top: 3px solid var(--red); }
.vs { align-self: center; font-family: var(--f-d); font-weight: 800; font-size: 1.4rem; color: var(--red); letter-spacing: 0.04em; }

/* work */
.work-reals { display: grid; gap: 14px; margin-top: 0.4rem; }
.work-real { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; }
.work-thumb { width: 150px; height: 92px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: #000; }
.thumb-logo { object-fit: contain; padding: 6px; background: #0b0a0a; }
.work-real h3 { font-weight: 800; font-size: 1.15rem; margin-bottom: 0.2rem; }
.work-real p { font-size: 0.95rem; color: var(--muted); line-height: 1.5; }
.work-video { margin-top: 1.2rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.work-video video { width: 100%; height: auto; aspect-ratio: 1280 / 680; background: #000; }
.concepts { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.concept { padding-top: 12px; border-top: 1px solid var(--line-2); }
.concept h3 { font-weight: 700; font-size: 1rem; margin: 0.55rem 0 0.25rem; }
.concept p { font-size: 0.86rem; color: var(--muted); line-height: 1.45; }

/* origin: línea de tiempo tipo mapa de niveles */
.panel-timeline h2 { max-width: 20ch; }
.timeline { list-style: none; margin: 1.4rem 0 0; padding: 0 0 0 30px; display: grid; gap: 16px; position: relative; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line-2); }
.node { position: relative; display: grid; grid-template-columns: 4.2rem 1fr; column-gap: 14px; row-gap: 2px; align-content: start; color: var(--muted); }
.node-y { grid-row: span 2; font-family: var(--f-d); font-weight: 800; font-size: 1.35rem; line-height: 1.15; color: var(--bone); }
.node-dot { position: absolute; left: -30px; top: 6px; width: 14px; height: 14px; border-radius: 3px; background: var(--black); border: 2px solid var(--line-2); transform: rotate(45deg); transition: background-color 0.4s, border-color 0.4s; }
.node.is-lit .node-dot { background: var(--red); border-color: var(--red); }
.node-t { grid-column: 2; font-family: var(--f-d); font-weight: 700; font-size: 1.02rem; color: var(--bone); }
.node-d { grid-column: 2; font-size: 0.92rem; line-height: 1.45; }
.node.is-lit .node-y { color: var(--red); }

/* studio */
.studio-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.4rem; }
.studio-photo { margin: 1.4rem 0 0; max-width: 420px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.studio-photo img { width: 100%; height: 170px; object-fit: cover; }

/* Triunfos */
.panel-cards { width: min(1100px, calc(100vw - 2 * var(--pad))); margin-inline: auto; text-align: center; }
.panel-cards h2 { margin-inline: auto; }
.cards-hint { color: var(--muted); font-size: 0.95rem; margin: -0.3rem auto 1.6rem; max-width: 52ch; }
.hint-coarse { display: none; }
@media (pointer: coarse) { .hint-fine { display: none; } .hint-coarse { display: inline; } .card-cap { display: none; } }
.cards { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: clamp(10px, 1.6vw, 22px); perspective: 1400px; }
.card-slot { display: grid; justify-items: center; gap: 12px; animation: float 5s ease-in-out infinite; animation-delay: calc(var(--i) * -0.9s); }
.card-cap { font-family: var(--f-d); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--muted); max-width: 16ch; line-height: 1.25; }
@keyframes float { 50% { transform: translateY(-10px); } }
.card { display: block; width: clamp(128px, 14.5vw, 200px); aspect-ratio: 7 / 12; text-decoration: none; color: var(--bone); text-shadow: none; border-radius: 14px; }
.card-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.75s var(--ease); }
.card:hover .card-inner, .card:focus-visible .card-inner, .card.is-flipped .card-inner { transform: rotateY(180deg); }
.card:hover .card-inner { transform: rotateY(180deg) translateY(-6px); }
.card:focus-visible { outline-offset: 6px; }
.card-back, .card-front { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; display: grid; box-shadow: 0 18px 36px -16px rgba(0,0,0,0.9); }
.card-back { background: radial-gradient(circle at 50% 50%, #7a1a2c 0%, var(--wine) 40%, var(--wine-2) 100%); border: 1.5px solid rgba(223,211,209,0.4); place-items: center; }
.card-back::before { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(223,211,209,0.35); border-radius: 9px; }
.card-back-sigil { width: 46%; aspect-ratio: 1; border: 1.5px solid var(--bone); transform: rotate(45deg); box-shadow: inset 0 0 0 9px var(--wine), inset 0 0 0 10.5px rgba(223,211,209,0.7); }
.card-back-sigil::after { content: ''; position: absolute; inset: 34%; background: var(--red); }
.card-front { transform: rotateY(180deg); background: linear-gradient(170deg, #241d20 0%, #120f10 100%); border: 1.5px solid var(--bone); grid-template-rows: auto 1fr auto auto; justify-items: center; padding: 14px 10px 14px; text-align: center; }
.card-front::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(223,211,209,0.25); border-radius: 9px; pointer-events: none; }
.card-num { position: relative; font-family: var(--f-d); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.2em; color: var(--bone); }
.card-back .card-num { position: absolute; top: 16px; left: 0; right: 0; text-align: center; }
.card-logo { align-self: center; width: 64%; height: auto; }
.card-logo-bc { width: 78%; }
.card-name { position: relative; font-family: var(--f-d); font-weight: 800; font-size: clamp(0.82rem, 1.05vw, 1rem); line-height: 1.15; }
.card-dom { position: relative; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 0.72rem; color: var(--muted); }
.card-dom .ico { width: 12px; height: 12px; }
.card-brandcade .card-front { background: linear-gradient(160deg, #641974 0%, #0361af 60%, #6fc5eb 100%); border-color: rgba(255,255,255,0.7); }
.card-brandcade .card-front .card-dom { color: #fff; }
.card-sigil { position: relative; align-self: center; width: 58%; aspect-ratio: 1; }
.card-sigil-uetc { border-radius: 50%; border: 2px solid var(--bone); box-shadow: inset 0 0 0 9px #1b1517, inset 0 0 0 11px var(--red), inset 0 0 0 20px #1b1517, inset 0 0 0 22px var(--bone); }
.card-sigil-egdc { background: var(--bone); clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
.card-sigil-egdc::after { content: ''; position: absolute; inset: 24%; background: var(--red); clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
.card-sigil-arden { background: linear-gradient(var(--bone), var(--bone)) center 74% / 80% 3px no-repeat; }
.card-sigil-arden::before { content: ''; position: absolute; inset: 8% 10% 30%; background: var(--bone); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.card-sigil-arden::after { content: ''; position: absolute; inset: 40% 30% 30%; background: var(--red); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.card-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card.has-art .card-front { border: 0; background: #0b0a0a; padding: 0 14% 13%; grid-template-rows: 1fr auto auto; }
.card.has-art .card-front::before { display: none; }
.card.has-art .card-front > .card-num { display: none; }
.card.has-art .card-front::after { content: ''; position: absolute; inset: 52% 7% 6%; background: linear-gradient(0deg, rgba(10,8,9,0.9) 30%, transparent); pointer-events: none; }
.card.has-art .card-name, .card.has-art .card-dom { z-index: 1; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.card.has-art .card-dom { color: var(--bone); }
.card-brandcade.has-art .card-front { background: #0b0a0a; }

/* diff */
.perks { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.perk { padding: 14px 0 14px; border-top: 1px solid var(--line); }
.perk h3 { font-weight: 800; font-size: 1.08rem; margin-bottom: 0.25rem; }
.perk h3::before { content: ''; display: inline-block; width: 9px; height: 9px; background: var(--red); margin-right: 10px; transform: translateY(-1px) rotate(45deg); }
.perk p { font-size: 0.94rem; color: var(--muted); line-height: 1.5; }

/* contact */
.panel-contact { width: min(780px, calc(100vw - 2 * var(--pad))); margin-inline: auto; text-align: center; }
.panel-contact h2 { font-size: clamp(2.3rem, 4.6vw, 4.2rem); max-width: 16ch; margin-inline: auto; }
.panel-contact .lead { max-width: 52ch; margin: 0 auto 1.8rem; }
.ctas-big { justify-content: center; }
.ctas-big .btn { min-height: 56px; font-size: 1rem; padding: 0 1.5rem; }
.panel-contact .note { margin-top: 1.1rem; }

/* ------------------------------------------------ footer */
.footer { position: relative; z-index: 4; background: var(--black); border-top: 1px solid var(--line); padding: 56px var(--pad) calc(32px + env(safe-area-inset-bottom)); }
.footer-in { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 32px; max-width: 1240px; margin: 0 auto; }
.footer-brand img { width: 60px; height: auto; }
.family { margin-top: 12px; font-size: 0.85rem; color: var(--muted); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col a { text-decoration: none; color: var(--bone); font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px; min-height: 28px; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-h { font-family: var(--f-d); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.footer-actions { display: grid; align-content: start; gap: 12px; justify-items: start; }
.totop { font-family: var(--f-d); font-weight: 700; }
.mode-toggle { appearance: none; background: transparent; border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 12px; color: var(--muted); font-size: 0.85rem; cursor: pointer; }
.mode-toggle:hover { color: var(--bone); border-color: var(--bone); }
.is-3d .m-to-3d, .is-static .m-to-static { display: none; }
.legal { max-width: 1240px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 0.8rem; color: var(--muted); }

/* ------------------------------------------------ barra móvil */
.mobilebar { display: none; }

/* ------------------------------------------------ versión estática */
.is-static .hero-art { position: absolute; height: 100svh; }
.is-static .ch:not(.ch-hero) { padding: clamp(80px, 13vh, 150px) 0; }
.is-static .ch:not(.ch-hero)::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.is-static .panel { margin-inline: auto; width: min(1080px, calc(100vw - 2 * var(--pad))); text-shadow: none; }
.is-static .panel > p, .is-static .panel h2 { max-width: 30ch; }
.is-static .panel > p { max-width: 64ch; }
.is-static .ch-lore::before { background: linear-gradient(90deg, var(--black) 38%, rgba(20,18,19,0.35) 72%, rgba(20,18,19,0.1)), url(../media/gen/chaos-core.webp) right center / contain no-repeat, #000; }
.is-static .ch-why::before { background: linear-gradient(90deg, var(--black) 42%, rgba(20,18,19,0.6) 72%, rgba(20,18,19,0.4)), url(../media/video/hub-poster.webp) right center / cover no-repeat; }
.is-static .ch-how, .is-static .ch-work, .is-static .ch-diff { background: var(--black-2); }
.is-static .ch-assets::before { background: radial-gradient(ellipse 60% 70% at 85% 50%, rgba(102,20,36,0.55), transparent 70%); }
.is-static .ch-phygital::before { background: radial-gradient(ellipse 70% 80% at 80% 40%, rgba(255,0,61,0.16), transparent 65%), var(--black); }
.is-static .ch-platforms::before { background: radial-gradient(ellipse 45% 70% at 12% 40%, rgba(223,211,209,0.08), transparent 70%), radial-gradient(ellipse 45% 70% at 88% 40%, rgba(255,0,61,0.14), transparent 70%); }
.is-static .ch-echo::before { background: repeating-radial-gradient(circle at 85% 50%, rgba(255,0,61,0.14) 0 2px, transparent 2px 46px); }
.is-static .ch-triunfos::before { background: radial-gradient(ellipse 60% 60% at 50% 60%, rgba(102,20,36,0.5), transparent 70%); }
.is-static .ch-contact::before { background: linear-gradient(0deg, var(--black) 5%, rgba(20,18,19,0.72) 50%, rgba(20,18,19,0.55)), url(../media/gen/shadow-path.webp) center / cover no-repeat; }
.is-static .panel-split, .is-static .panel-timeline, .is-static .panel-cards, .is-static .panel-contact { width: min(1080px, calc(100vw - 2 * var(--pad))); }
.is-static .panel-contact { width: min(780px, calc(100vw - 2 * var(--pad))); }
.is-static .demo { max-width: 760px; }
.is-static .quests, .is-static .inventory, .is-static .perks, .is-static .concepts { max-width: 900px; }
.is-static .studio-photo { max-width: 640px; }
.is-static .studio-photo img { height: 260px; }
.is-static .work-video { max-width: 860px; }
.is-static .card-slot { animation: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------ móvil */
@media (max-width: 899px) {
  body { font-size: 1rem; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .topbar { height: 60px; background: rgba(20,18,19,0.94); border-bottom: 1px solid var(--line); }
  .brand img { width: 38px; }
  .ctas-top, .rail, .zone-card { display: none; }
  .ctas-hero { display: none; }
  .mobilebar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(20,18,19,0.94); border-top: 1px solid var(--line); }
  .mobilebar .ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mobilebar .btn { min-height: 48px; padding: 0 0.6rem; font-size: 0.84rem; gap: 0.4rem; }
  .hud { top: 14px; bottom: auto; left: 66px; right: auto; justify-items: start; z-index: 21; grid-auto-flow: column; justify-content: start; gap: 6px; font-size: 0.68rem; }
  .hud-xp, .hud-energy { padding: 0 8px; height: 32px; gap: 6px; background: transparent; border-color: var(--line); }
  .hud-xp .ico, .hud-energy .hud-label { display: none; }
  .hud-xp-val { font-size: 0.82rem; }
  .hud-energy .bar { width: 40px; }
  .hud-low { display: none; }
  .toasts { top: auto; right: 12px; left: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); width: auto; justify-items: center; }
  .panel, .panel-wide { width: auto; margin: 0 16px; }
  .panel h2 { font-size: clamp(1.75rem, 8vw, 2.4rem); max-width: none; }
  .panel-hero { padding-bottom: 100px; margin: 0 16px; width: auto; }
  .scroll-cue { margin-top: 1.4rem; }
  .panel-hero h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .hero-art::after { background: linear-gradient(0deg, rgba(20,18,19,0.97) 0%, rgba(20,18,19,0.82) 34%, rgba(20,18,19,0.15) 62%, rgba(20,18,19,0.3) 100%); }
  .hero-art img { object-position: 50% 30%; }
  .scrim { background: linear-gradient(0deg, rgba(20,18,19,0.96) 0%, rgba(20,18,19,0.88) 42%, rgba(20,18,19,0.2) 70%, rgba(20,18,19,0) 100%) !important; }
  .is-3d .ch:not(.ch-hero) { padding: 26vh 0 56vh; }
  .is-3d .ch-phygital { padding-bottom: 80vh; }
  .is-3d .panel:not(.stick) { background: linear-gradient(180deg, rgba(20,18,19,0) 0%, rgba(20,18,19,0.86) 60px, rgba(20,18,19,0.86) calc(100% - 40px), rgba(20,18,19,0) 100%); padding: 60px 0 40px; }
  .quest { grid-template-columns: 28px 1fr; }
  .quest-k { grid-column: 2; } .quest-t { grid-column: 2; } .quest-d { grid-column: 2; }
  .quest-mark { grid-row: span 3; }
  .tiers { grid-template-columns: 1fr; gap: 12px; }
  .inventory { grid-template-columns: repeat(2, 1fr); }
  .slot { min-height: 92px; }
  .demo { padding: 14px; }
  .demo-body { grid-template-columns: 1fr; justify-items: stretch; }
  .scan { grid-template-columns: auto 1fr; align-items: center; justify-items: start; }
  .scan-qr { width: 112px; }
  .versus { grid-template-columns: 1fr; gap: 10px; }
  .vs { justify-self: center; font-size: 1.1rem; }
  .panel-split, .panel-timeline, .panel-cards, .panel-contact { width: auto; margin: 0 16px; }
  .work-real { grid-template-columns: 104px 1fr; gap: 12px; }
  .work-thumb { width: 104px; height: 70px; }
  .concepts { grid-template-columns: 1fr; gap: 10px; }
  .studio-photo img { height: 140px; }
  .cards { flex-wrap: wrap; gap: 12px; }
  .card { width: calc((100vw - 32px - 24px) / 3); max-width: 150px; }
  .card-dom { display: none; }
  .card-front { padding: 10px 6px 12px; }
  .card-name { font-size: 0.78rem; }
  .perks { grid-template-columns: 1fr; }
  .footer-in { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .is-static .ch:not(.ch-hero) { padding: 64px 0; }
  .is-static .panel { margin: 0 16px; width: auto; }
  .is-static .studio-photo img { height: 170px; }
}
@media (max-width: 899px) and (min-width: 600px) { .card { width: 150px; } }