/* ════════════════════════════════════════════════════════════════
   SUPERINTELLIGENCE 超知能 — sistema visual
   Paleta: negro abisal, cian (la máquina), coral (lo humano),
   oro (lo que se aprende), índigo.
   ════════════════════════════════════════════════════════════════ */
:root {
  --abyss: #02060d;
  --deep: #061424;
  --ink: #0b1f33;
  --cyan: #3df5e0;
  --cyan-dim: #1aa59a;
  --coral: #ff5a4e;
  --vermilion: #e2412b;
  --gold: #f4c430;
  --indigo: #2b3fa8;
  --bone: #eef3f1;
  --mute: #8aa1ad;
  --line: rgba(238, 243, 241, .14);

  --f-display: "Unbounded", system-ui, sans-serif;
  --f-serif: "Shippori Mincho B1", "Yu Mincho", serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --gutter: clamp(16px, 4vw, 64px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--abyss); }
body {
  margin: 0;
  background: var(--abyss);
  color: var(--bone);
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; }
::selection { background: var(--cyan); color: var(--abyss); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em { font-style: italic; color: var(--cyan); }
strong { color: var(--bone); font-weight: 800; }
kbd {
  font-family: var(--f-mono); font-size: .75em; padding: .1em .45em; border: 1px solid var(--line);
  border-radius: 4px; background: rgba(255,255,255,.04);
}
@media (pointer: fine) { body, a, button, input { cursor: none; } }

/* ── WebGL de fondo ───────────────────────────────────────────── */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
main, footer { position: relative; z-index: 2; }

/* grano de película y viñeta */
.grain {
  position: fixed; inset: -50%; z-index: 50; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0) } 20% { transform: translate(-6%,4%) } 40% { transform: translate(4%,-8%) }
  60% { transform: translate(-9%,-3%) } 80% { transform: translate(7%,9%) } 100% { transform: translate(0,0) }
}
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.75) 100%);
}
.flash { position: fixed; inset: 0; z-index: 90; background: #fff; opacity: 0; pointer-events: none; }

/* ── Preloader ────────────────────────────────────────────────── */
.loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 1.2rem;
  font-family: var(--f-mono); color: var(--bone);
}
.loader__shutter { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--abyss); z-index: -1; }
.loader__shutter--top { top: 0; } .loader__shutter--bot { bottom: 0; }
.loader__kanji {
  font-family: var(--f-serif); font-weight: 800; font-size: clamp(5rem, 16vw, 13rem); line-height: 1;
  background: linear-gradient(180deg, var(--bone), var(--cyan-dim)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.loader__count { font-family: var(--f-display); font-weight: 200; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: .2em; }
.loader__count small { font-size: .5em; color: var(--mute); }
.loader__line { width: min(320px, 70vw); height: 1px; background: var(--line); overflow: hidden; }
.loader__line i { display: block; height: 100%; width: 0; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.loader__msg { font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--mute); min-height: 1em; }

/* ── Cursor ───────────────────────────────────────────────────── */
.cursor, .cursor-dot { position: fixed; top: 0; left: 0; z-index: 95; pointer-events: none; border-radius: 50%; }
.cursor {
  width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1px solid rgba(238,243,241,.6);
  display: grid; place-items: center; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background .3s, border-color .3s;
  mix-blend-mode: difference;
}
.cursor.is-hover { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--bone); border-color: var(--bone); }
.cursor__label { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: #000; opacity: 0; transition: opacity .2s; }
.cursor.is-hover .cursor__label { opacity: 1; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
@media (pointer: coarse) { .cursor, .cursor-dot { display: none; } }

/* ── HUD ──────────────────────────────────────────────────────── */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 18px var(--gutter); font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em;
  mix-blend-mode: difference;
}
.hud__logo { display: flex; align-items: center; gap: .7rem; }
.hud__logo svg { width: 32px; height: 32px; fill: none; stroke: var(--bone); stroke-width: 1.3; }
.hud__logo span { display: flex; flex-direction: column; line-height: 1.25; }
.hud__logo b { color: var(--cyan); font-weight: 500; letter-spacing: .5em; }
.hud__nav { display: flex; gap: clamp(.8rem, 2vw, 2rem); }
.hud__nav a { position: relative; opacity: .7; transition: opacity .3s; }
.hud__nav a::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.hud__nav a:hover { opacity: 1; }
.hud__nav a:hover::after, .hud__nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.hud__nav a.is-active { opacity: 1; }
.hud__sound { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 99px; letter-spacing: .2em; font-size: .65rem; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.bars i { width: 2px; height: 3px; background: var(--bone); transition: height .3s; }
.hud__sound[aria-pressed="true"] .bars i { animation: eq .9s ease-in-out infinite alternate; }
.hud__sound[aria-pressed="true"] .bars i:nth-child(2) { animation-delay: -.3s } .hud__sound[aria-pressed="true"] .bars i:nth-child(3) { animation-delay: -.6s }
.hud__sound[aria-pressed="true"] .bars i:nth-child(4) { animation-delay: -.15s } .hud__sound[aria-pressed="true"] .bars i:nth-child(5) { animation-delay: -.45s }
@keyframes eq { from { height: 2px } to { height: 12px } }
@media (max-width: 900px) { .hud__nav { display: none; } }

.rail { position: fixed; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 1rem; pointer-events: none; }
.rail__track { width: 1px; height: 24vh; background: var(--line); position: relative; overflow: hidden; }
.rail__track i { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--cyan); transform-origin: top; transform: scaleY(0); box-shadow: 0 0 8px var(--cyan); }
.rail__kanji { font-family: var(--f-serif); font-weight: 800; font-size: 1.4rem; writing-mode: vertical-rl; color: var(--bone); text-shadow: 0 0 18px rgba(61,245,224,.6); }
.telemetry {
  position: fixed; left: var(--gutter); bottom: 18px; z-index: 40; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .15em; color: var(--mute);
  display: grid; gap: 2px; pointer-events: none; mix-blend-mode: difference;
}
.telemetry span { color: var(--bone); }
@media (max-width: 700px) { .rail, .telemetry { display: none; } }

/* ── Tipografía común ─────────────────────────────────────────── */
.label { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .25em; color: var(--cyan); text-transform: uppercase; margin: 0 0 2rem; }
.label--center { text-align: center; }
.eyebrow { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .4em; color: var(--mute); margin: 0 0 2rem; }
h2 { font-family: var(--f-display); font-weight: 900; line-height: .95; letter-spacing: -.02em; margin: 0; font-size: clamp(2.4rem, 7vw, 7rem); text-transform: uppercase; }
h2 em { font-family: var(--f-serif); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--cyan); }
.outline { color: transparent; -webkit-text-stroke: 1px var(--bone); }
.gold { color: var(--gold); text-shadow: 0 0 40px rgba(244,196,48,.4); }
.split { display: inline-block; }
.split .ch { display: inline-block; will-change: transform; }

section { position: relative; padding: clamp(6rem, 14vh, 12rem) var(--gutter); }

/* ── Botones ──────────────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  padding: 1.05rem 1.8rem; border-radius: 99px; border: 1px solid var(--cyan); font-family: var(--f-mono); font-size: .75rem; letter-spacing: .2em;
  color: var(--abyss); background: var(--cyan); transition: color .4s var(--ease), box-shadow .4s;
}
.btn span { position: relative; z-index: 1; }
.btn::before { content: ""; position: absolute; inset: 0; background: var(--abyss); transform: translateY(101%); border-radius: inherit; transition: transform .5s var(--ease); }
.btn:hover { color: var(--cyan); box-shadow: 0 0 40px rgba(61,245,224,.35); }
.btn:hover::before { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--cyan); }
.btn--ghost::before { background: var(--cyan); }
.btn--ghost:hover { color: var(--abyss); }
.btn--big { padding: 1.6rem 3rem; font-size: .9rem; }

/* ── HERO ─────────────────────────────────────────────────────── */
.hero { min-height: 100svh; display: grid; place-items: center; text-align: center; padding-top: 0; padding-bottom: 0; }
.hero__inner { position: relative; }
.hero__title { margin: 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; line-height: .86; letter-spacing: -.035em; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line:nth-child(1) { font-size: clamp(3.4rem, 17vw, 17rem); }
.hero__title .outline { -webkit-text-stroke: 1.5px var(--bone); }
.hero__jp {
  position: absolute; right: -.1em; top: 50%; transform: translate(100%, -50%); font-family: var(--f-serif); font-size: .22em;
  writing-mode: vertical-rl; white-space: nowrap; color: var(--coral); letter-spacing: .1em; text-shadow: 0 0 20px rgba(255,90,78,.6);
}
@media (max-width: 700px) { .hero__jp { position: static; display: block; transform: none; writing-mode: horizontal-tb; font-size: .3em; margin-top: .3em; } }
.hero__sub { font-size: clamp(1.1rem, 2vw, 1.6rem); margin: 2.2rem 0 0; color: var(--bone); }
.hero__scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: .7rem; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .4em; color: var(--mute); }
.hero__scroll i { width: 1px; height: 56px; background: linear-gradient(var(--cyan), transparent); animation: drip 2s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0) } 50% { transform: scaleY(1); transform-origin: top } 51% { transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } }

/* ── Marquee ──────────────────────────────────────────────────── */
.marquee { position: relative; z-index: 2; overflow: hidden; padding: 1.4rem 0; border-block: 1px solid var(--line); background: rgba(2,6,13,.55); backdrop-filter: blur(6px); }
.marquee__track { display: flex; width: max-content; gap: 3rem; align-items: center; white-space: nowrap; will-change: transform; }
.marquee__track span { font-family: var(--f-display); font-weight: 900; font-size: clamp(2rem, 5vw, 4.5rem); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px var(--bone); }
.marquee__track b { font-family: var(--f-serif); font-weight: 800; font-size: clamp(1.6rem, 4vw, 3.6rem); color: var(--coral); }

/* ── MANIFIESTO ───────────────────────────────────────────────── */
.manifesto { max-width: 1400px; margin: 0 auto; }
.manifesto__text { font-family: var(--f-serif); font-size: clamp(1.6rem, 3.8vw, 3.6rem); line-height: 1.22; margin: 0; letter-spacing: -.01em; }
.manifesto__text .w { opacity: .12; transition: none; }
.manifesto__text .w.hl { color: var(--cyan); }
.manifesto__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 6rem; border-top: 1px solid var(--line); padding-top: 2rem; }
@media (max-width: 800px) { .manifesto__stats { grid-template-columns: repeat(2, 1fr); } }
.stat__n { display: block; font-family: var(--f-display); font-weight: 200; font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 1; color: var(--bone); }
.stat__l { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .15em; color: var(--mute); text-transform: uppercase; }

/* ── Cabecera de sección (kanji gigante + título) ─────────────── */
.sec-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 4vw, 4rem); align-items: end; max-width: 1500px; margin: 0 auto 4rem; }
.sec-head__k { font-family: var(--f-serif); font-weight: 800; font-size: clamp(6rem, 16vw, 15rem); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(61,245,224,.55); text-shadow: 0 0 80px rgba(61,245,224,.25); user-select: none; }
.sec-head h2 { font-size: clamp(2.4rem, 6.5vw, 6.5rem); }
.sec-head__p { color: #c7d3d8; max-width: 62ch; margin: 1.4rem 0 0; }
.sec-head--center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.sec-head--center .sec-head__k { margin-bottom: -.25em; }
.sec-head--center .sec-head__p { margin-inline: auto; }
@media (max-width: 760px) { .sec-head { grid-template-columns: 1fr; } .sec-head__k { font-size: 7rem; } }
.c0 { color: var(--cyan); } .c1 { color: var(--coral); }

/* ── Controles comunes ────────────────────────────────────────── */
.ctl-label { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .22em; color: var(--mute); margin: 1.8rem 0 .7rem; display: flex; justify-content: space-between; gap: 1rem; }
.ctl-label:first-child { margin-top: 0; }
.ctl-label small { letter-spacing: .05em; }
.ctl-label span { color: var(--gold); }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.seg button, .aspects button, .styles button { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em; padding: .6rem .95rem; color: var(--mute); transition: color .25s, background .25s, border-color .25s; }
.seg button.is-on, .aspects button.is-on { background: rgba(61,245,224,.12); color: var(--cyan); }
.seg button.c1.is-on { background: rgba(255,90,78,.14); color: var(--coral); }
.seg button:hover, .aspects button:hover, .styles button:hover { color: var(--bone); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--gold), var(--coral)); border-radius: 2px; outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--abyss); border: 2px solid var(--bone); box-shadow: 0 0 18px rgba(255,255,255,.4); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--abyss); border: 2px solid var(--bone); }
textarea, select { font: inherit; color: var(--bone); background: rgba(2,6,13,.6); border: 1px solid var(--line); border-radius: 6px; }
textarea { width: 100%; padding: 1rem; font-family: var(--f-mono); font-size: .9rem; resize: vertical; outline: none; transition: border-color .3s; }
textarea:focus { border-color: var(--cyan); }
select { font-family: var(--f-mono); font-size: .75rem; padding: .3rem .4rem; }

/* ── Barra de comando (hero y create) ─────────────────────────── */
.command { display: flex; align-items: center; gap: 1rem; width: min(760px, 100%); margin: 2.6rem auto 0; padding: .55rem .55rem .55rem 1.3rem; border: 1px solid rgba(238,243,241,.25); border-radius: 99px; background: rgba(2,6,13,.55); backdrop-filter: blur(14px); transition: box-shadow .5s, border-color .5s; }
.command:focus-within { border-color: var(--cyan); box-shadow: 0 0 60px rgba(61,245,224,.25), inset 0 0 30px rgba(61,245,224,.06); }
.command__k { font-family: var(--f-serif); font-weight: 800; font-size: 1.4rem; color: var(--cyan); }
.command input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--bone); font-family: var(--f-mono); font-size: clamp(.9rem, 1.3vw, 1.05rem); padding: .8rem 0; }
.command input::placeholder { color: #5d717c; }
.command button { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .2em; padding: 1rem 1.4rem; border-radius: 99px; background: var(--cyan); color: var(--abyss); white-space: nowrap; }
.command--big { width: min(900px, 100%); }
.command--big input { font-size: clamp(1.1rem, 2vw, 1.5rem); font-family: var(--f-display); font-weight: 700; letter-spacing: .04em; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.2rem; }
.chips button { font-family: var(--f-mono); font-size: .7rem; padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 99px; color: var(--mute); background: rgba(2,6,13,.4); transition: color .3s, border-color .3s; }
.chips button:hover { color: var(--cyan); border-color: var(--cyan); }

/* ── HUD: rango de operador ───────────────────────────────────── */
.hud { mix-blend-mode: normal; background: linear-gradient(rgba(2,6,13,.7), transparent); }
.hud__right { display: flex; align-items: center; gap: .7rem; }
.hud__rank { display: flex; align-items: center; gap: .55rem; padding: .35rem .9rem .35rem .45rem; border: 1px solid var(--line); border-radius: 99px; font-size: .62rem; letter-spacing: .18em; }
.hud__rank-k { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bone); color: #000; font-family: var(--f-serif); font-weight: 800; font-size: .85rem; letter-spacing: 0; transition: background .4s; }
.hud__rank.bump .hud__rank-k { background: var(--gold); }
.hud__rank b { color: var(--cyan); font-weight: 500; }
@media (max-width: 560px) { .hud__rank-l, .hud__sound .lbl { display: none; } .hud__rank { padding-right: .45rem; } }
.rank-panel { position: absolute; right: var(--gutter); top: 74px; width: min(380px, calc(100vw - 32px)); padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(2,6,13,.94); backdrop-filter: blur(14px); }
.rank-panel .label { margin-bottom: 1rem; }
.rank-panel ol, .operator__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em; color: var(--mute); }
.rank-panel li::before, .operator__list li::before { content: "○"; display: inline-block; width: 1.8em; color: var(--mute); }
.rank-panel li.done, .operator__list li.done { color: var(--bone); }
.rank-panel li.done::before, .operator__list li.done::before { content: "●"; color: var(--cyan); }
.toasts { position: fixed; right: var(--gutter); bottom: 22px; z-index: 96; display: grid; gap: .6rem; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.2rem .9rem .9rem; border: 1px solid rgba(61,245,224,.5); border-radius: 10px; background: rgba(2,6,13,.94); backdrop-filter: blur(10px); box-shadow: 0 20px 60px rgba(61,245,224,.2); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; }
.toast b { font-family: var(--f-serif); font-size: 1.8rem; color: var(--gold); }
.toast small { display: block; color: var(--cyan); letter-spacing: .2em; font-size: .58rem; margin-bottom: .2rem; }

/* ── 01 SPEAK / 02 IMAGINE: rejilla de controles + escenario ───── */
.speak__grid, .imagine__grid { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: clamp(1.5rem, 3vw, 3rem); max-width: 1500px; margin: 0 auto; }
@media (max-width: 960px) { .speak__grid, .imagine__grid { grid-template-columns: 1fr; } }
.speak__controls, .imagine__controls { padding: 1.6rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(2,6,13,.72); backdrop-filter: blur(12px); align-self: start; }
.personas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.personas button { display: grid; gap: .2rem; justify-items: center; padding: .8rem .3rem; border: 1px solid var(--line); border-radius: 8px; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .06em; color: var(--mute); transition: all .3s var(--ease); }
.personas b { font-family: var(--f-serif); font-size: 1.5rem; color: var(--bone); font-weight: 800; }
.personas button:hover { border-color: rgba(61,245,224,.5); color: var(--bone); transform: translateY(-2px); }
.personas button.is-on { border-color: var(--cyan); background: rgba(61,245,224,.1); color: var(--cyan); box-shadow: 0 0 30px rgba(61,245,224,.15); }
.personas button.is-on b { color: var(--cyan); }
.temp-scale { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: .58rem; color: var(--mute); margin-top: .6rem; }
.temp-explain { font-size: .85rem; color: #b6c4ca; min-height: 3.2em; margin: .8rem 0 0; }
.payload { margin: 0; padding: 1rem; max-height: 280px; overflow: auto; font-family: var(--f-mono); font-size: .68rem; line-height: 1.55; color: #9fb1ba; background: rgba(0,0,0,.45); border: 1px solid var(--line); border-radius: 6px; white-space: pre-wrap; word-break: break-word; }
.payload .k { color: var(--cyan); } .payload .s { color: var(--gold); } .payload .n { color: var(--coral); }
.payload .chg { background: rgba(244,196,48,.28); border-radius: 2px; animation: chg 1.4s ease-out forwards; }
@keyframes chg { to { background: transparent; } }
.console { display: flex; flex-direction: column; min-height: 560px; border: 1px solid var(--line); border-radius: 10px; background: rgba(2,6,13,.8); backdrop-filter: blur(12px); overflow: hidden; box-shadow: 0 30px 120px rgba(61,245,224,.07); }
.console__bar { display: flex; align-items: center; gap: .45rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; color: var(--mute); }
.console__bar i { width: 9px; height: 9px; border-radius: 50%; background: #26323a; }
.console__bar i:first-child { background: var(--coral); }
.console__bar span:first-of-type { margin-left: .6rem; }
.console__tps { margin-left: auto; color: var(--gold); }
.console__log { flex: 1; overflow-y: auto; padding: 1.4rem; font-family: var(--f-mono); font-size: .9rem; line-height: 1.75; max-height: 62vh; scrollbar-width: thin; scrollbar-color: var(--cyan-dim) transparent; }
.console__log p { margin: 0 0 1rem; }
.console__log .sys { color: var(--mute); font-size: .78rem; }
.console__log .q { color: var(--gold); }
.console__log .q::before { content: "YOU › "; color: var(--mute); }
.console__log .a { color: var(--bone); white-space: pre-wrap; }
.console__log .who { color: var(--cyan); }
.console__log .essence { display: inline-block; margin-top: .3rem; padding: .25rem .7rem; border: 1px solid var(--gold); border-radius: 99px; color: var(--gold); font-size: .65rem; letter-spacing: .25em; }
.console__log .err { color: var(--coral); }
.console__form { display: flex; align-items: center; gap: 1rem; border-top: 1px solid var(--line); padding: .6rem .6rem .6rem 1.4rem; }
.console__form > span { color: var(--cyan); font-family: var(--f-display); }
.console__form input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--bone); font-family: var(--f-mono); font-size: 1rem; padding: .9rem 0; }
.console__form button { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .2em; padding: .9rem 1.4rem; border-radius: 6px; background: var(--cyan); color: var(--abyss); }
.caret { display: inline-block; width: .55em; height: 1em; background: var(--cyan); vertical-align: -.15em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0 } }

/* ── 02 IMAGINE ───────────────────────────────────────────────── */
.styles { display: flex; flex-wrap: wrap; gap: .4rem; }
.styles button { border: 1px solid var(--line); border-radius: 99px; }
.styles button.is-on { border-color: var(--gold); color: var(--gold); background: rgba(244,196,48,.08); }
.aspects { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.imagine__actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.imagine__actions .btn { flex: 1; padding-inline: 1rem; }
.final-prompt { font-family: var(--f-mono); font-size: .74rem; line-height: 1.6; color: #b6c4ca; margin: 0; min-height: 3em; }
.final-prompt .st { color: var(--gold); }
.final-prompt .ai { color: var(--cyan); }
.btn.is-busy { pointer-events: none; opacity: .75; }
.btn.is-busy span::after { content: ""; display: inline-block; width: .8em; height: .8em; margin-left: .7em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -.1em; }
@keyframes spin { to { transform: rotate(360deg) } }
.imagine__stage { display: grid; gap: 1rem; align-content: start; }
.frame { position: relative; aspect-ratio: 1; max-height: 74vh; width: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: rgba(2,6,13,.4); display: grid; place-items: center; }
.frame[data-aspect="16:9"] { aspect-ratio: 16/9; } .frame[data-aspect="3:4"] { aspect-ratio: 3/4; max-width: 60vh; justify-self: center; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.frame__empty { text-align: center; color: var(--mute); font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; }
.frame__empty span { display: block; font-family: var(--f-serif); font-size: 6rem; color: transparent; -webkit-text-stroke: 1px var(--mute); margin-bottom: .6rem; }
.frame__meta { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem 1rem; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; color: var(--bone); background: linear-gradient(transparent, rgba(0,0,0,.85)); opacity: 0; transition: opacity .5s; display: flex; justify-content: space-between; gap: 1rem; }
.frame.has-img .frame__meta { opacity: 1; }
.frame__scan { position: absolute; left: 0; right: 0; height: 2px; background: var(--cyan); box-shadow: 0 0 20px var(--cyan), 0 0 60px var(--cyan); top: 0; z-index: 2; }
.history { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .3rem; }
.history img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); opacity: .7; transition: opacity .3s, transform .3s; flex: none; }
.history img:hover { opacity: 1; transform: translateY(-3px); }

/* ── 03 LEARN ─────────────────────────────────────────────────── */
.learn__grid { display: grid; grid-template-columns: minmax(280px, 560px) 1fr; gap: clamp(1.5rem, 3vw, 3rem); max-width: 1500px; margin: 0 auto; }
@media (max-width: 1060px) { .learn__grid { grid-template-columns: 1fr; } }
.learn__data canvas { width: 100%; aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line); display: block; touch-action: none; }
.learn__net { padding: 1.2rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(2,6,13,.74); backdrop-filter: blur(12px); }
.learn__net canvas { width: 100%; display: block; }
#netCanvas { aspect-ratio: 720/520; }
#lossCanvas { aspect-ratio: 720/70; margin-top: .8rem; }
.learn__row { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 1rem; }
.stepper { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; color: var(--mute); }
.stepper button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); color: var(--bone); font-size: 1rem; line-height: 1; }
.stepper button:hover { border-color: var(--cyan); color: var(--cyan); }
.stepper b { color: var(--bone); min-width: 1.2em; text-align: center; font-weight: 500; }
.learn__stats { display: flex; gap: 1.3rem; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; color: var(--mute); margin-left: auto; }
.learn__stats b { color: var(--gold); font-weight: 500; }

/* ── 04 CREATE ────────────────────────────────────────────────── */
.create { text-align: center; }
.birth { display: grid; grid-template-columns: 1fr minmax(280px, 520px); gap: 3rem; max-width: 1300px; margin: 4rem auto 0; text-align: left; align-items: start; }
@media (max-width: 960px) { .birth { grid-template-columns: 1fr; } }
.birth__steps { display: grid; gap: 1rem; }
.bstep { padding: 1.1rem 1.3rem; border: 1px solid var(--line); border-left: 2px solid var(--mute); border-radius: 6px; background: rgba(2,6,13,.74); font-family: var(--f-mono); font-size: .8rem; color: var(--mute); transition: border-color .4s; }
.bstep small { display: block; letter-spacing: .2em; font-size: .6rem; margin-bottom: .4rem; color: var(--mute); }
.bstep.run { border-left-color: var(--gold); color: var(--bone); }
.bstep.ok { border-left-color: var(--cyan); color: var(--bone); }
.bstep .big { font-family: var(--f-serif); font-size: 3.4rem; line-height: 1; color: var(--gold); margin-right: .8rem; vertical-align: middle; }
.cert canvas { width: 100%; border-radius: 6px; box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 1px var(--line); display: block; margin-bottom: 1rem; }
.cert .btn { width: 100%; }

/* ── 05 OPERATOR ──────────────────────────────────────────────── */
.operator { text-align: center; min-height: 100svh; display: grid; align-content: center; justify-items: center; }
.operator__title { font-size: clamp(2rem, 5vw, 4.8rem); max-width: 18ch; margin-bottom: 3rem; }
.operator__list { margin-bottom: 4rem; text-align: left; font-size: clamp(.8rem, 1.2vw, .95rem); }

/* ── Héroe: dos líneas y el kanji en vertical ─────────────────── */
.hero__title .line--accent { font-size: clamp(2.2rem, 9.4vw, 9.6rem); color: var(--cyan); text-shadow: 0 0 60px rgba(61,245,224,.45); position: relative; overflow: visible; clip-path: inset(-5% -60% -5% -60%); }
.hero__title .line--accent .hero__jp { font-size: .3em; }
.footer__why { max-width: 640px; margin: 0 auto 5rem; text-align: left; padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: 8px; }
.footer__why p:last-child { margin: 0; color: #c7d3d8; }
.footer__why .label { margin-bottom: .8rem; }

/* ── FOOTER ───────────────────────────────────────────────────── */
.footer { padding: 8rem var(--gutter) 2rem; border-top: 1px solid var(--line); background: var(--abyss); text-align: center; overflow: hidden; }
.footer__big { font-family: var(--f-serif); font-weight: 800; font-size: clamp(4rem, 22vw, 20rem); line-height: 1; background: linear-gradient(90deg, var(--coral), var(--gold), var(--cyan), var(--indigo), var(--coral)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 12s linear infinite; }
@keyframes flow { to { background-position: 300% 0 } }
.footer__tr { color: var(--mute); margin: 1rem 0 5rem; font-family: var(--f-mono); letter-spacing: .3em; font-size: .75rem; }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-family: var(--f-mono); font-size: .65rem; letter-spacing: .15em; color: var(--mute); }
.footer__row a { color: var(--cyan); }

/* ── Llegada (final del warp) ─────────────────────────────────── */
.arrival { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; align-content: center; gap: .8rem; text-align: center; pointer-events: none; opacity: 0; }
.arrival p { font-family: var(--f-serif); font-size: clamp(1.4rem, 3vw, 2.4rem); color: var(--coral); margin: 0; letter-spacing: .4em; }
.arrival h3 { font-family: var(--f-display); font-weight: 900; font-size: clamp(3rem, 12vw, 12rem); margin: 0; line-height: 1; color: var(--abyss); }
.arrival span { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .2em; color: var(--ink); }
.arrival ul { list-style: none; padding: 0; margin: 1.6rem 0 1.4rem; display: grid; gap: .5rem; font-family: var(--f-mono); font-size: clamp(.8rem, 1.3vw, 1rem); color: #10202c; }
.arrival li b { color: #c2382c; font-weight: 500; }
/* el título del héroe se disuelve mientras el usuario escribe: sus palabras mandan */
.hero__title, .hero__sub, .hero .eyebrow { transition: opacity .8s var(--ease), filter .8s var(--ease); }
.hero.is-typing .hero__title, .hero.is-typing .hero__sub, .hero.is-typing .eyebrow { opacity: .07; filter: blur(6px); }
.operator__list { padding: 1.4rem 1.8rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(2,6,13,.78); backdrop-filter: blur(12px); }

/* ── Movimiento reducido ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .grain, .hero__scroll i, .footer__big { animation: none; }
  .manifesto__text .w { opacity: 1; }
}


/* sin WebGL: la imagen del héroe sustituye a las partículas */
.no-gl #gl { display: none; }
.no-gl .hero { background: radial-gradient(ellipse at 50% 60%, #0b3b44, var(--abyss) 70%); }
@media (max-width: 480px) { .hud__sound .lbl { display: none; } .hud__logo span { font-size: .6rem; } }

/* móvil: la barra de comando no puede ser más ancha que la pantalla */
.hero__inner { width: 100%; }
@media (max-width: 560px) {
  .command { padding-left: 1rem; gap: .6rem; }
  .command button { padding: .9rem 1rem; }
  .personas { grid-template-columns: repeat(2, 1fr); }
  .learn__stats { margin-left: 0; }
}
@media (max-width: 700px) { .hero__title .line--accent .hero__jp { font-size: .5em; margin-top: .25em; } }

/* ── 案内 ANNAI — el guía ─────────────────────────────────────── */
.toasts { bottom: 96px; }
.guide { position: fixed; right: var(--gutter); bottom: 22px; z-index: 97; }
.guide__launch { display: flex; align-items: center; gap: .7rem; padding: .45rem 1.1rem .45rem .45rem; border-radius: 99px; border: 1px solid rgba(61,245,224,.55); background: rgba(2,6,13,.85); backdrop-filter: blur(12px); box-shadow: 0 10px 40px rgba(61,245,224,.25); font-family: var(--f-mono); font-size: .62rem; letter-spacing: .16em; color: var(--bone); }
.guide__launch-k { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cyan); color: var(--abyss); font-family: var(--f-serif); font-weight: 800; font-size: .95rem; letter-spacing: 0; animation: guidePulse 2.8s ease-in-out infinite; }
@keyframes guidePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(61,245,224,.55); } 50% { box-shadow: 0 0 0 10px rgba(61,245,224,0); } }
.guide.is-open .guide__launch { opacity: 0; pointer-events: none; }
.guide__panel { position: absolute; right: 0; bottom: 0; width: min(400px, calc(100vw - 32px)); height: min(600px, calc(100svh - 120px)); display: flex; flex-direction: column; border: 1px solid rgba(61,245,224,.4); border-radius: 14px; background: rgba(2,6,13,.95); backdrop-filter: blur(16px); box-shadow: 0 30px 100px rgba(0,0,0,.6), 0 0 60px rgba(61,245,224,.12); overflow: hidden; transform-origin: bottom right; transform: scale(.6) translateY(30px); opacity: 0; pointer-events: none; transition: transform .5s var(--ease), opacity .35s; }
.guide.is-open .guide__panel { transform: none; opacity: 1; pointer-events: auto; }
.guide__head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; }
.guide__head small { color: var(--mute); font-size: .58rem; }
.guide__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.guide__switch { margin-left: auto; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .12em; color: var(--gold); padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 99px; }
.guide__close { margin-left: auto; color: var(--mute); font-size: .9rem; padding: .2rem .4rem; }
.guide__switch:not([hidden]) + .guide__close { margin-left: .2rem; }
.guide__body { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .8rem; scrollbar-width: thin; scrollbar-color: var(--cyan-dim) transparent; }
.guide__pick { margin: auto; text-align: center; display: grid; gap: 1.2rem; justify-items: center; }
.guide__k { font-family: var(--f-serif); font-weight: 800; font-size: 3.6rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--cyan); }
.guide__pick p { margin: 0; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; line-height: 1.9; color: var(--mute); }
.guide__langs { display: grid; gap: .6rem; width: 100%; min-width: 240px; }
.guide__langs button { display: flex; align-items: center; gap: 1rem; padding: .95rem 1.2rem; border: 1px solid var(--line); border-radius: 10px; font-family: var(--f-serif); font-size: 1.15rem; color: var(--bone); text-align: left; transition: border-color .3s, background .3s, transform .3s var(--ease); }
.guide__langs button b { display: grid; place-items: center; min-width: 46px; height: 32px; border-radius: 6px; background: rgba(61,245,224,.1); color: var(--cyan); font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; }
.guide__langs button:hover { border-color: var(--cyan); background: rgba(61,245,224,.06); transform: translateX(4px); }
.gmsg { max-width: 92%; padding: .75rem .95rem; border-radius: 12px; font-size: .9rem; line-height: 1.55; }
.gmsg--bot { align-self: flex-start; background: rgba(61,245,224,.07); border: 1px solid rgba(61,245,224,.2); border-bottom-left-radius: 4px; color: #dce6e9; }
.gmsg--bot b { color: var(--bone); }
.gmsg--me { align-self: flex-end; background: rgba(244,196,48,.1); border: 1px solid rgba(244,196,48,.25); border-bottom-right-radius: 4px; color: var(--bone); font-family: var(--f-mono); font-size: .82rem; }
.gmsg--err { color: var(--coral); border-color: rgba(255,90,78,.4); background: rgba(255,90,78,.07); }
.guide[data-lang="ja"] .gmsg { font-family: var(--f-serif); }
.glink { display: inline-block; margin: .15rem 0; padding: .1rem .55rem; border: 1px solid var(--cyan); border-radius: 99px; color: var(--cyan); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em; transition: background .25s, color .25s; }
.glink:hover { background: var(--cyan); color: var(--abyss); }
.guide__chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.guide__chips button { font-family: var(--f-mono); font-size: .7rem; padding: .45rem .75rem; border: 1px solid var(--line); border-radius: 99px; color: var(--mute); transition: color .25s, border-color .25s; }
.guide__chips button:hover { color: var(--cyan); border-color: var(--cyan); }
.guide__form { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--line); }
.guide__form input { flex: 1; min-width: 0; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 8px; outline: none; color: var(--bone); font-family: var(--f-mono); font-size: .85rem; padding: .75rem .85rem; transition: border-color .3s; }
.guide__form input:focus { border-color: var(--cyan); }
.guide__form button { padding: 0 1rem; border-radius: 8px; background: var(--cyan); color: var(--abyss); font-family: var(--f-mono); font-size: .66rem; letter-spacing: .15em; }
@media (max-width: 560px) {
  .guide__launch-l { display: none; }
  .guide__launch { padding: .35rem; }
  .guide { right: 12px; bottom: 12px; }
  .guide__panel { width: calc(100vw - 24px); height: min(78svh, 640px); }
}
/* un display del componente no puede ganar al atributo hidden */
[hidden] { display: none !important; }
.guide__head b { white-space: nowrap; }
@media (max-width: 420px) { .guide__head small { display: none; } }
.guide__panel { padding: 0; }  /* es un <section>: sin esto hereda el relleno de las secciones de la página */