/* Mov.ibes — La clase. Chrome = ADN Mov.ibes monocromo · Contenido = cine + mixed media (tinta roja de crayola). */
@font-face { font-family: "Anton"; src: url("assets/fonts/anton.ttf"); font-display: swap; }
@font-face { font-family: "RockSalt"; src: url("assets/fonts/rocksalt.ttf"); font-display: swap; }
@font-face { font-family: "JBMono"; src: url("assets/fonts/jbmono.ttf"); font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter.ttf"); font-display: swap; font-weight: 100 900; }
:root {
--bg: #0c0d0e; --bg2: #08090a; --panel: #141618; --elev: #1a1d20; --line: #2a2e33; --line2: #3a3f45;
--txt: #e9edf1; --txt2: #8a9199; --mute: #5c636b;
--red: #e3121b; --paper: #efe9dd; --ink: #151313; --ok: #39d353; --warn: #f0b429;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-io: cubic-bezier(0.77, 0, 0.175, 1); --expo: cubic-bezier(0.16, 1, 0.3, 1);
--gut: clamp(16px, 4vw, 64px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body { background: var(--bg); color: var(--txt); font-family: "Inter", system-ui, sans-serif; font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.locked { overflow: hidden; height: 100vh; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
b { color: #fff; font-weight: 800; }
.red { color: var(--red); }
::selection { background: #fff; color: #000; }
@media (hover: hover) and (pointer: fine) { body, a, button, [data-cursor] { cursor: none; } }
/* ── botones ADN ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 14px;
background: var(--elev); border: 1px solid var(--line); color: var(--txt); font-weight: 700; letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
transition: transform 160ms var(--ease-out), border-color 160ms ease, background-color 160ms ease; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: #f3f4f6; color: #0c0d0e; border-color: #f3f4f6; box-shadow: 0 0 34px rgba(243,244,246,.2); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
@media (hover: hover) and (pointer: fine) { .btn:hover { border-color: var(--line2); } .btn-primary:hover { background: #fff; } }
:focus-visible { outline: 2px solid rgba(233,237,241,.55); outline-offset: 3px; }
/* ── texturas ── */
.grain { position: fixed; inset: -50%; pointer-events: none; z-index: 90; opacity: .085;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation: grain .5s steps(4) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} }
#flash { position: fixed; inset: 0; background: #fff3e2; opacity: 0; pointer-events: none; z-index: 99; mix-blend-mode: screen; }
.scan { position: absolute; inset: 0; pointer-events: none; opacity: .16; background: repeating-linear-gradient(180deg, rgba(0,0,0,.6) 0 1px, transparent 1px 4px); z-index: 2; }
/* ── cursor ── */
#cursor { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
background: #fff; mix-blend-mode: difference; display: grid; place-items: center; transition: width 220ms var(--expo), height 220ms var(--expo), margin 220ms var(--expo), background-color 200ms ease; }
#cursor span { font: 700 11px "JBMono"; letter-spacing: .14em; text-transform: uppercase; color: #000; opacity: 0; transition: opacity 150ms ease; white-space: nowrap; }
#cursor.big { width: 92px; height: 92px; margin: -46px 0 0 -46px; mix-blend-mode: normal; background: #f3f4f6; }
#cursor.big span { opacity: 1; }
@media (hover: none), (pointer: coarse) { #cursor { display: none; } }
/* ── tipografía ── */
.kicker { font-family: "JBMono"; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--txt2); }
.sec-head { max-width: 1320px; margin: 0 auto 56px; padding: 0 var(--gut); }
.sec-title { font-family: "Anton"; text-transform: uppercase; line-height: .9; font-size: clamp(56px, 10vw, 168px); margin-top: 14px; }
.sec-sub { color: var(--txt2); max-width: 720px; margin-top: 20px; font-size: clamp(16px, 1.6vw, 21px); }
.hand { font-family: "RockSalt"; color: var(--red); line-height: 1.2; }
/* ─────────────── INTRO · código cinematográfico ─────────────── */
#gate { position: fixed; inset: 0; z-index: 98; background: var(--bg); color: var(--txt); overflow: hidden; }
#gate input, #gate select { cursor: text; } #gate select { cursor: pointer; }
.g-bar { position: absolute; left: 0; right: 0; height: 50.5vh; background: #000; z-index: 1; will-change: transform; }
.g-bar.top { top: 0; transform-origin: 50% 0; box-shadow: 0 1px 0 #2a2e33; }
.g-bar.bot { bottom: 0; transform-origin: 50% 100%; box-shadow: 0 -1px 0 #2a2e33; }
/* metadatos de cámara en las franjas */
.g-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; font: 500 11px "JBMono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.g-c { position: absolute; opacity: 0; white-space: nowrap; }
.g-c.g-tl { top: max(16px, env(safe-area-inset-top)); left: max(var(--gut), env(safe-area-inset-left)); }
.g-c.g-tr { top: max(16px, env(safe-area-inset-top)); right: max(var(--gut), env(safe-area-inset-right)); text-transform: none; letter-spacing: .06em; }
.g-c.g-bl { bottom: max(16px, env(safe-area-inset-bottom)); left: max(var(--gut), env(safe-area-inset-left)); }
.g-c.g-br { bottom: max(16px, env(safe-area-inset-bottom)); right: max(var(--gut), env(safe-area-inset-right)); }
.g-c b { color: var(--txt); font-weight: 600; font-variant-numeric: tabular-nums; }
.g-c .rec { color: var(--red); animation: caret 1.4s steps(1) infinite; }
/* el guion en código */
.g-term { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(900px, calc(100% - 2 * max(var(--gut), 16px)));
background: none; border: 0; }
.g-term-bar { display: none; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-bottom: 1px solid #1f2226; background: #111315;
font: 500 12px "JBMono", ui-monospace, monospace; color: var(--mute); }
.g-term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #2c3035; }
.g-term-bar span { flex: 1; text-align: center; margin-right: 57px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-prompt { margin: 0; padding: 0 0 6px; font: 500 clamp(12px, 1.25vw, 16px)/1.75 "JBMono", ui-monospace, monospace; color: var(--txt2); white-space: pre-wrap; word-break: break-all; min-height: 1.75em; }
.g-prompt .u { color: #fff; } .g-prompt .p { color: var(--mute); }
.g-prompt + .g-prompt { padding-top: 0; }
.g-code { position: relative; padding: 2px 0 14px; width: auto;
margin: 0; font: 500 clamp(12px, 1.25vw, 16px)/1.75 "JBMono", ui-monospace, monospace; color: var(--txt2); white-space: pre; overflow: hidden; }
.g-code .ln { display: block; }
.g-code .ln i { display: inline-block; width: 3.2em; color: #33383e; font-style: normal; user-select: none; }
.g-code .ln.ok i { color: var(--mute); }
.g-code .hd { color: #fff; }
.g-code .caret { color: var(--red); width: .5em; animation: none; }
.g-code .k { color: #fff; font-weight: 700; }
.g-code .f { color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.g-code .s { color: #c8ccd0; }
.g-code .n { color: #fff; font-weight: 700; }
.g-code .c { color: var(--mute); font-style: italic; }
/* centro: logo + título + registro */
.g-center { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 56px max(var(--gut), 16px); overflow-y: auto; overscroll-behavior: contain; pointer-events: none; }
.g-center > * { pointer-events: auto; }
.g-head { display: flex; flex-direction: column; align-items: center; text-align: center; will-change: transform; }
.g-logo { position: relative; width: clamp(200px, 30vw, 420px); aspect-ratio: 1200 / 553; }
#gate.has-auth .g-logo { width: clamp(150px, 18vw, 250px); transition: width 700ms var(--expo); }
.g-ascii, .gate-logo { position: absolute; inset: 0; width: 100%; height: 100%; }
.gate-logo { object-fit: contain; opacity: 0; }
.g-title { margin-top: clamp(18px, 3.2vh, 34px); font: 800 clamp(13px, 1.55vw, 20px)/1 "Inter", system-ui, sans-serif; letter-spacing: .42em; padding-left: .42em;
text-transform: uppercase; color: #fff; white-space: nowrap; }
.g-scan { display: block; width: min(420px, 70vw); height: 1px; margin-top: 14px; background: var(--red); transform: scaleX(0); box-shadow: 0 0 12px rgba(227,18,27,.7); }
.g-boot { min-height: 1.6em; margin-top: 12px; font: 500 12px "JBMono", ui-monospace, monospace; letter-spacing: .06em; color: var(--mute); }
#gate.has-auth .g-boot { display: none; }
.g-skip { position: absolute; z-index: 5; right: max(var(--gut), env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 28px);
font: 600 11px "JBMono", ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--txt2);
padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(20,22,24,.6);
transition: transform 140ms var(--ease-out), opacity 200ms ease, border-color 160ms ease; }
.g-skip:active { transform: scale(.96); }
.g-skip.gone { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .g-skip:hover { border-color: var(--line2); color: #fff; } }
/* ── ACCESO = hackear el programa: texto de terminal directo sobre el reel B/N, sin cajas ── */
.acc { position: absolute; inset: 0; --lvl: 0; --mono: "JBMono", ui-monospace, monospace; }
.acc[hidden] { display: none; }
.acc-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
opacity: calc(.28 + var(--lvl) * .55); filter: grayscale(1) contrast(1.12) brightness(.85) blur(calc(.6px + (1 - var(--lvl)) * 2px));
transition: opacity 900ms var(--ease-out), filter 900ms var(--ease-out); }
.acc-shade { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: calc(1 - var(--lvl) * .45); transition: opacity 900ms var(--ease-out);
background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.25) 100%); }
.acc-meter { display: none; }
.acc-term { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(900px, calc(100% - 2 * max(var(--gut), 16px)));
display: grid; gap: 22px; text-align: left; font-family: var(--mono); }
/* salida del programa */
.acc-log { display: grid; gap: 2px; font: 500 clamp(12px, 1.2vw, 15px)/1.75 var(--mono); color: var(--txt2); text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.t-l { margin: 0; white-space: pre-wrap; word-break: break-word; }
.t-l .u { color: #fff; } .t-l .p, .t-l .dim { color: var(--mute); } .t-l .gt, .t-q .gt { color: var(--red); }
.t-l .ok { color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.t-l .ko, .t-err { color: #ff6b6b; font-weight: 700; }
.t-l .v { color: #fff; } .t-l .bar { color: #fff; letter-spacing: .02em; } .t-l .bar.ko { color: #ff6b6b; }
.t-l .demo { color: var(--warn); font-size: .9em; }
.t-l .dots { color: var(--mute); animation: caret .8s steps(1) infinite; }
/* la pregunta y tu respuesta, en la misma terminal */
.t-q { margin: 0; font: 600 clamp(18px, 2.2vw, 28px)/1.35 var(--mono); color: #fff; letter-spacing: -.01em; text-shadow: 0 2px 14px rgba(0,0,0,.9); }
.t-a { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; font: 500 clamp(18px, 2.2vw, 28px)/1.4 var(--mono); cursor: text; }
.t-lb { color: var(--mute); font-size: .62em; letter-spacing: .18em; text-transform: uppercase; }
.t-gt { color: var(--red); }
.t-a input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; padding: 0; color: #fff; caret-color: var(--red); font: inherit; text-shadow: 0 2px 14px rgba(0,0,0,.9); }
.acc-stage[data-mode="lock"] .t-a input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.t-slots { display: inline-flex; gap: .55em; font: 700 clamp(28px, 3.6vw, 46px)/1 var(--mono); color: #3a3f45; cursor: text; }
.t-slots i { font-style: normal; } .t-slots i.on { color: #fff; } .t-slots i.cur { color: #fff; animation: caret 1s steps(1) infinite; }
.t-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 16px; }
.t-btn { font: 600 clamp(12px, 1.1vw, 14px) var(--mono); letter-spacing: .08em; color: var(--txt2); padding: 6px 0; transition: color 150ms ease, transform 140ms var(--ease-out); }
.t-btn.t-go { color: #fff; }
.t-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .t-btn:hover { color: #fff; text-shadow: 0 0 12px rgba(255,255,255,.6); } }
.t-err { font: 600 12px var(--mono); }
.acc-stage.bad { animation: accShake 340ms var(--ease-out); }
@keyframes accShake { 20% { transform: translateX(-9px); } 45% { transform: translateX(7px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }
/* concedido */
.t-big { margin: 0; font: 800 clamp(34px, 6vw, 86px)/1 var(--mono); letter-spacing: .02em; color: #fff; text-shadow: -2px 0 rgba(255,0,80,.5), 2px 0 rgba(0,220,255,.45), 0 4px 30px rgba(0,0,0,.8); }
.t-member { margin-top: 16px; font: 500 clamp(16px, 1.8vw, 22px) var(--mono); color: var(--txt2); letter-spacing: .06em; }
.t-member b { color: #fff; font-weight: 800; }
.t-btn.t-main { font-size: clamp(14px, 1.4vw, 18px); color: #fff; letter-spacing: .12em; text-shadow: 0 0 14px rgba(255,255,255,.5); }
.acc.granted .acc-log { opacity: .45; transition: opacity 600ms ease; }
.acc-ts { position: absolute; z-index: 4; left: 50%; top: calc(max(16px, env(safe-area-inset-top)) + 40px); transform: translateX(-50%); width: min(300px, 80vw); }
.acc-ts:empty { display: none; }
.acc-demo { display: none; }
@media (max-width: 640px) {
.g-c.g-tr, .g-c.g-br, .g-code .ln i { display: none; }
.g-skip { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 26px); }
.g-code, .g-prompt { font-size: 11px; white-space: pre-wrap; word-break: break-word; } .g-code { padding: 2px 0 12px; } .g-prompt { padding: 0 0 4px; }
.g-term-bar span { margin-right: 0; font-size: 11px; }
.g-title { letter-spacing: .28em; padding-left: .28em; }
.acc-shade { background: rgba(0,0,0,.66); } .t-a { flex-wrap: wrap; } .t-lb { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .g-c .rec, .acc-stage.bad { animation: none; } .acc-vid { transition: none; } #gate.has-auth .g-logo { transition: none; } }
@keyframes i-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* ─────────────── HUD ─────────────── */
#hud { position: fixed; z-index: 80; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(1320px, calc(100% - 2 * var(--gut)));
display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 16px; border-radius: 14px; background: rgba(20,22,24,.72); border: 1px solid var(--line);
backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); opacity: 0; transition: opacity 400ms var(--ease-out); }
#hud.on { opacity: 1; }
.hud-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; white-space: nowrap; }
.hud-brand img { height: 26px; width: auto; }
.hud-brand span { color: var(--txt2); font-weight: 600; font-size: 13px; padding-left: 12px; border-left: 1px solid var(--line); }
.hud-nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.hud-nav::-webkit-scrollbar { display: none; }
.hud-nav a { font-size: 13px; color: var(--txt2); text-decoration: none; white-space: nowrap; padding: 8px 12px; border-radius: 10px; border: 1px solid transparent;
transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
.hud-nav a.active { color: #fff; background: var(--elev); border-color: var(--line); }
.hud-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px; background: var(--elev); border: 1px solid var(--line);
font-size: 13px; font-weight: 700; white-space: nowrap; transition: transform 140ms var(--ease-out); }
.hud-btn:active { transform: scale(0.96); }
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.eq i { width: 3px; height: 4px; background: var(--txt2); border-radius: 1px; }
.hud-btn[aria-pressed="true"] .eq i { background: #fff; animation: eq .7s var(--ease-io) infinite alternate; }
.hud-btn[aria-pressed="true"] .eq i:nth-child(2) { animation-delay: .15s; } .hud-btn[aria-pressed="true"] .eq i:nth-child(3) { animation-delay: .3s; }
@keyframes eq { to { height: 12px; } }
.hud-progress { position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; overflow: hidden; }
.hud-progress i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 820px) { .hud-nav { display: none; } .hud-btn .lbl { display: none; } .hud-btn { margin-left: auto; } }
/* ─────────────── REEL ─────────────── */
.reel { position: relative; height: 100svh; min-height: 600px; overflow: hidden; display: flex; align-items: flex-end; background: #000; }
.reel-stage { position: absolute; inset: 0; }
.reel-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: contrast(1.1) saturate(1.05); }
.reel-stage video.on { opacity: 1; }
.reel-tint { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.94) 100%); }
.reel-copy { position: relative; z-index: 3; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gut) clamp(80px, 12vh, 140px); }
.reel-title { font-family: "Anton"; text-transform: uppercase; line-height: .84; font-size: clamp(80px, 17vw, 300px); margin: 14px 0 24px; }
.reel-title .w { display: inline-block; margin-right: .18em; transform-origin: 0 100%; }
.reel-sub { max-width: 680px; color: #d7dbe0; font-size: clamp(17px, 1.8vw, 22px); }
.reel-count { display: flex; gap: clamp(18px, 3vw, 44px); margin-top: 30px; flex-wrap: wrap; }
.reel-count div b { display: block; font-family: "Anton"; font-size: clamp(34px, 4vw, 60px); line-height: 1; font-variant-numeric: tabular-nums; }
.reel-count div span { font-family: "JBMono"; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--txt2); }
.scroll-cue { position: absolute; z-index: 3; right: var(--gut); bottom: 36px; display: flex; flex-direction: column; align-items: center; gap: 10px;
font-family: "JBMono"; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--txt2); }
.scroll-cue i { width: 1px; height: 54px; background: linear-gradient(var(--txt2), transparent); animation: cue 1.6s var(--ease-io) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
/* ─────────────── MÉTODO ─────────────── */
.metodo { padding: 150px 0 110px; }
.method { max-width: 1320px; margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: 340px 1fr; gap: 28px; }
.m-tabs { display: grid; gap: 6px; align-content: start; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px; }
.m-tab { display: flex; gap: 14px; align-items: center; text-align: left; padding: 14px; border-radius: 10px; color: var(--txt2); font-weight: 700;
transition: background-color 180ms ease, color 180ms ease; }
.m-tab .n { font-family: "JBMono"; font-size: 12px; width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); }
.m-tab.on { background: var(--elev); color: #fff; }
.m-tab.on .n { background: #f3f4f6; color: #000; border-color: #f3f4f6; }
.m-view { position: relative; min-height: 520px; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.m-view .m-media { position: absolute; inset: 0; }
.m-view .m-media img, .m-view .m-media video { width: 100%; height: 100%; object-fit: cover; }
.m-view .m-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; z-index: 2; background: linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,0)); }
.m-view h3 { font-family: "Anton"; text-transform: uppercase; font-size: clamp(38px, 4.4vw, 70px); line-height: .9; }
.m-view p { color: #d7dbe0; max-width: 640px; margin-top: 10px; }
@media (max-width: 900px) { .method { grid-template-columns: 1fr; } .m-tabs { grid-template-columns: repeat(2, 1fr); } .m-view { min-height: 420px; } }
/* ─────────────── CASO ─────────────── */
.case { position: relative; }
.case-cover { position: relative; height: 100svh; min-height: 640px; overflow: hidden; display: flex; align-items: flex-end; background: #000; }
.case-cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.08); }
.case-cover .lbox { position: absolute; left: 0; right: 0; height: 12vh; background: #000; z-index: 3; }
.case-cover .lbox.t { top: 0; } .case-cover .lbox.b { bottom: 0; }
.case-cover .shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.95) 100%); }
.case-cover-copy { position: relative; z-index: 4; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gut) clamp(70px, 11vh, 130px); }
.case-num { font-family: "JBMono"; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: #fff; }
.case-num em { font-style: normal; color: var(--red); }
.case-title { font-family: "Anton"; text-transform: uppercase; line-height: .84; font-size: clamp(76px, 15vw, 250px); margin: 10px 0 18px; }
.case-log { max-width: 720px; color: #dfe3e7; font-size: clamp(17px, 1.9vw, 23px); }
.case-actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(20,22,24,.8); border: 1px solid var(--line);
font-size: 13px; color: var(--txt2); backdrop-filter: blur(8px); }
.chip b { font-variant-numeric: tabular-nums; }
.case-body { max-width: 1320px; margin: 0 auto; padding: 110px var(--gut) 40px; }
.block { margin-bottom: 110px; }
.block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.block-head h3 { font-family: "Anton"; text-transform: uppercase; font-size: clamp(40px, 5.4vw, 88px); line-height: .9; }
.block-head p { color: var(--txt2); max-width: 560px; }
.story { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.story .txt { font-size: clamp(18px, 1.9vw, 24px); color: #dfe3e7; }
.story .txt p + p { margin-top: 16px; }
.story .rules-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px; }
.story .rules-box h4 { font-family: "JBMono"; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--txt2); margin-bottom: 12px; }
.story .rules-box li { margin: 0 0 10px 18px; color: #cfd4d9; font-size: 15px; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } }
/* tira arrastrable */
.strip { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 18px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line) transparent; cursor: grab; }
.strip.drag { cursor: grabbing; scroll-snap-type: none; }
.strip::-webkit-scrollbar { height: 6px; } .strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
/* tarjeta de generación */
.gen { position: relative; flex: none; width: clamp(200px, 22vw, 300px); scroll-snap-align: start; border-radius: 12px; overflow: hidden; background: var(--panel);
border: 1px solid var(--line); text-align: left; transition: transform 200ms var(--ease-out), border-color 200ms ease; }
.gen:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .gen:hover { border-color: var(--line2); transform: translateY(-4px); } }
.gen .ph { position: relative; aspect-ratio: 4/3; background: #000; overflow: hidden; }
.gen .ph img, .gen .ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gen .ph video { opacity: 0; transition: opacity 200ms ease; }
.gen.playing .ph video { opacity: 1; }
.gen .badge { position: absolute; z-index: 2; left: 8px; top: 8px; font: 700 10px "JBMono"; letter-spacing: .14em; text-transform: uppercase; padding: 5px 7px 4px; border-radius: 6px;
background: rgba(12,13,14,.82); color: #fff; }
.gen .badge.aprobada { background: #f3f4f6; color: #000; }
.gen .badge.descartada { background: rgba(12,13,14,.82); color: var(--txt2); text-decoration: line-through; }
.gen .badge.referencia, .gen .badge.original { background: var(--red); }
.gen .kind { position: absolute; z-index: 2; right: 8px; top: 8px; font: 700 10px "JBMono"; letter-spacing: .1em; padding: 5px 7px 4px; border-radius: 6px; background: rgba(12,13,14,.82); }
.gen .meta { padding: 12px 12px 14px; display: grid; gap: 4px; }
.gen .model { font: 600 11px "JBMono"; color: #cfd4d9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen .cost { font: 700 13px "Inter"; color: #fff; font-variant-numeric: tabular-nums; }
.gen .cost small { font-weight: 500; color: var(--mute); margin-left: 6px; font-size: 11px; }
.gen .lbl { font-size: 13px; color: var(--txt2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gen.none .ph { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #111 0 10px, #151719 10px 20px); }
.gen.none .ph p { font: 600 12px "JBMono"; color: var(--txt2); padding: 16px; text-align: center; }
.arrow-sep { flex: none; align-self: center; font-family: "Anton"; color: var(--red); font-size: 34px; }
/* escenas */
.scene { border-top: 1px solid var(--line); padding: 38px 0 20px; }
.scene-top { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; }
.scene-n { font: 700 12px "JBMono"; letter-spacing: .22em; color: var(--txt2); text-transform: uppercase; }
.scene h4 { font-family: "Anton"; text-transform: uppercase; font-size: clamp(30px, 3.6vw, 56px); line-height: .95; margin: 6px 0 8px; }
.scene .desc { color: #cfd4d9; max-width: 780px; }
.scene .sc-stats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.scene .hero { margin: 22px 0 16px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.scene .hero .big { position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 16/9; border: 1px solid var(--line); }
.scene .hero .big img, .scene .hero .big video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.scene .hero .ptxt { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.scene .hero .ptxt .k { font: 700 11px "JBMono"; letter-spacing: .18em; color: var(--txt2); text-transform: uppercase; }
.scene .hero .ptxt pre { font: 400 13px/1.55 "JBMono"; white-space: pre-wrap; color: #cfd4d9; max-height: 280px; overflow: auto; }
@media (max-width: 900px) { .scene .hero { grid-template-columns: 1fr; } .scene-top { grid-template-columns: 1fr; } .scene .sc-stats { justify-content: flex-start; } }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.filters button { font-size: 13px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); color: var(--txt2); background: transparent; transition: background-color 160ms ease, color 160ms ease; }
.filters button.on { background: var(--elev); color: #fff; border-color: var(--line2); }
/* costos */
.costs { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px; }
.costs table { width: 100%; border-collapse: collapse; font-size: 15px; }
.costs th { text-align: left; font: 700 11px "JBMono"; letter-spacing: .16em; text-transform: uppercase; color: var(--txt2); padding: 0 10px 12px; border-bottom: 1px solid var(--line); }
.costs td { padding: 12px 10px; border-bottom: 1px solid #1f2327; vertical-align: top; }
.costs td.mono { font: 500 13px "JBMono"; color: #dfe3e7; word-break: break-all; }
.costs td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.costs tfoot td { font-weight: 800; border: 0; padding-top: 16px; font-size: 18px; }
.costs .bar { height: 6px; border-radius: 3px; background: #f3f4f6; margin-top: 6px; transform-origin: 0 50%; }
.costs .note { color: var(--txt2); font-size: 13px; margin-top: 16px; }
.costs-wrap { overflow-x: auto; }
/* edición */
.edit { display: grid; gap: 18px; }
.edit-player { position: relative; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.edit-player video { width: 100%; max-height: 72vh; object-fit: contain; background: #000; }
.tl { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 16px 12px; overflow-x: auto; }
.tl-inner { position: relative; min-width: 900px; }
.tl-ruler { position: relative; height: 20px; font: 500 11px "JBMono"; color: var(--mute); }
.tl-ruler span { position: absolute; top: 0; transform: translateX(-50%); }
.tl-track { position: relative; height: 46px; margin-bottom: 6px; border-radius: 6px; background: #0f1113; }
.tl-track .tn { position: absolute; left: -2px; top: -16px; font: 600 10px "JBMono"; letter-spacing: .12em; color: var(--mute); text-transform: uppercase; }
.tl-clip { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; overflow: hidden; background: var(--elev); border: 1px solid var(--line2); background-size: cover; background-position: center;
font: 600 10px "JBMono"; color: #fff; padding: 3px 5px; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 1px 3px #000; }
.tl-clip.ia { border-color: var(--red); }
.tl-clip.audio { background: #1b2a22; border-color: #2e4a3a; }
.tl-clip.on { outline: 2px solid #fff; z-index: 2; }
.tl-head { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); left: 0; pointer-events: none; z-index: 3; }
.tl-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--txt2); margin-top: 8px; }
.tl-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; border: 1px solid var(--line2); background: var(--elev); }
.tl-legend i.ia { border-color: var(--red); } .tl-legend i.audio { background: #1b2a22; border-color: #2e4a3a; }
.edit-now { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: center; }
.edit-now img { width: 160px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; }
.edit-now .k { font: 700 11px "JBMono"; letter-spacing: .18em; color: var(--txt2); text-transform: uppercase; }
.edit-explain { font-size: clamp(16px, 1.6vw, 19px); color: #dfe3e7; }
.edit-explain p + p { margin-top: 12px; }
/* reglas de oro */
.cierre { padding: 140px 0 120px; }
.rules { max-width: 1320px; margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.rule { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px; }
.rule .n { font-family: "Anton"; font-size: 44px; line-height: 1; color: var(--red); }
.rule h4 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 10px 0 6px; }
.rule p { color: var(--txt2); font-size: 15px; }
.outro { max-width: 1320px; margin: 120px auto 0; padding: 0 var(--gut); }
.outro img { height: 72px; width: auto; }
.outro-title { font-family: "Anton"; text-transform: uppercase; font-size: clamp(56px, 9vw, 150px); line-height: .88; margin: 26px 0 16px; }
.outro-sub { color: var(--txt2); max-width: 620px; margin-bottom: 26px; }
/* ─────────────── VISOR ─────────────── */
#lb, #player { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: clamp(8px, 2vw, 28px); }
#lb[hidden], #player[hidden] { display: none; }
.lb-back { position: absolute; inset: 0; background: rgba(4,5,6,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lb-win { position: relative; width: min(1400px, 100%); height: min(88vh, 900px); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.lb-media { position: relative; background: #000; display: grid; place-items: center; min-height: 0; }
.lb-media img, .lb-media video { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-media .nofile { font: 600 14px "JBMono"; color: var(--txt2); padding: 40px; text-align: center; }
.lb-info { overflow-y: auto; padding: 26px 24px 28px; display: grid; gap: 16px; align-content: start; }
.lb-info .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lb-info h3 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.lb-info .file { font: 500 12px "JBMono"; color: var(--mute); word-break: break-all; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; font-size: 14px; }
.kv dt { color: var(--txt2); font: 600 11px "JBMono"; letter-spacing: .12em; text-transform: uppercase; padding-top: 3px; }
.kv dd { color: #e9edf1; word-break: break-word; }
.kv dd.mono { font: 500 13px "JBMono"; }
.kv .price { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.srcbadge { font: 700 10px "JBMono"; letter-spacing: .12em; text-transform: uppercase; padding: 4px 7px 3px; border-radius: 6px; border: 1px solid var(--line2); color: var(--txt2); margin-left: 8px; vertical-align: 3px; }
.pbox { background: #0e1012; border: 1px solid var(--line); border-radius: 12px; padding: 16px; position: relative; }
.pbox .k { font: 700 11px "JBMono"; letter-spacing: .16em; text-transform: uppercase; color: var(--txt2); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pbox pre { font: 400 13px/1.6 "JBMono"; white-space: pre-wrap; color: #dfe3e7; }
.pbox.neg pre { color: #a9b0b7; }
.copy { font: 700 11px "JBMono"; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line2); color: #fff; transition: transform 140ms var(--ease-out); }
.copy:active { transform: scale(0.95); }
.refs { display: flex; gap: 8px; flex-wrap: wrap; }
.refs button { width: 76px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--line2); }
.refs button img { width: 100%; height: 100%; object-fit: cover; }
.lb-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 10px; background: rgba(12,13,14,.8); border: 1px solid var(--line); font-size: 16px; }
.lb-nav { position: absolute; top: 50%; z-index: 3; width: 44px; height: 64px; margin-top: -32px; border-radius: 10px; background: rgba(12,13,14,.7); border: 1px solid var(--line); font-size: 28px; }
.lb-nav.prev { left: 12px; } .lb-nav.next { left: calc(60% - 56px); }
.pl-win { position: relative; width: min(1300px, 100%); }
.pl-win video { width: 100%; max-height: 88vh; background: #000; border-radius: 12px; }
@media (max-width: 900px) {
.lb-win { grid-template-columns: 1fr; grid-template-rows: 44vh 1fr; height: 92vh; }
.lb-nav.next { left: auto; right: 12px; top: 22vh; } .lb-nav.prev { top: 22vh; }
}
@media (prefers-reduced-motion: reduce) { .grain, .scroll-cue i, .hud-btn[aria-pressed="true"] .eq i { animation: none; } }
/* ─── ajustes teléfono ─── */
.reel-title { line-height: .9; }
@media (max-width: 700px) {
body { font-size: 16px; }
.reel-count { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.reel-count div:last-child { grid-column: 1 / -1; }
.scroll-cue { display: none; }
.case-body { padding-top: 70px; }
.block { margin-bottom: 80px; }
.block-head h3 { font-size: 44px; }
.scene { padding-top: 30px; }
.scene h4 { font-size: 34px; }
.scene .hero .ptxt pre { max-height: 180px; font-size: 12px; }
.gen { width: 72vw; }
.chip { font-size: 12px; padding: 7px 10px; }
.case-title { font-size: 21vw; }
.case-actions .btn { width: 100%; }
.costs { padding: 20px 16px; }
.costs table { font-size: 13px; }
.costs td.mono { font-size: 11px; }
.lb-info { padding: 20px 16px 28px; }
.kv { grid-template-columns: 88px 1fr; }
.metodo, .cierre { padding-top: 110px; }
}
/* gasto total (al final) */
.spend { max-width: 1320px; margin: 120px auto 0; padding: 0 var(--gut); }
.spend-title { font-family: "Anton"; text-transform: uppercase; line-height: .92; font-size: clamp(44px, 7vw, 120px); margin: 14px 0 10px; }
.spend-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 34px 0 16px; }
.spend-case { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px; display: grid; gap: 4px; }
.spend-case span { color: var(--txt2); font-size: 14px; }
.spend-case b { font-family: "Anton"; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.spend-case small { color: var(--mute); font-size: 13px; }
.costs .bar { transform: scaleX(var(--w)); }
/* ─── estados con color (el color es información, no decoración) ─── */
:root { --st-ok: #39d353; --st-no: #ff4d4d; --st-fail: #f0b429; --st-ver: #8a9199; --st-ref: #e9edf1; }
.gen .badge { display: inline-flex; align-items: center; gap: 6px; }
.gen .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.gen .badge.aprobada { background: rgba(12,13,14,.86); color: var(--st-ok); text-decoration: none; }
.gen .badge.descartada { background: rgba(12,13,14,.86); color: var(--st-no); text-decoration: none; }
.gen .badge.fallida { background: rgba(12,13,14,.86); color: var(--st-fail); }
.gen .badge.versión, .gen .badge.alternativa { background: rgba(12,13,14,.86); color: #c3c9cf; }
.gen .badge.referencia, .gen .badge.original, .gen .badge.final { background: rgba(12,13,14,.86); color: var(--st-ref); }
.gen.st-aprobada { border-color: rgba(57,211,83,.55); box-shadow: 0 0 0 1px rgba(57,211,83,.25), 0 0 24px rgba(57,211,83,.10); }
.gen.st-descartada { border-color: rgba(255,77,77,.45); }
.gen.st-descartada .ph img { filter: grayscale(.85) brightness(.7); }
.gen.st-descartada .ph::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(255,77,77,.55), transparent calc(50% + 1px)); pointer-events: none; }
.gen.st-fallida { border-color: rgba(240,180,41,.45); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--txt2); margin: 4px 0 10px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lb-info .chip.st { font-weight: 800; }
.lb-info .chip.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.lb-info .chip.st-aprobada { color: var(--st-ok); border-color: rgba(57,211,83,.45); }
.lb-info .chip.st-descartada { color: var(--st-no); border-color: rgba(255,77,77,.45); }
.lb-info .chip.st-fallida { color: var(--st-fail); border-color: rgba(240,180,41,.45); }
.scene .hero .ptxt .k.ok { color: var(--st-ok); }
/* por qué se botó / por qué quedó */
.gen .why { font-size: 12.5px; line-height: 1.4; color: #c3c9cf; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.gen .why.no { color: #ffb3ad; } .gen .why.ok { color: #a6f0b3; }
.whybox { border-radius: 12px; padding: 16px; border: 1px solid var(--line); background: #101214; }
.whybox .k { font: 700 11px "JBMono"; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px; color: var(--txt2); }
.whybox.no { border-color: rgba(255,77,77,.45); background: rgba(255,77,77,.06); } .whybox.no .k { color: var(--st-no); }
.whybox.ok { border-color: rgba(57,211,83,.45); background: rgba(57,211,83,.06); } .whybox.ok .k { color: var(--st-ok); }
.whybox p { font-size: 15px; color: #e9edf1; }
.whybox blockquote { margin: 10px 0 0; padding-left: 12px; border-left: 2px solid var(--line2); font-family: "RockSalt"; font-size: 15px; color: #fff; line-height: 1.4; }
.whybox blockquote span { display: block; font: 500 11px "JBMono"; color: var(--mute); margin-top: 4px; letter-spacing: .1em; }
.whybox .fix { margin-top: 10px; font-size: 14px; color: #c3c9cf; }
.gen .rol { font: 700 10px "JBMono"; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.gen .lbl { -webkit-line-clamp: 3; color: #cfd4d9; }
/* método: explicación + ejemplos reales */
.m-right { display: grid; gap: 18px; min-width: 0; }
.m-ex { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px; display: grid; gap: 12px; min-width: 0; }
.m-ex ul { margin: 10px 0 0 18px; display: grid; gap: 8px; }
.m-ex li { color: #dfe3e7; font-size: 16px; }
.m-ex .strip .gen { width: clamp(180px, 18vw, 240px); }
/* reproducción en la portada */
.case-cover.playing video { object-fit: contain; background: #000; }
.case-cover.playing .shade, .case-cover.playing .scan { opacity: 0; }
.case-cover .shade, .case-cover .scan { transition: opacity 400ms ease; }
.ip-bar { position: absolute; z-index: 6; left: var(--gut); right: var(--gut); bottom: max(22px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px;
padding: 8px; border-radius: 14px; background: rgba(20,22,24,.72); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.case-cover.playing .ip-bar { opacity: 1; pointer-events: auto; transform: none; }
.ip-bar button { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--elev); border: 1px solid var(--line); font-size: 14px; transition: transform 140ms var(--ease-out); }
.ip-bar button:active { transform: scale(0.94); }
.ip-track { flex: 1; height: 40px; display: flex; align-items: center; cursor: pointer; }
.ip-track::before { content: ""; position: absolute; }
.ip-track i { display: block; width: 100%; height: 4px; border-radius: 2px; background: #f3f4f6; transform-origin: 0 50%; transform: scaleX(0); box-shadow: inset 0 0 0 100vw rgba(255,255,255,0); }
.ip-track { background: linear-gradient(transparent 18px, rgba(255,255,255,.18) 18px, rgba(255,255,255,.18) 22px, transparent 22px); }
/* ─── Elige un caso (entrada a los 3 casos) ─── */
.elige { padding: clamp(90px, 14vh, 160px) 0 clamp(60px, 10vh, 120px); }
.pick { max-width: 1480px; margin: 0 auto; padding: 0 var(--gut); display: flex; gap: 14px; height: min(78vh, 760px); }
.pick-card { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: #000; cursor: pointer;
transition: flex-grow 700ms cubic-bezier(.16,1,.3,1), border-color 300ms ease; display: flex; align-items: flex-end; }
.pick-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.08) saturate(.95); transition: transform 1.2s cubic-bezier(.16,1,.3,1), filter 500ms ease; }
.pick-card .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.94) 100%); }
.pick-copy { position: relative; z-index: 2; padding: clamp(18px, 2.4vw, 30px); width: 100%; }
.pick-title { font-family: "Anton"; text-transform: uppercase; line-height: .92; font-size: clamp(44px, 5.4vw, 96px); margin: 10px 0 6px; }
.pick-kick { font-family: "JBMono"; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt2); }
.pick-log, .pick-stats, .pick-actions { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 600ms cubic-bezier(.16,1,.3,1), opacity 400ms ease, margin 400ms ease; }
.pick-log { font-size: 16px; line-height: 1.45; color: #e7e7e7; max-width: 46ch; }
.pick-stats { font-family: "JBMono"; font-size: 12px; color: var(--txt2); }
.pick-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pick-card:hover, .pick-card:focus-within { flex-grow: 2.3; border-color: var(--line2); }
.pick-card:hover video { transform: scale(1.04); }
.pick-card:hover .pick-log, .pick-card:focus-within .pick-log { max-height: 140px; opacity: 1; margin-top: 12px; }
.pick-card:hover .pick-stats, .pick-card:focus-within .pick-stats { max-height: 40px; opacity: 1; margin-top: 10px; }
.pick-card:hover .pick-actions, .pick-card:focus-within .pick-actions { max-height: 80px; opacity: 1; margin-top: 16px; }
.pick:hover .pick-card:not(:hover) video { filter: grayscale(.6) brightness(.55); }
@media (hover: none), (pointer: coarse), (max-width: 900px) {
.pick { flex-direction: column; height: auto; gap: 12px; }
.pick-card { min-height: 64svh; flex: none; }
.pick-log, .pick-stats, .pick-actions { max-height: none; opacity: 1; margin-top: 12px; }
.pick-actions .btn { flex: 1 1 auto; }
}
/* ─── Coherencia de personaje y producto ─── */
.coh-tabs { display: flex; gap: 8px; margin: 0 0 28px; flex-wrap: wrap; }
.coh-tabs button { min-height: 46px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--line); background: var(--elev, #141618); color: var(--txt2); font: 700 15px Inter, sans-serif; letter-spacing: .02em; transition: all 200ms ease; }
.coh-tabs button.on { background: #f3f4f6; color: #0c0d0e; border-color: #f3f4f6; box-shadow: 0 0 30px rgba(243,244,246,.18); }
.coh-step { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 28px; align-items: start; padding: 28px 0; border-top: 1px solid var(--line); }
.coh-step .strip { min-width: 0; }
.coh-n { font-family: "Anton"; font-size: 44px; line-height: 1; color: var(--red); display: block; }
.coh-txt h4 { font-family: "Anton"; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 36px); line-height: 1; margin: 8px 0 10px; }
.coh-txt p { color: #d6d9dd; line-height: 1.5; font-size: 16px; }
.coh-txt blockquote { margin-top: 14px; font-size: 15px; font-style: italic; color: #fff; border-left: 3px solid var(--red); padding-left: 12px; }
.coh-txt blockquote span { display: block; font-style: normal; font-family: "JBMono"; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--txt2); margin-top: 6px; }
.coh-rule { margin-top: 10px; padding: 24px 28px; border-radius: 14px; border: 1px solid var(--line2, #2a2e33); background: #141618; box-shadow: 0 0 40px rgba(243,244,246,.05); }
.coh-rule p { font-size: clamp(18px, 1.8vw, 24px); font-weight: 700; line-height: 1.35; margin-top: 8px; color: #fff; }
@media (max-width: 900px) { .coh-step { grid-template-columns: 1fr; gap: 16px; } }
/* en coherencia hay que VER el error: color real, solo marco rojo */
.coh .gen.st-descartada .ph img { filter: none; }
.coh .gen.st-descartada .ph::after { opacity: .35; }
/* ─── Código cinematográfico ─── */
.caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.gate-sub#gate-code { font-family: "JBMono"; font-size: clamp(11px, 1.1vw, 13px); letter-spacing: .42em; color: #c8ccd0; margin-top: 14px; min-height: 1.2em; }
.gate-boot { margin-top: 26px; font-family: "JBMono"; font-size: 11px; letter-spacing: .06em; color: #5c636b; min-height: 1.3em; }
.tc-hud { position: absolute; z-index: 3; top: calc(84px + env(safe-area-inset-top)); left: var(--gut); right: var(--gut); display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
font-family: "JBMono"; font-size: 12px; letter-spacing: .12em; color: rgba(233,237,241,.72); text-transform: uppercase; pointer-events: none; }
.tc-hud b { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.tc-hud .rec { color: var(--red); animation: caret 1.4s steps(1) infinite; }
.tc-hud .tc-file { margin-left: auto; text-transform: none; letter-spacing: .04em; color: rgba(233,237,241,.45); }
.code-line { font-family: "JBMono"; font-size: clamp(12px, 1.2vw, 14px); color: #c8ccd0; letter-spacing: .02em; margin: 6px 0 14px; min-height: 1.3em; overflow-wrap: anywhere; }
.kicker .caret, .code-line .caret { width: .5em; }
[data-decode] { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .tc-hud .tc-file, .tc-hud span:nth-of-type(2) { display: none; } .tc-hud { top: calc(76px + env(safe-area-inset-top)); } }
@media (prefers-reduced-motion: reduce) { .caret, .tc-hud .rec { animation: none; } }
#build-chip { position: fixed; z-index: 101; left: 8px; bottom: 6px; font: 600 9px "JBMono", ui-monospace, monospace; letter-spacing: .12em; color: #3a3f45; pointer-events: none; }
/* ─────────────── ENCENDIDO DE CÁMARA ─────────────── */
#cam { position: fixed; inset: 0; z-index: 99; background: #000; overflow: hidden; cursor: pointer; }
.cam-view { position: absolute; inset: 0; clip-path: circle(0% at 50% 50%); }
.cam-view video { width: 100%; height: 100%; object-fit: cover; }
.cam-osd { position: absolute; inset: clamp(18px, 4vw, 48px); font: 400 clamp(20px, 2.4vw, 32px)/1 "VT323", "JBMono", monospace; letter-spacing: .05em; color: #fff;
text-shadow: -1.5px 0 rgba(255,0,80,.5), 1.5px 0 rgba(0,220,255,.45), 0 0 8px rgba(255,255,255,.35); }
.cam-osd > span { position: absolute; }
.cam-state { top: 6%; left: 6%; display: flex; align-items: center; gap: .35em; }
.cam-state i { width: .5em; height: .5em; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px #fff; }
.cam-state b { font-weight: 400; animation: vhsBlink .9s steps(1) infinite; }
.cam-state.rec i { background: #ff2d3a; box-shadow: 0 0 10px rgba(255,45,58,.9); animation: vhsBlink 1.2s steps(1) infinite; }
.cam-state.rec b { animation: none; }
.cam-bat { top: 6%; right: 6%; display: flex; align-items: center; gap: .4em; }
.cam-bat em { display: inline-flex; gap: 2px; padding: 2px; border: 2px solid #fff; border-radius: 3px; }
.cam-bat u { width: 6px; height: 12px; background: #fff; } .cam-bat u.lo { opacity: .2; }
.cam-date { bottom: 6%; left: 6%; }
.cam-cnt { bottom: 6%; right: 6%; font-variant-numeric: tabular-nums; }
.cam-br { width: 34px; height: 34px; border: 0 solid rgba(255,255,255,.85); }
.cam-br.tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 6px; }
.cam-br.tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 6px; }
.cam-br.bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 6px; }
.cam-br.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }
.cam-af { left: 50%; top: 50%; width: clamp(70px, 9vw, 120px); aspect-ratio: 4 / 3; transform: translate(-50%, -50%) scale(1.25); opacity: 0; border-radius: 6px;
border: 2px solid rgba(255,255,255,.9); transition: transform 380ms cubic-bezier(0.16,1,0.3,1), opacity 160ms ease; }
.cam-af.on { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: vhsBlink .22s steps(1) 3; }
.cam-af.lock { border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,.6); animation: none; }
@keyframes vhsBlink { 50% { opacity: .15; } }
/* pantalla de tubo: esquinas redondas y viñeta suave (nada cuadrado) */
.g-crt { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: clamp(18px, 3vw, 40px);
box-shadow: 0 0 0 60px #000, inset 0 0 clamp(60px, 10vw, 160px) rgba(0,0,0,.75); }
/* la letra de la cámara (OSD) en VHS, con el sangrado de color de la cinta */
.g-hud { font-family: "VT323", "JBMono", monospace; font-size: clamp(15px, 1.5vw, 20px); letter-spacing: .06em; color: rgba(255,255,255,.72);
text-shadow: -1px 0 rgba(255,0,80,.45), 1px 0 rgba(0,220,255,.4); }
.g-c b { color: #fff; font-weight: 400; }
.g-title, .acc-member { text-shadow: -1.5px 0 rgba(255,0,80,.5), 1.5px 0 rgba(0,220,255,.45); }
/* el reel de fondo a medio color */
.acc-vid { filter: grayscale(1) contrast(1.12) brightness(.82) blur(.6px); }
.t-btn:focus { outline: none; }
.t-btn:focus-visible { outline: none; color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.7); text-decoration: underline; text-underline-offset: 5px; }
/* ─────────────── VERDE DE TERMINAL (fósforo) · pedido de Juan ─────────────── */
:root { --ph: #39ff7a; --ph2: #25c95a; --ph3: #1a7d3a; --phg: 0 0 6px rgba(57,255,122,.55), 0 0 18px rgba(57,255,122,.18); }
/* terminal de la intro */
.g-code, .g-prompt { color: var(--ph2); text-shadow: var(--phg); }
.g-code .k, .g-code .n, .g-code .hd, .g-prompt .u, .g-prompt .c { color: var(--ph); }
.g-code .s { color: #8dffb2; } .g-code .c, .g-prompt .p, .g-code .ln i { color: var(--ph3); text-shadow: none; }
.g-code .ln.ok i { color: var(--ph3); }
.g-code .f { color: var(--ph); text-decoration-color: var(--ph); }
.g-code .caret, .g-prompt .caret, .acc .caret { color: var(--ph); background: var(--ph); box-shadow: 0 0 10px rgba(57,255,122,.7); }
/* terminal del acceso */
.acc-log, .t-q, .t-a, .t-member, .t-btn { color: var(--ph2); text-shadow: var(--phg); }
.t-l .u, .t-l .v, .t-l .bar, .t-l .ok, .t-q, .t-a input, .t-member b, .t-btn.t-go, .t-btn.t-main { color: var(--ph); }
.t-l .p, .t-l .dim, .t-lb, .t-l .dots { color: var(--ph3); text-shadow: none; }
.t-l .gt, .t-q .gt, .t-gt { color: var(--ph); }
.t-a input { caret-color: var(--ph); }
.t-slots { color: var(--ph3); } .t-slots i.on, .t-slots i.cur { color: var(--ph); text-shadow: var(--phg); }
.t-big { color: var(--ph); text-shadow: 0 0 10px rgba(57,255,122,.7), 0 0 40px rgba(57,255,122,.35), 0 4px 30px rgba(0,0,0,.8); }
@media (hover: hover) and (pointer: fine) { .t-btn:hover { color: var(--ph); text-shadow: 0 0 14px rgba(57,255,122,.8); } }
.t-btn:focus-visible { color: var(--ph); text-shadow: 0 0 14px rgba(57,255,122,.8); }
/* el fondo se ve más: tomas en 1080p, blanco y negro, menos oscurecido */
.acc-vid { opacity: calc(.5 + var(--lvl) * .45); filter: grayscale(1) contrast(1.15) brightness(.95); }
.acc-shade { background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.38) 50%, rgba(0,0,0,.1) 100%); opacity: calc(1 - var(--lvl) * .5); }
/* ─────────────── fondo = piezas de contenido (toda la intro) ─────────────── */
#gate { --lvl: 0; background: #000; }
#gate > .acc-vid, #gate > .acc-shade { z-index: 0; }
#gate .acc-vid { opacity: calc(.55 + var(--lvl) * .4); filter: grayscale(1) contrast(1.15) brightness(.9);
transition: opacity 900ms var(--ease-out), filter 1200ms var(--ease-out); }
#gate .acc-shade { background: linear-gradient(90deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.2) 100%); opacity: calc(1 - var(--lvl) * .5); }
/* al entrar: el contenido se revela a color y nítido (lo que vas a aprender a hacer) */
#gate.granted .acc-vid { opacity: 1; filter: grayscale(0) contrast(1.04) brightness(1) saturate(1.08); }
#gate.granted .acc-shade { opacity: .55; }
.acc-term { z-index: 4; }
/* texto de ayuda, y "saltar intro" como texto, sin caja */
.t-help { margin: 10px 0 0; font: 500 12px var(--mono); color: var(--ph3); letter-spacing: .04em; }
.g-skip { background: none; border: 0; padding: 8px 0; font: 600 12px "JBMono", ui-monospace, monospace; letter-spacing: .12em; color: var(--ph2); text-shadow: var(--phg); }
.g-skip::before { content: "[ "; } .g-skip::after { content: " ]"; }
.g-bar { box-shadow: none; }
/* ─────────────── jerarquía de terminal real (no todo verde) ───────────────
verde = prompt, OK, barra, cursor · blanco = pregunta y lo que escribes · gris = registro · rojo = error */
:root { --tg: #ffffff; --tw: #c9ccd0; --tgray: #9aa3ab; --tdim: #5c636b; --glowg: 0 0 8px rgba(255,255,255,.55); --sh: 0 1px 10px rgba(0,0,0,.95); }
.g-code, .g-prompt, .acc-log, .t-a, .t-member, .t-btn { color: var(--tgray); text-shadow: var(--sh); }
.g-prompt .u, .t-l .u { color: var(--tg); text-shadow: var(--glowg); }
.g-prompt .c, .t-l .cmd .c { color: var(--tw); }
.g-prompt .p, .t-l .p, .t-l .dim, .g-code .ln i, .g-code .ln.ok i, .g-code .c { color: var(--tdim); text-shadow: var(--sh); }
.g-code .k { color: var(--tg); text-shadow: var(--glowg); }
.g-code .s { color: #d7dde2; } .g-code .n { color: var(--tw); } .g-code .f { color: var(--tw); text-decoration-color: var(--tg); } .g-code .hd { color: var(--tg); }
.t-l .gt, .t-q .gt, .t-gt { color: var(--tg); text-shadow: var(--glowg); }
.t-l .ok, .t-l .bar { color: var(--tg); text-shadow: var(--glowg); }
.t-l .v, .t-member b { color: var(--tw); }
.t-q { color: var(--tw); text-shadow: var(--sh); }
.t-a input { color: var(--tw); caret-color: var(--tg); text-shadow: var(--sh); }
.t-lb, .t-help { color: var(--tdim); }
.t-slots { color: var(--tdim); } .t-slots i.on { color: var(--tw); text-shadow: var(--sh); } .t-slots i.cur { color: var(--tg); text-shadow: var(--glowg); }
.t-btn.t-go, .t-btn.t-main { color: var(--tw); }
@media (hover: hover) and (pointer: fine) { .t-btn:hover { color: var(--tg); text-shadow: var(--glowg); } }
.t-big { color: var(--tg); }
.g-code .caret, .g-prompt .caret, .acc .caret { background: var(--tg); color: var(--tg); }
.g-skip { color: var(--tgray); text-shadow: var(--sh); }
.acc.granted .acc-log { opacity: .18; }
/* ═══════════════ LA CLASE con el mismo ADN de la entrada ═══════════════
verde de terminal solo para acentos · blanco para lo importante · gris para lo secundario
nada de cajas · botones de texto [ … ] · imágenes en su proporción real · lo mínimo en cada tarjeta */
:root { --red: var(--tg); }
.red, .case-num em, .coh-n, .rule .n, .arrow-sep, .hand { color: var(--tg); text-shadow: 0 0 18px rgba(255,255,255,.35); }
.reel-title .red, .sec-title .red, .outro-title .red { color: var(--tg); text-shadow: 0 0 30px rgba(255,255,255,.35), -2px 0 rgba(255,0,80,.25), 2px 0 rgba(0,220,255,.2); }
/* rótulos = líneas de terminal */
.kicker { color: var(--tgray); letter-spacing: .14em; }
.kicker::first-letter { color: var(--tg); }
.code-line { color: var(--tg); text-shadow: var(--glowg); }
/* botones = texto, sin caja */
.btn, .btn-primary, .btn-sm { background: none !important; border: 0 !important; box-shadow: none !important; min-height: 44px; padding: 0 2px; border-radius: 0;
font: 600 14px "JBMono", ui-monospace, monospace; letter-spacing: .08em; text-transform: lowercase; color: var(--tgray); }
.btn::before { content: "[ "; color: var(--tdim); } .btn::after { content: " ]"; color: var(--tdim); }
.btn-primary { color: var(--tw) !important; text-shadow: 0 0 14px rgba(255,255,255,.35); }
@media (hover: hover) and (pointer: fine) { .btn:hover, .btn-primary:hover { color: var(--tg) !important; text-shadow: var(--glowg); } }
.case-actions, .pick-actions { gap: 6px 26px !important; }
/* datos (chips) = texto plano separado por puntos */
.chip { background: none; border: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; font: 500 13px "JBMono", ui-monospace, monospace; color: var(--tgray); }
.chip b { color: var(--tw); }
.stats .chip + .chip::before, .sc-stats .chip + .chip::before { content: "·"; color: var(--tdim); margin-right: 8px; }
/* HUD de la cámara en el reel */
.tc-hud { font-family: "VT323", "JBMono", monospace; font-size: 18px; letter-spacing: .06em; text-shadow: -1px 0 rgba(255,0,80,.4), 1px 0 rgba(0,220,255,.35); }
.tc-hud .rec { color: #ff2d3a; }
.hud-nav a, .hud-brand span, .hud-btn { font-family: "JBMono", ui-monospace, monospace; letter-spacing: .02em; }
.hud-nav a.active { color: var(--tg); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.25); }
.hud-progress i { background: var(--tg); box-shadow: 0 0 10px rgba(255,255,255,.6); }
/* ¿Por cuál entras? — tres casos simples, video completo arriba y texto abajo */
.pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); height: auto; }
.pick-card { display: flex; flex-direction: column; border: 0; background: none; overflow: visible; border-radius: 0; flex: none; cursor: pointer; }
.pick-card video { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: #000; }
.pick-card .shade { display: none; }
.pick-copy { padding: 16px 0 0; }
.pick-title { font-size: clamp(34px, 3.6vw, 60px); }
.pick-log, .pick-stats, .pick-actions { max-height: none !important; opacity: 1 !important; margin-top: 10px !important; }
.pick-log { font-size: 15px; color: var(--tgray); }
.pick-card:hover { flex-grow: 0; } .pick-card:hover video { transform: none; }
.pick:hover .pick-card:not(:hover) video { filter: none; }
@media (hover: hover) and (pointer: fine) { .pick-card:hover .pick-title { color: var(--tg); } }
/* tarjetas de generación: sin marco, imagen completa en su forma real, lo mínimo debajo */
.strip { align-items: flex-start; gap: 18px; }
.gen { width: min-content; max-width: 78vw; background: none; border: 0; border-radius: 0; }
.gen .ph { height: clamp(190px, 21vw, 280px); aspect-ratio: 4 / 3; border-radius: 10px; background: #0a0b0c; }
.gen .ph img, .gen .ph video { object-fit: contain; }
.gen .meta { padding: 10px 2px 0; gap: 3px; min-width: 150px; }
.gen .model { font: 600 11px "JBMono", ui-monospace, monospace; color: var(--tg); white-space: normal; }
.gen .lbl { font-size: 13px; line-height: 1.4; color: var(--tgray); -webkit-line-clamp: 2; }
.gen .badge { top: 8px; left: 8px; background: rgba(0,0,0,.6) !important; backdrop-filter: blur(6px); }
@media (hover: hover) and (pointer: fine) { .gen:hover { transform: translateY(-3px); } .gen:hover .ph { box-shadow: 0 0 0 1px rgba(255,255,255,.45), 0 10px 40px rgba(0,0,0,.6); } }
.arrow-sep { align-self: center; margin-top: -40px; font-family: "JBMono", monospace; font-size: 22px; }
@media (max-width: 640px) { .gen .ph { height: 46vw; } .pick { grid-template-columns: 1fr; } }
/* escena: resultado grande y el prompt como salida de terminal (sin cajas) */
.scene .hero .big { border: 0; }
.scene .hero .ptxt { background: none; border: 0; border-left: 1px solid rgba(255,255,255,.28); border-radius: 0; padding: 4px 0 4px 20px; }
.scene .hero .ptxt .k { color: var(--tdim); } .scene .hero .ptxt .k.ok { color: var(--tg); }
.scene .hero .ptxt pre { color: var(--tw); font-size: 13.5px; }
.scene { border-top-color: #1b1e22; }
/* filtros = pestañas de texto */
.filters button { border: 0; background: none; padding: 6px 2px; margin-right: 12px; font: 500 13px "JBMono", ui-monospace, monospace; color: var(--tdim); }
.filters button.on { background: none; color: var(--tw); text-decoration: underline; text-decoration-color: var(--tg); text-underline-offset: 6px; }
.legend { font-family: "JBMono", ui-monospace, monospace; font-size: 12px; }
/* bloques sin caja */
.story .rules-box, .coh-rule { background: none; border: 0; border-left: 1px solid rgba(255,255,255,.28); border-radius: 0; box-shadow: none; padding: 4px 0 4px 22px; }
.coh-tabs button { background: none !important; border: 0 !important; box-shadow: none !important; min-height: 40px; padding: 0 2px; margin-right: 18px;
font: 600 14px "JBMono", ui-monospace, monospace; color: var(--tdim) !important; }
.coh-tabs button.on { color: var(--tw) !important; text-decoration: underline; text-decoration-color: var(--tg); text-underline-offset: 6px; }
.coh-txt blockquote { border-left-color: var(--tg); }
.rule { background: none; border: 0; border-top: 1px solid #1f2327; border-radius: 0; padding: 22px 2px 0; }
.rule .n { font-family: "JBMono", ui-monospace, monospace; font-size: 15px; font-weight: 700; }
.rule .n::before { content: "> regla_"; color: var(--tdim); }
.costs { background: none; border: 0; padding: 0; }
.costs .bar { background: var(--tg); box-shadow: 0 0 8px rgba(255,255,255,.4); height: 3px; }
.costs td.num { color: var(--tw); }
/* visor de cada generación */
.lb-win { border-radius: 16px; }
.lb-info h3 { font-size: 18px; }
.lb-x, .lb-nav { background: rgba(0,0,0,.55); border: 0; border-radius: 50%; }
.lb-nav { width: 46px; height: 46px; margin-top: -23px; }
/* lenguaje simple: la ayuda se lee sin esfuerzo */
.t-help { font-size: 13px; color: var(--tgray); }
.t-q { font-size: clamp(18px, 2.1vw, 26px); line-height: 1.4; }
/* ═══════════════ INGRESO SIMPLE (para gente que no sabe nada de programación) ═══════════════ */
/* el punto de grabar SIEMPRE rojo, como en cualquier cámara */
.g-c .rec, .tc-hud .rec, .cam-state.rec i { color: #ff2d3a !important; text-shadow: 0 0 10px rgba(255,45,58,.7); }
.acc.simple .acc-log { display: none; }
.acc.simple .acc-term { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 32px)); text-align: center; gap: 0; }
#gate .acc-shade { transition: opacity 900ms var(--ease-out); }
.acc.simple ~ .acc-shade, #gate:has(.acc.simple:not([hidden])) .acc-shade { background: radial-gradient(70% 70% at 50% 50%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.35) 100%); }
.s-step { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 600 12px "JBMono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--tgray); }
.s-dots { display: inline-flex; gap: 6px; }
.s-dots i { width: 22px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.2); }
.s-dots i.on { background: var(--tg); box-shadow: 0 0 8px rgba(255,255,255,.6); }
.s-kick { margin: 0 0 10px; font: 600 12px "JBMono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--tg); text-shadow: var(--glowg); }
.s-title { margin: 0; font: 800 clamp(34px, 5vw, 56px)/1.02 "Inter", system-ui, sans-serif; letter-spacing: -.035em; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.7); }
.s-sub { margin: 14px auto 0; max-width: 440px; font: 400 clamp(16px, 1.6vw, 18px)/1.5 "Inter", system-ui, sans-serif; color: #d9dee3; text-shadow: 0 2px 14px rgba(0,0,0,.9); }
.s-sub b { color: #fff; } .s-demo { color: var(--warn); font-style: normal; font-size: 13px; }
/* el campo: se ve como campo */
.s-field { display: block; margin: 28px auto 0; text-align: left; }
.s-field span { display: block; margin: 0 0 8px 4px; font: 600 13px "Inter", system-ui, sans-serif; color: var(--tgray); }
.s-field input { width: 100%; height: 60px; padding: 0 22px; border-radius: 16px; background: rgba(12,13,14,.72); border: 1.5px solid rgba(255,255,255,.28);
color: #fff; font: 500 18px "Inter", system-ui, sans-serif; outline: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
transition: border-color 180ms ease, box-shadow 180ms ease; }
.s-field input::placeholder { color: rgba(255,255,255,.38); }
.s-field input:focus { border-color: var(--tg); box-shadow: 0 0 0 5px rgba(255,255,255,.14); }
/* 6 casillas del código, como en el banco */
.s-otp { display: flex; justify-content: center; gap: clamp(6px, 1.4vw, 12px); margin: 28px 0 0; }
.s-otp input { width: clamp(44px, 11vw, 60px); height: clamp(56px, 13vw, 72px); border-radius: 14px; text-align: center; background: rgba(12,13,14,.72);
border: 1.5px solid rgba(255,255,255,.28); color: #fff; font: 700 clamp(24px, 5vw, 32px) "JBMono", ui-monospace, monospace; outline: none; caret-color: var(--tg);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms var(--ease-out); }
.s-otp input:focus { border-color: var(--tg); box-shadow: 0 0 0 5px rgba(255,255,255,.14); }
.s-otp input.on { border-color: rgba(255,255,255,.7); transform: translateY(-2px); }
/* el botón: grande, claro, dice lo que hace */
.s-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 60px; margin-top: 16px; border-radius: 16px; background: #fff; color: #000;
font: 700 17px "Inter", system-ui, sans-serif; letter-spacing: -.01em; transition: transform 150ms var(--ease-out), box-shadow 200ms ease, background-color 200ms ease; }
.s-btn:active { transform: scale(.98); }
.s-btn.busy { background: rgba(255,255,255,.75); cursor: progress; }
.s-btn.busy span::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px; border-radius: 50%;
border: 2px solid rgba(0,0,0,.25); border-top-color: #000; animation: sSpin .7s linear infinite; }
@keyframes sSpin { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) { .s-btn:hover { box-shadow: 0 0 0 5px rgba(255,255,255,.18), 0 12px 40px rgba(255,255,255,.18); } }
.s-err { min-height: 22px; margin: 12px 0 0; font: 500 14px "Inter", system-ui, sans-serif; color: #ff8a8a; text-shadow: 0 1px 10px rgba(0,0,0,.9); }
.s-err:empty { min-height: 0; margin: 0; }
.s-links { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 14px 0 0; color: rgba(255,255,255,.35); }
.s-link { font: 500 14px "Inter", system-ui, sans-serif; color: var(--tgray); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.25); padding: 6px 2px; }
@media (hover: hover) and (pointer: fine) { .s-link:hover { color: #fff; } }
/* pago */
.s-price { margin: 22px 0 0; font: 800 clamp(34px, 5vw, 48px) "Inter", system-ui, sans-serif; letter-spacing: -.03em; color: #fff; }
.s-list { list-style: none; margin: 14px auto 0; padding: 0; max-width: 400px; text-align: left; display: grid; gap: 8px; font: 400 15px/1.4 "Inter", system-ui, sans-serif; color: #d9dee3; }
.s-list li::before { content: "✓"; color: var(--tg); font-weight: 800; margin-right: 10px; }
.s-note { margin: 12px 0 0; font: 500 12px "Inter", system-ui, sans-serif; color: var(--tgray); }
/* concedido */
.s-member { margin: 16px 0 0; font: 500 18px "JBMono", ui-monospace, monospace; color: var(--tgray); letter-spacing: .06em; }
.s-member b { color: var(--tg); text-shadow: var(--glowg); font-size: 1.3em; }
.acc.simple .acc-stage.bad { animation: accShake 340ms var(--ease-out); }
/* ingreso: logo hecho de código + color amable y creíble (blanco del ADN, sin verde) */
.s-logo { margin: 0 auto 22px; font: 700 clamp(5.5px, 1.05vw, 8.5px)/1.02 "JBMono", ui-monospace, monospace; letter-spacing: 0; color: #fff; white-space: pre;
text-shadow: 0 0 10px rgba(255,255,255,.35); display: inline-block; text-align: left; min-height: 9em; }
.acc.simple .s-kick { color: rgba(255,255,255,.72); text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.acc.simple .s-dots i.on { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.5); }
.acc.simple .s-field input:focus { border-color: rgba(255,255,255,.85); box-shadow: 0 0 0 5px rgba(255,255,255,.12); }
@media (hover: hover) and (pointer: fine) { .acc.simple .s-btn:hover { box-shadow: 0 0 0 5px rgba(255,255,255,.14), 0 12px 40px rgba(255,255,255,.14); } }
.acc.simple .s-list li::before { color: #fff; }
.acc.simple .s-member b { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.45); }
/* código: un campo invisible encima de 6 casillas */
.s-otp { position: relative; display: block; width: fit-content; margin: 28px auto 0; cursor: text; }
.s-otp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; caret-color: transparent; color: transparent; background: none; }
.s-cells { display: flex; gap: clamp(6px, 1.4vw, 12px); }
.s-cells i { display: grid; place-items: center; width: clamp(44px, 11vw, 60px); height: clamp(56px, 13vw, 72px); border-radius: 14px; font-style: normal;
background: rgba(12,13,14,.72); border: 1.5px solid rgba(255,255,255,.28); color: #fff; font: 700 clamp(24px, 5vw, 32px) "JBMono", ui-monospace, monospace;
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 150ms ease, transform 150ms var(--ease-out), box-shadow 150ms ease; }
.s-cells i.on { border-color: rgba(255,255,255,.7); transform: translateY(-2px); }
.s-cells i.cur { border-color: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.12); }
.s-cells i.cur::after { content: ""; width: 2px; height: 40%; background: #fff; animation: caret 1s steps(1) infinite; }
.s-logo { display: block; width: fit-content; margin: 0 auto 20px; font-size: clamp(6.5px, 1.25vw, 10px); }
.s-step { display: flex; justify-content: center; }
/* ingreso HÍBRIDO: código por todas partes, pero lo que hay que hacer se entiende de una */
.acc.hybrid .acc-log { display: grid; gap: 2px; width: 100%; max-width: 520px; margin: 0 auto 26px; text-align: left; opacity: .72;
font: 500 12px/1.7 "JBMono", ui-monospace, monospace; color: rgba(255,255,255,.55); text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.acc.hybrid .t-l .gt, .acc.hybrid .t-l .u { color: #fff; text-shadow: none; }
.acc.hybrid .t-l .p { color: rgba(255,255,255,.4); }
.acc.hybrid .t-l .ok { color: #fff; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 0 8px rgba(255,255,255,.4); }
.acc.hybrid .s-step { text-transform: none; letter-spacing: .08em; }
.acc.hybrid .s-kick { text-transform: none; letter-spacing: .04em; font-size: 13px; }
.acc.hybrid .s-field span { font: 600 13px "JBMono", ui-monospace, monospace; color: rgba(255,255,255,.6); }
.s-code { margin: 12px 0 0; font: 500 12px "JBMono", ui-monospace, monospace; color: rgba(255,255,255,.5); text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.acc.hybrid .s-title { font-family: "Inter", system-ui, sans-serif; }
/* barra de carga en código (reemplaza el circulito del botón) */
.s-btn.busy span::before { display: none; }
.s-load { margin: 14px 0 0; font: 600 12px "JBMono", ui-monospace, monospace; color: rgba(255,255,255,.62); white-space: pre; text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.s-load b { color: #fff; font-weight: 700; letter-spacing: -.02em; text-shadow: 0 0 10px rgba(255,255,255,.45); }
.s-load b i { font-style: normal; color: rgba(255,255,255,.22); text-shadow: none; }
.s-load span { color: #fff; font-variant-numeric: tabular-nums; }
.s-load em { font-style: normal; }
.s-load.ko b, .s-load.ko em { color: #ff8a8a; }
.s-load[hidden] { display: none; }
@media (max-width: 420px) { .s-load { font-size: 10.5px; } }
/* el logo vivo: ancho fijo para que no "baile" mientras titila */
.s-logo { font-variant-ligatures: none; }
.s-logo + .s-step + .s-sub, .s-step + .s-sub { margin-top: 4px; font-size: clamp(17px, 1.7vw, 19px); color: #fff; }
/* inicio 100% blanco y negro (pedido de Juan): el reel ya no se revela a color al entrar */
#gate.granted .acc-vid { filter: grayscale(1) contrast(1.08) brightness(1); opacity: .95; }
/* ═══════════════ EL CURSO: 8 módulos (índice tipo película, sin cajas) ═══════════════ */
.modulos { padding: clamp(80px, 12vh, 140px) 0 40px; }
.mods { max-width: 1100px; margin: 0 auto; padding: 0 var(--gut); }
.mod { border-top: 1px solid #1f2327; }
.mod:last-child { border-bottom: 1px solid #1f2327; }
.mod summary { display: grid; grid-template-columns: 56px 1fr auto 28px; align-items: center; gap: 16px; padding: 22px 2px; cursor: pointer; list-style: none; }
.mod summary::-webkit-details-marker { display: none; }
.mod-n { font: 700 15px "JBMono", ui-monospace, monospace; color: var(--tg); text-shadow: var(--glowg); }
.mod-t { font: 800 clamp(20px, 2.4vw, 30px)/1.15 "Inter", system-ui, sans-serif; letter-spacing: -.02em; color: #fff; }
.mod-meta { font: 500 12px "JBMono", ui-monospace, monospace; color: var(--tgray); white-space: nowrap; }
.mod-x { font: 400 26px "JBMono", ui-monospace, monospace; color: var(--tgray); text-align: center; transition: transform 250ms var(--ease-out); }
.mod[open] .mod-x { transform: rotate(45deg); color: #fff; }
.mod.pronto .mod-t { color: var(--tgray); }
@media (hover: hover) and (pointer: fine) { .mod summary:hover .mod-t { color: var(--tg); } }
.mod-body { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(20px, 4vw, 56px); padding: 4px 2px 34px 72px; animation: modIn 380ms var(--ease-out); }
@keyframes modIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mod-k { margin: 18px 0 8px; font: 600 12px "JBMono", ui-monospace, monospace; color: var(--tdim); }
.mod-k:first-child { margin-top: 0; }
.mod-logro { font: 600 18px/1.45 "Inter", system-ui, sans-serif; color: #fff; }
.mod-need, .mod-pasos { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: #d6dade; font-size: 16px; line-height: 1.45; }
.mod-pasos li::marker { font: 700 13px "JBMono", ui-monospace, monospace; color: var(--tg); }
.mod-need li::marker { color: var(--tg); }
.mod-mal { color: #9aa3ab; font-style: italic; font-size: 15px; line-height: 1.45; }
.mod-ej { display: block; color: #d6dade; text-decoration: none; font-size: 15px; line-height: 1.45; border-left: 1px solid rgba(255,255,255,.35); padding-left: 14px; }
.mod-ej b { color: #fff; } .mod-ej span { color: var(--tg); font: 600 13px "JBMono", ui-monospace, monospace; margin-left: 6px; }
.mod-reto { margin-top: 18px; }
.mod-reto p:not(.mod-k) { color: #fff; font-weight: 600; }
.mod-go { margin-top: 8px; }
.mod-soon { color: var(--tgray) !important; font-weight: 400 !important; }
@media (max-width: 760px) { .mod-body { grid-template-columns: 1fr; padding-left: 2px; } .mod summary { grid-template-columns: 40px 1fr 24px; } .mod-meta { display: none; } }
/* ═══════════════ GENERADOR DE LA CLASE ═══════════════ */
#gen { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: max(12px, 2vw); }
#gen[hidden] { display: none; }
.gen-back { position: absolute; inset: 0; background: rgba(4,5,6,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gen-win { position: relative; width: min(1180px, 100%); max-height: calc(100dvh - 24px); overflow: auto; border-radius: 20px; background: #0e1012; border: 1px solid #23272c;
box-shadow: 0 40px 120px rgba(0,0,0,.7); animation: genIn 320ms var(--ease-out); }
@keyframes genIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.gen-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 18px; padding: 18px 22px; background: rgba(14,16,18,.94); backdrop-filter: blur(8px); border-bottom: 1px solid #1d2024; }
.gen-k { font: 600 12px "JBMono", ui-monospace, monospace; color: var(--tg); text-shadow: var(--glowg); }
.gen-h { font: 800 clamp(22px, 2.6vw, 30px) "Inter", system-ui, sans-serif; letter-spacing: -.02em; color: #fff; }
.gen-saldo { margin-left: auto; font: 600 14px "JBMono", ui-monospace, monospace; color: var(--tgray); }
.gen-saldo b { color: #fff; font-size: 20px; }
.gen-x { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.06); color: #fff; font-size: 16px; }
.gen-body { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(18px, 3vw, 40px); padding: 22px; }
.gen-step { margin: 18px 0 10px; font: 700 15px "Inter", system-ui, sans-serif; color: #fff; }
.gen-step:first-child { margin-top: 0; }
.gen-step span { font-weight: 400; color: var(--tgray); font-size: 13px; }
.gen-models { display: grid; gap: 8px; }
.gen-model { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #15181b; border: 1.5px solid #23272c; text-align: left; color: #d6dade;
transition: border-color 150ms ease, transform 140ms var(--ease-out); }
.gen-model b { font: 600 15px "Inter", system-ui, sans-serif; } .gen-model span { font: 600 12px "JBMono", ui-monospace, monospace; color: var(--tgray); white-space: nowrap; }
.gen-model.on { border-color: #fff; color: #fff; } .gen-model.on span { color: var(--tg); }
.gen-model:active { transform: scale(.98); }
.gen-refs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gen-ref { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: #15181b; border: 1.5px dashed #33383e; cursor: pointer; transition: border-color 150ms ease; }
.gen-ref.has { border-style: solid; border-color: rgba(255,255,255,.55); }
@media (hover: hover) and (pointer: fine) { .gen-ref:hover { border-color: #fff; } }
.gen-thumb { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px; background: #0b0c0d; color: var(--tgray); font: 300 28px "Inter", sans-serif; overflow: hidden; }
.gen-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gen-rt { display: grid; gap: 2px; min-width: 0; } .gen-rt b { font: 700 14px "Inter", sans-serif; color: #fff; } .gen-rt em { font: 400 12px/1.35 "Inter", sans-serif; font-style: normal; color: var(--tgray); }
.gen-rm { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; }
.gen-prompt { width: 100%; padding: 14px 16px; border-radius: 14px; background: #15181b; border: 1.5px solid #23272c; color: #fff; font: 400 15px/1.5 "Inter", system-ui, sans-serif; resize: vertical; outline: none; }
.gen-prompt:focus { border-color: #fff; }
.gen-tip { margin-top: 8px; font: 500 12px "JBMono", ui-monospace, monospace; color: var(--tdim); }
.gen-go { margin-top: 16px; }
.gen-err { margin-top: 10px; color: #ff8a8a; font-size: 14px; }
.gen-out { display: grid; place-items: center; min-height: 280px; border-radius: 16px; background: #0b0c0d; border: 1px solid #1d2024; overflow: hidden; position: relative; }
.gen-out img, .gen-out video { width: 100%; max-height: 60vh; object-fit: contain; background: #000; }
.gen-empty { color: var(--tgray); font-size: 14px; text-align: center; padding: 20px; }
.gen-dl { position: absolute; right: 12px; bottom: 10px; font: 600 13px "JBMono", ui-monospace, monospace; color: #fff; text-shadow: 0 1px 8px #000; }
.gen-sim { position: relative; width: 100%; } .gen-sim img { width: 100%; max-height: 50vh; object-fit: contain; filter: grayscale(.4) brightness(.7); }
.gen-sim p { position: absolute; inset: auto 12px 12px; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.75); color: var(--warn); font: 600 12px "JBMono", ui-monospace, monospace; text-align: center; }
.gen-hist { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.gen-h-it { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #15181b; border: 1px solid #23272c; display: grid; place-items: center; }
.gen-h-it img, .gen-h-it video { width: 100%; height: 100%; object-fit: cover; }
.gen-h-it span { font: 600 11px "JBMono", monospace; color: var(--tgray); padding: 6px; text-align: center; }
.gen-h-it em { position: absolute; right: 4px; bottom: 4px; font: 600 10px "JBMono", monospace; font-style: normal; color: #fff; background: rgba(0,0,0,.6); padding: 2px 5px; border-radius: 5px; }
.gen-h-it.error { border-color: rgba(255,107,107,.5); }
.hud-gen { color: #fff !important; } .hud-gen b { color: var(--tg); }
@media (max-width: 820px) { .gen-body { grid-template-columns: 1fr; } .gen-refs { grid-template-columns: 1fr; } }
.gen-hist .gen-empty { grid-column: 1 / -1; text-align: left; padding: 6px 0; }
/* ingreso: MÁS código a la vista (títulos y saludo en letra de código) + botones GRANDES */
.acc.hybrid .acc-log { opacity: 1; max-width: 560px; font-size: clamp(12px, 1.1vw, 14px); line-height: 1.75; color: rgba(255,255,255,.72); margin-bottom: 30px; }
.acc.hybrid .t-l .ok { color: var(--tg); text-shadow: var(--glowg); }
.acc.hybrid .t-l .u { color: var(--tg); text-shadow: var(--glowg); }
.acc.hybrid .s-title { font: 800 clamp(28px, 4.2vw, 48px)/1.12 "JBMono", ui-monospace, monospace; letter-spacing: -.03em; }
.acc.hybrid .s-title::before { content: "> "; color: var(--tg); text-shadow: var(--glowg); }
.acc.hybrid .s-title::after { content: ""; display: inline-block; width: .5em; height: .9em; margin-left: .12em; vertical-align: -.08em; background: #fff; animation: caret 1s steps(1) infinite; }
.acc.hybrid .s-sub { font: 400 clamp(14px, 1.4vw, 16px)/1.6 "JBMono", ui-monospace, monospace; color: #e4e8ec; }
.acc.hybrid .s-member { font-size: 20px; }
/* botones grandes: lo más fácil de entender */
.acc.hybrid .s-btn { height: 68px; font-size: 19px; border-radius: 18px; }
.acc.hybrid .s-field input { height: 64px; font-size: 19px; }
.acc.hybrid .s-cells i { width: clamp(48px, 12vw, 64px); height: clamp(60px, 14vw, 78px); }
@media (prefers-reduced-motion: reduce) { .acc.hybrid .s-title::after { animation: none; } }
.mod-bloque { padding: 46px 2px 14px; }
.mod-bloque span { font: 600 12px "JBMono", ui-monospace, monospace; color: var(--tg); text-shadow: var(--glowg); text-transform: uppercase; letter-spacing: .14em; }
.mod-bloque h3 { margin-top: 6px; font: 400 clamp(30px, 4vw, 52px)/1 "Anton", sans-serif; text-transform: uppercase; color: #fff; }
.mod-bloque p { margin-top: 6px; color: var(--tgray); font-size: 15px; }
/* la clase en la terminal: preguntas (prompt), explicaciones (// comentario) y ejemplos de código */
.g-code.lesson { font-size: clamp(13px, 1.45vw, 18px); line-height: 1.85; white-space: pre-wrap; }
.g-code.lesson .ln { display: block; }
.g-code.lesson .lq { margin-top: 10px; color: #fff; }
.g-code.lesson .lq:first-child { margin-top: 0; }
.g-code.lesson .lq .u { color: var(--tg); text-shadow: var(--glowg); } .g-code.lesson .lq .p { color: var(--tdim); }
.g-code.lesson .lq .c { color: #fff; font-weight: 700; }
.g-code.lesson .lc { color: #cfd4d9; padding-left: 2ch; }
.g-code.lesson .lc .cm { color: var(--tg); }
.g-code.lesson .lx { color: var(--tg); padding-left: 2ch; text-shadow: var(--glowg); }
.g-code.lesson .lx .s { color: #fff; }
.acc.hybrid .acc-log { display: none; }
/* ═══════════════ INICIO: las tres puertas ═══════════════ */
#hub { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; background: #000; overflow: auto; }
#hub[hidden] { display: none; }
.hub-vid { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.8); opacity: .55; }
.hub-shade { position: fixed; inset: 0; background: radial-gradient(80% 80% at 50% 50%, rgba(0,0,0,.5), rgba(0,0,0,.85)); }
.hub-in { position: relative; width: min(1180px, calc(100% - 32px)); padding: 60px 0; text-align: center; animation: genIn 420ms var(--ease-out); }
.hub-k { font: 600 13px "JBMono", ui-monospace, monospace; color: var(--tg); text-shadow: var(--glowg); margin-bottom: 26px; }
.hub-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); }
.hub-door { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 300px; padding: 28px 26px; border-radius: 22px; text-align: left;
background: rgba(14,16,18,.72); border: 1.5px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
transition: transform 200ms var(--ease-out), border-color 200ms ease, box-shadow 200ms ease; }
.hub-door:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .hub-door:hover { transform: translateY(-4px); border-color: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 5px rgba(255,255,255,.06); } .hub-door:hover .hub-cmd { color: var(--tg); } }
.hub-n { font: 700 14px "JBMono", ui-monospace, monospace; color: var(--tg); text-shadow: var(--glowg); }
.hub-t { font: 400 clamp(38px, 4.6vw, 64px)/.95 "Anton", sans-serif; text-transform: uppercase; color: #fff; }
.hub-d { font: 400 16px/1.45 "Inter", system-ui, sans-serif; color: #cfd4d9; }
.hub-cmd { margin-top: auto; font: 600 14px "JBMono", ui-monospace, monospace; color: rgba(255,255,255,.6); transition: color 160ms ease; }
@media (max-width: 820px) { .hub-doors { grid-template-columns: 1fr; } .hub-door { min-height: 0; } }
.hud-home { color: #fff !important; }
#plug { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; }
#plug[hidden] { display: none; }
.plug-win { position: relative; width: min(760px, 100%); padding: 28px; border-radius: 20px; background: #0e1012; border: 1px solid #23272c; animation: genIn 320ms var(--ease-out); }
.plug-win .gen-x { position: absolute; top: 16px; right: 16px; }
.plug-h { font: 400 48px/1 "Anton", sans-serif; text-transform: uppercase; color: #fff; margin: 6px 0 20px; }
.plug-card { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 20px; border-radius: 16px; background: #15181b; border: 1px solid #23272c; }
.plug-card b { font: 700 18px "Inter", sans-serif; color: #fff; } .plug-card p { margin-top: 6px; color: var(--tgray); font-size: 15px; line-height: 1.45; }
.plug-soon { flex: none; font: 600 12px "JBMono", monospace; color: var(--warn); }
.plug-note { margin-top: 16px; font: 500 12px "JBMono", monospace; color: var(--tdim); }
.hub-vid { opacity: .8; filter: grayscale(1) contrast(1.12) brightness(.95); }
.hub-shade { background: radial-gradient(80% 80% at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,.72)); }
.gen-saldo { visibility: hidden; } /* sin costo a la vista por ahora */
/* ═══════════════ LETRA AMIGABLE + COLORES DE TERMINAL (Juan 28-09) ═══════════════
títulos: Inter redondeada y en minúscula (nada de letra gruesa condensada)
todo lo que es código/terminal: colores de terminal real (sin verde) · el resto: blanco y negro */
:root {
--t-prompt: #5fd7ff; /* cian: prompt > y lo que responde la máquina */
--t-kw: #d7a0ff; /* violeta: comandos y palabras clave */
--t-str: #ffd580; /* ámbar: textos entre comillas / valores */
--t-fn: #8ab4ff; /* azul: nombres, rutas, números de módulo */
--t-com: #7a838c; /* gris: comentarios // … */
--tg: var(--t-prompt); --glowg: 0 0 10px rgba(95,215,255,.35);
--red: #ffffff;
}
.reel-title, .sec-title, .case-title, .outro-title, .spend-title, .pick-title, .m-view h3, .block-head h3, .scene h4, .coh-txt h4, .mod-bloque h3, .hub-t, .plug-h {
font-family: "Inter", system-ui, sans-serif !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: -.035em; line-height: 1 !important; }
.reel-title { font-size: clamp(48px, 8.4vw, 140px) !important; line-height: .98 !important; }
.sec-title, .outro-title { font-size: clamp(40px, 6.4vw, 104px) !important; }
.case-title { font-size: clamp(46px, 8vw, 128px) !important; }
.spend-title, .pick-title { font-size: clamp(32px, 4vw, 64px) !important; }
.hub-t { font-size: clamp(30px, 3.4vw, 46px) !important; }
.reel-count div b, .rule .n, .coh-n, .spend-case b, .arrow-sep { font-family: "Inter", system-ui, sans-serif !important; font-weight: 700; letter-spacing: -.03em; }
/* acentos de títulos: blanco con brillo (no son código) */
.red, .reel-title .red, .sec-title .red, .outro-title .red, .case-num em, .coh-n, .rule .n, .arrow-sep { color: #fff !important; }
.hud-progress i { background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.6); }
.hud-nav a.active { color: #fff; }
/* líneas de terminal */
.kicker { color: var(--t-com) !important; }
.kicker::first-letter { color: var(--t-com); }
.g-code .k, .t-l .gt, .t-q .gt, .t-gt { color: var(--t-kw) !important; text-shadow: none; }
.g-code .s { color: var(--t-str) !important; } .g-code .f { color: var(--t-fn) !important; } .g-code .n { color: var(--t-str) !important; } .g-code .hd { color: var(--t-prompt) !important; }
.g-code .c, .g-code .ln i { color: var(--t-com) !important; }
.g-prompt .u, .t-l .u, .t-l .ok, .t-l .bar, .code-line { color: var(--t-prompt) !important; text-shadow: var(--glowg); }
.hub-k, .gen-k, .s-kick { color: var(--t-prompt) !important; text-shadow: var(--glowg) !important; }
.hub-n, .mod-n { color: var(--t-fn) !important; text-shadow: none !important; }
.hub-cmd { color: var(--t-com); } .hub-cmd::first-letter { color: var(--t-prompt); }
@media (hover: hover) and (pointer: fine) { .hub-door:hover .hub-cmd { color: var(--t-str); } }
.mod-meta { color: var(--t-com); }
.btn::before, .btn::after { color: var(--t-kw) !important; }
.btn-primary { color: var(--t-str) !important; text-shadow: none !important; }
@media (hover: hover) and (pointer: fine) { .btn:hover, .btn-primary:hover { color: #fff !important; } }
.mod-pasos li::marker, .mod-need li::marker { color: var(--t-fn); }
.mod-ej span { color: var(--t-str); }
.s-list li::before { color: var(--t-prompt); }
.s-member b { color: var(--t-str); text-shadow: none; }
.gen-model.on span { color: var(--t-str); }
/* ═══════════════ ESTUDIO (generador) — como Cinema Studio + el catálogo del plugin ═══════════════ */
#gen.estudio { display: flex; flex-direction: column; place-items: stretch; padding: 0; background: #0a0b0c; color: #e9ecef; font-family: "Inter", system-ui, sans-serif; }
#gen.estudio[hidden] { display: none; }
.estudio .p { color: var(--t-prompt); } .estudio .kw { color: var(--t-kw); } .estudio .c { color: var(--t-com); } .estudio .n { color: var(--t-str); }
.es-top { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid #1d2125; }
.es-k { font: 600 13px "JBMono", ui-monospace, monospace; color: #c9ccd0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-modes { margin: 0 auto; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #15181b; border: 1px solid #23272c; }
.es-modes button { min-height: 38px; padding: 0 22px; border-radius: 999px; font: 600 15px "Inter", sans-serif; color: #9aa3ab; transition: background 160ms ease, color 160ms ease; }
.es-modes button[aria-selected="true"] { background: #fff; color: #000; }
.es-x { width: 40px; height: 40px; border-radius: 50%; background: #15181b; color: #fff; flex: none; }
.es-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr) 390px; }
.es-lbl { font: 600 12px "JBMono", ui-monospace, monospace; letter-spacing: .06em; text-transform: lowercase; color: var(--t-com); margin: 0 0 8px; }
.es-lbl::before { content: "// "; }
/* izquierda: Elements */
.es-els { overflow: auto; padding: 16px; border-right: 1px solid #1d2125; }
.es-els-h { display: flex; align-items: center; justify-content: space-between; }
.es-els-h .es-lbl { margin: 0; }
.es-new { font: 600 13px "JBMono", monospace; color: var(--t-str); padding: 6px 0; }
.es-help { margin: 8px 0 14px; font-size: 13px; line-height: 1.4; color: #8b949c; } .es-help b { color: #fff; }
.es-cat { margin-bottom: 16px; }
.es-cat-h { font: 600 12px "JBMono", monospace; color: #c9ccd0; margin-bottom: 8px; }
.es-cat-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.es-el { position: relative; display: grid; gap: 4px; padding: 0; border-radius: 10px; text-align: left; }
.es-el img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 2px solid transparent; transition: border-color 160ms ease; }
.es-el span { font: 500 10px "JBMono", monospace; color: #8b949c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-el.on img { border-color: var(--t-kw); } .es-el.on span { color: var(--t-kw); }
.es-el.dis { opacity: .45; }
.es-el-x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.7); font-style: normal; font-size: 10px; color: #fff; opacity: 0; transition: opacity 160ms ease; }
@media (hover: hover) { .es-el:hover .es-el-x { opacity: 1; } }
.es-el-empty { width: 100%; padding: 12px; border-radius: 10px; border: 1px dashed #2a2e33; font: 500 13px "Inter", sans-serif; color: #8b949c; text-align: left; }
/* centro: escenario */
.es-stage { min-width: 0; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.es-out { position: relative; flex: 1; min-height: 320px; display: grid; place-items: center; border-radius: 16px; background: #060707; border: 1px solid #1d2125; overflow: hidden; }
.es-out img, .es-out video { max-width: 100%; max-height: 62vh; object-fit: contain; }
.es-empty { text-align: center; color: #6c757d; } .es-empty-k { font: 600 13px "JBMono", monospace; color: var(--t-com); margin-bottom: 6px; }
.es-sim { position: relative; width: 100%; height: 100%; display: grid; place-items: center; } .es-sim img { max-height: 56vh; max-width: 100%; opacity: .5; filter: blur(2px) grayscale(1); }
.es-sim p { position: absolute; left: 14px; right: 14px; bottom: 14px; font: 600 13px "JBMono", monospace; color: #fff; background: rgba(0,0,0,.72); padding: 10px 12px; border-radius: 10px; }
.es-acts { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.es-acts button, .es-acts a { font: 600 13px "JBMono", monospace; color: #c9ccd0; padding: 6px 0; }
.es-acts button::before, .es-acts a::before { content: "⋯ "; color: var(--t-kw); }
@media (hover: hover) { .es-acts button:hover, .es-acts a:hover { color: var(--t-str); } }
.es-hist-h { margin-top: 6px; }
.es-hist { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.es-h { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #15181b; display: grid; place-items: center; }
.es-h img, .es-h video { width: 100%; height: 100%; object-fit: cover; }
.es-h i { position: absolute; font-style: normal; color: #fff; text-shadow: 0 1px 6px #000; }
.es-h span { font: 600 10px "JBMono", monospace; color: #8b949c; }
.es-h.error { outline: 1px solid rgba(255,107,107,.5); }
.es-none { color: #8b949c; font-size: 14px; }
/* derecha: caja del prompt */
.es-box { overflow: auto; padding: 16px 18px 24px; border-left: 1px solid #1d2125; display: flex; flex-direction: column; gap: 14px; }
.es-f { position: relative; }
.es-model { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 12px 14px; border-radius: 12px; background: #15181b; border: 1px solid #2a2e33; text-align: left; }
.es-model b { font: 700 16px "Inter", sans-serif; color: #fff; } .es-model em { grid-row: span 2; font-style: normal; color: #8b949c; }
.es-tag { font: 500 12px "JBMono", monospace; color: var(--t-str); }
.es-mlist { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); max-height: 60vh; overflow: auto; padding: 6px; border-radius: 14px; background: #111315; border: 1px solid #2a2e33; box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.es-mi { width: 100%; display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; text-align: left; }
.es-mi b { font: 700 15px "Inter", sans-serif; color: #fff; } .es-mi span { font-size: 13px; line-height: 1.35; color: #8b949c; }
.es-mi.on, .es-mi:hover { background: #1b1f23; }
.es-tags { display: flex; flex-wrap: wrap; gap: 4px 10px; } .es-tags i { font: 600 11px "JBMono", monospace; font-style: normal; }
.t-kw { color: var(--t-kw); } .t-fn { color: var(--t-fn); } .t-com { color: var(--t-com); }
.es-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.es-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: #15181b; border: 1px solid #23272c; font: 600 13px "JBMono", monospace; color: #9aa3ab; transition: border-color 160ms ease, color 160ms ease; }
.es-chip.on { border-color: #fff; color: #fff; }
.es-chip:active, .es-go:active, .es-modes button:active { transform: scale(.97); }
.es-arb { display: inline-block; height: 13px; max-width: 22px; border: 1.5px solid currentColor; border-radius: 2px; }
.es-frames { display: grid; gap: 8px; }
.es-slot { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; border: 1px dashed #2a2e33; }
.es-slot.has { border-style: solid; border-color: var(--t-fn); }
.es-slot-in { flex: none; width: 64px; height: 64px; border-radius: 9px; background: #15181b; display: grid; place-items: center; overflow: hidden; cursor: pointer; font-size: 22px; color: #8b949c; }
.es-slot-in img { width: 100%; height: 100%; object-fit: cover; }
.es-slot b { display: block; font: 700 14px "Inter", sans-serif; color: #fff; } .es-slot em { font-style: normal; font-size: 12px; color: #8b949c; }
.es-rm { display: block; margin-top: 2px; font: 600 12px "JBMono", monospace; color: var(--t-com); }
.es-att { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.es-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 999px; background: #1a1d21; border: 1px solid var(--t-kw); }
.es-pill img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .es-pill b { font: 600 12px "JBMono", monospace; color: var(--t-kw); } .es-pill button { color: #8b949c; font-size: 11px; }
.es-addat { font: 600 13px "JBMono", monospace; color: var(--t-kw); padding: 6px 4px; }
.es-refn { margin-left: auto; font: 500 11px "JBMono", monospace; color: var(--t-com); }
.es-no { font-size: 13px; line-height: 1.4; color: #8b949c; } .es-no b { color: #fff; }
.es-att-f.off .es-lbl { opacity: .6; }
.es-pwrap { position: relative; }
.es-prompt { width: 100%; padding: 12px 14px; border-radius: 12px; background: #15181b; border: 1.5px solid #23272c; color: #fff; font: 400 15px/1.5 "Inter", sans-serif; resize: vertical; outline: none; }
.es-prompt:focus { border-color: #fff; }
.es-cnt { float: right; color: var(--t-str); }
.es-at { position: absolute; z-index: 6; left: 8px; right: 8px; top: 100%; margin-top: 4px; padding: 6px; border-radius: 12px; background: #111315; border: 1px solid #2a2e33; box-shadow: 0 20px 60px rgba(0,0,0,.7); }
.es-at button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; text-align: left; }
.es-at button:hover { background: #1b1f23; } .es-at img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.es-at b { font: 600 13px "JBMono", monospace; color: var(--t-kw); } .es-at em { margin-left: auto; font-style: normal; font-size: 12px; color: #8b949c; }
.es-at-new { font: 600 13px "JBMono", monospace; color: var(--t-str); }
.es-dir { margin-top: 8px; } .es-dir summary { cursor: pointer; font: 600 13px "JBMono", monospace; color: #c9ccd0; list-style: none; }
.es-dir-g { display: grid; gap: 6px; margin: 10px 0; }
.es-dir-g label { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; }
.es-dir-g span { font: 600 12px "JBMono", monospace; color: var(--t-fn); }
.es-dir-g input { min-height: 36px; padding: 0 10px; border-radius: 8px; background: #15181b; border: 1px solid #23272c; color: #fff; font: 400 13px "Inter", sans-serif; outline: none; }
.es-dir-g input:focus { border-color: #fff; }
.es-dir-go { font: 600 13px "JBMono", monospace; color: var(--t-str); }
.es-go { min-height: 54px; border-radius: 14px; background: #fff; color: #000; font: 700 17px "Inter", sans-serif; transition: transform 160ms ease, opacity 160ms ease; }
.es-go:disabled { opacity: .5; }
.es-load { font: 600 13px "JBMono", monospace; color: #c9ccd0; white-space: pre; overflow: hidden; } .es-load b { color: var(--t-prompt); font-weight: 600; } .es-load b i { color: #2a2e33; font-style: normal; } .es-load em { font-style: normal; color: var(--t-com); }
.es-load.ko b { color: #ff6b6b; }
.es-err { font-size: 14px; color: #ff8a8a; min-height: 1em; }
/* crear element */
.es-modal { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.78); }
.es-modal[hidden] { display: none; }
.es-mw { width: min(620px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border-radius: 18px; background: #111315; border: 1px solid #2a2e33; display: grid; gap: 14px; }
.es-mw h4 { font: 700 24px "Inter", sans-serif; letter-spacing: -.02em; color: #fff; }
.es-mcats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.es-mcats button { display: grid; gap: 3px; padding: 12px; border-radius: 12px; background: #15181b; border: 1.5px solid #23272c; text-align: left; }
.es-mcats button b { font: 700 15px "Inter", sans-serif; color: #fff; } .es-mcats button span { font-size: 12px; line-height: 1.35; color: #8b949c; }
.es-mcats button.on { border-color: var(--t-kw); }
.es-mname { display: flex; align-items: center; gap: 2px; padding: 0 12px; border-radius: 12px; background: #15181b; border: 1.5px solid #23272c; font: 600 15px "JBMono", monospace; }
.es-mname input { flex: 1; min-height: 48px; background: none; border: 0; outline: none; color: var(--t-str); font: inherit; }
.es-mimgs { display: flex; flex-wrap: wrap; gap: 8px; }
.es-mimgs span { position: relative; } .es-mimgs img { width: 92px; height: 92px; border-radius: 10px; object-fit: cover; }
.es-mimgs span button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; }
.es-madd { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 10px; border: 1px dashed #3a3f45; font: 600 13px "JBMono", monospace; color: var(--t-str); cursor: pointer; }
.es-mtip, .es-mtest { font-size: 13px; line-height: 1.45; color: #aab2b9; } .es-mtip .c, .es-mtest .c { font: 600 12px "JBMono", monospace; }
.es-mact { display: flex; justify-content: flex-end; gap: 22px; }
.es-mact button { font: 600 14px "JBMono", monospace; color: #9aa3ab; } .es-mact .es-msave { color: var(--t-str); }
.es-merr { color: #ff8a8a; font-size: 14px; }
@media (max-width: 1100px) { .es-body { grid-template-columns: 210px minmax(0, 1fr) 340px; } }
@media (max-width: 860px) {
#gen.estudio { overflow: auto; }
.es-body { display: flex; flex-direction: column; min-height: auto; }
.es-stage { order: 1; } .es-box { order: 2; border: 0; } .es-els { order: 3; border: 0; border-top: 1px solid #1d2125; }
.es-cat-g { grid-template-columns: repeat(4, 1fr); }
.es-top { flex-wrap: wrap; } .es-modes { order: 3; width: 100%; } .es-modes button { flex: 1; }
.es-mcats { grid-template-columns: 1fr; }
}
.es-model { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; position: relative; padding-right: 36px; }
.es-model em { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.es-hist .es-none { grid-column: 1 / -1; }
@media (max-width: 860px) { .es-x { margin-left: auto; } }
/* ═══════════════ GENERADORES PASO A PASO (gx) — Imagen · Video ═══════════════ */
#gen.gx { display: flex; flex-direction: column; place-items: stretch; padding: 0; background: #0a0b0c; color: #e9ecef; font-family: "Inter", system-ui, sans-serif; overflow: auto; }
#gen.gx[hidden] { display: none; }
.gx .p { color: var(--t-prompt); } .gx .kw { color: var(--t-kw); } .gx .c { color: var(--t-com); } .gx .n { color: var(--t-str); } .gx .s { color: var(--t-str); } .gx .fn { color: var(--t-fn); }
.gx-top { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: rgba(10,11,12,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #1d2125; }
.gx-top .gx-k { flex: 1; font: 600 13px "JBMono", ui-monospace, monospace; color: #c9ccd0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-back, .gx-x { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #15181b; color: #fff; font-size: 16px; }
.gx-lbl { font: 600 12px "JBMono", ui-monospace, monospace; color: var(--t-com); margin: 0 0 10px; }
.gx-lbl::before { content: "// "; }
.gx-note { font-size: 14px; line-height: 1.5; color: #9aa3ab; } .gx-note b { color: #fff; } .gx-note .c { font: 600 12px "JBMono", monospace; }
.gx-sub { font-size: 15px; line-height: 1.45; color: #9aa3ab; margin-bottom: 14px; }
/* puerta */
.gx-gate { width: min(1000px, 100%); margin: 0 auto; padding: clamp(24px, 5vw, 56px) 18px 60px; }
.gx-lead { font: 700 clamp(28px, 4vw, 44px)/1.05 "Inter", sans-serif; letter-spacing: -.03em; color: #fff; margin-bottom: 22px; }
.gx-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 40px; }
.gx-door { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 250px; padding: 26px; border-radius: 22px; text-align: left; background: #111315; border: 1.5px solid #23272c; transition: border-color 200ms ease, transform 200ms var(--ease-out); }
.gx-door:active { transform: scale(.985); }
@media (hover: hover) { .gx-door:hover { border-color: #fff; } }
.gx-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: #1a1d21; color: #fff; } .gx-ico svg { width: 26px; height: 26px; }
.gx-door b { font: 700 clamp(30px, 3.4vw, 42px) "Inter", sans-serif; letter-spacing: -.03em; color: #fff; }
.gx-door > span:not(.gx-ico) { font-size: 16px; line-height: 1.45; color: #aab2b9; }
.gx-door em { margin-top: auto; font: 600 13px "JBMono", monospace; font-style: normal; color: var(--t-str); }
.gx-lib { margin-bottom: 28px; }
.gx-lib-row { display: flex; flex-wrap: wrap; gap: 8px; }
.gx-el { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; background: #15181b; border: 1px solid #23272c; }
.gx-el img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .gx-el b { font: 600 13px "JBMono", monospace; color: var(--t-kw); } .gx-el button { color: #6c757d; font-size: 11px; }
.gx-el-new { padding: 8px 14px; border-radius: 999px; border: 1px dashed #3a3f45; font: 600 13px "JBMono", monospace; color: var(--t-str); }
.gx-hist { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
.gx-hist a { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #15181b; } .gx-hist img, .gx-hist video { width: 100%; height: 100%; object-fit: cover; }
/* flujo */
.gx-flow { width: min(1240px, 100%); margin: 0 auto; padding: 22px 18px 80px; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.gx-steps { list-style: none; display: grid; gap: 10px; }
.gx-step { border-radius: 18px; background: #0f1113; border: 1px solid #1d2125; transition: border-color 200ms ease; }
.gx-step.now { border-color: #3a3f45; background: #111315; }
.gx-step.next { opacity: .45; }
.gx-sh { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-align: left; flex-wrap: wrap; }
.gx-sh:disabled { cursor: default; }
.gx-n { font: 700 14px "JBMono", monospace; color: var(--t-fn); }
.gx-step.done .gx-n::after { content: " ✓"; color: var(--t-prompt); }
.gx-st { font: 700 18px "Inter", sans-serif; letter-spacing: -.01em; color: #fff; }
.gx-step.next .gx-st { color: #8b949c; }
.gx-sum { flex-basis: 100%; padding-left: 36px; font-size: 14px; color: #9aa3ab; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-edit { position: absolute; right: 0; } .gx-step.done .gx-sh { position: relative; }
.gx-step.done .gx-edit { position: static; margin-left: auto; font: 600 12px "JBMono", monospace; color: var(--t-str); order: 2; }
.gx-step.done .gx-sum { order: 3; }
.gx-sb { padding: 0 18px 18px 54px; }
.gx-nav { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.gx-next { min-height: 48px; padding: 0 22px; border-radius: 12px; background: #fff; color: #000; font: 700 16px "Inter", sans-serif; transition: opacity 160ms ease, transform 160ms ease; }
.gx-next:disabled { opacity: .3; } .gx-next:active { transform: scale(.97); }
.gx-need { font-size: 14px; color: #9aa3ab; }
.gx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .gx-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gx-card { display: grid; align-content: start; gap: 5px; padding: 16px; border-radius: 14px; background: #15181b; border: 1.5px solid #23272c; text-align: left; transition: border-color 160ms ease, transform 160ms ease; }
.gx-card:active { transform: scale(.98); }
@media (hover: hover) { .gx-card:hover { border-color: #5a6068; } }
.gx-card.on { border-color: #fff; }
.gx-card b { font: 700 16px "Inter", sans-serif; color: #fff; } .gx-card span { font-size: 14px; line-height: 1.4; color: #9aa3ab; } .gx-card em { font: 500 12px "JBMono", monospace; font-style: normal; color: var(--t-str); margin-top: 4px; }
.gx-slot { padding: 14px 0; border-top: 1px solid #1d2125; } .gx-slot:first-child { border-top: 0; padding-top: 0; }
.gx-slot-h b { font: 700 16px "Inter", sans-serif; color: #fff; } .gx-slot-h p { font-size: 14px; color: #8b949c; margin: 3px 0 10px; }
.gx-tag { font: 600 11px "JBMono", monospace; color: var(--t-com); } .gx-tag.need { color: var(--t-str); }
.gx-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.gx-pe { width: 92px; display: grid; gap: 5px; text-align: left; }
.gx-pe img, .gx-plus { width: 92px; height: 92px; border-radius: 12px; object-fit: cover; border: 2px solid transparent; transition: border-color 160ms ease; }
.gx-pe span:last-child { font: 500 11px "JBMono", monospace; color: #8b949c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-pe.on img { border-color: var(--t-kw); } .gx-pe.on span:last-child { color: var(--t-kw); }
.gx-plus { display: grid; place-items: center; border: 1.5px dashed #3a3f45; font-size: 26px; color: var(--t-str); background: #111315; }
.gx-frame { display: flex; gap: 14px; padding: 12px; border-radius: 14px; border: 1.5px dashed #2a2e33; margin-bottom: 10px; }
.gx-frame.has { border-style: solid; border-color: var(--t-fn); }
.gx-fimg { flex: none; width: 120px; aspect-ratio: 1; border-radius: 10px; background: #15181b; display: grid; place-items: center; overflow: hidden; font: 700 28px "JBMono", monospace; color: #3a3f45; }
.gx-fimg img { width: 100%; height: 100%; object-fit: cover; }
.gx-fi b { font: 700 16px "Inter", sans-serif; color: #fff; } .gx-fi p { font-size: 14px; color: #8b949c; margin: 3px 0 10px; }
.gx-src { display: flex; flex-wrap: wrap; gap: 6px 16px; } .gx-src button { font: 600 13px "JBMono", monospace; color: var(--t-str); padding: 4px 0; } .gx-src .rm { color: var(--t-com); }
.gx-field { display: grid; gap: 8px; margin-bottom: 16px; } .gx-field > span { font: 700 15px "Inter", sans-serif; color: #fff; } .gx-field > span em { font-weight: 400; font-style: normal; color: #8b949c; font-size: 13px; margin-left: 4px; }
.gx-field textarea, .gx-field input { width: 100%; padding: 12px 14px; border-radius: 12px; background: #15181b; border: 1.5px solid #23272c; color: #fff; font: 400 16px/1.5 "Inter", sans-serif; outline: none; resize: vertical; }
.gx-field textarea:focus, .gx-field input:focus { border-color: #fff; }
.gx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gx-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 999px; background: #15181b; border: 1.5px solid #23272c; font: 500 14px "Inter", sans-serif; color: #c9ccd0; transition: border-color 160ms ease, color 160ms ease, transform 160ms ease; }
.gx-chip:active { transform: scale(.97); } .gx-chip.on { border-color: #fff; color: #fff; background: #1d2125; }
.gx-chip small { font: 500 11px "JBMono", monospace; color: #6c757d; }
.gx-ar i { display: inline-block; height: 14px; max-width: 24px; border: 1.5px solid currentColor; border-radius: 2px; }
.gx-models { display: grid; gap: 6px; }
.gx-model { display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px; background: #15181b; border: 1.5px solid #23272c; text-align: left; }
.gx-model.on { border-color: #fff; }
.gx-model b { font: 700 15px "Inter", sans-serif; color: #fff; } .gx-model b i { font: 600 11px "JBMono", monospace; font-style: normal; color: var(--t-prompt); margin-left: 6px; }
.gx-mt { font: 500 12px "JBMono", monospace; color: var(--t-str); } .gx-model span:last-child { font-size: 13px; color: #8b949c; }
.gx-go { width: 100%; min-height: 58px; border-radius: 14px; background: #fff; color: #000; font: 700 18px "Inter", sans-serif; transition: transform 160ms ease, opacity 160ms ease; }
.gx-go:active { transform: scale(.98); } .gx-go:disabled { opacity: .5; }
.gx-load { margin-top: 12px; font: 600 13px "JBMono", monospace; color: #c9ccd0; white-space: pre; overflow: hidden; } .gx-load b { color: var(--t-prompt); font-weight: 600; } .gx-load b i { color: #2a2e33; font-style: normal; } .gx-load em { font-style: normal; color: var(--t-com); }
.gx-load.ko b { color: #ff6b6b; }
.gx-err { margin-top: 10px; font-size: 14px; color: #ff8a8a; }
/* lado derecho: guion en código + resultado */
.gx-side { position: sticky; top: 80px; display: grid; gap: 14px; }
.gx-code-w { padding: 16px; border-radius: 16px; background: #060707; border: 1px solid #1d2125; }
.gx-code { margin: 0; font: 500 13px/1.7 "JBMono", ui-monospace, monospace; color: #c9ccd0; white-space: pre-wrap; word-break: break-word; }
.gx-code .pr { color: #e9ecef; }
.gx-res { padding: 14px; border-radius: 16px; background: #111315; border: 1px solid #2a2e33; }
.gx-media { border-radius: 12px; overflow: hidden; background: #000; display: grid; place-items: center; }
.gx-media img, .gx-media video { width: 100%; max-height: 60vh; object-fit: contain; }
.gx-sim { position: relative; width: 100%; } .gx-sim img { width: 100%; max-height: 50vh; object-fit: contain; opacity: .5; filter: blur(2px) grayscale(1); }
.gx-sim p { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 9px 11px; border-radius: 10px; background: rgba(0,0,0,.75); font: 600 12px "JBMono", monospace; color: #fff; }
.gx-acts { display: grid; gap: 6px; margin-top: 12px; }
.gx-acts button, .gx-acts a { min-height: 44px; display: grid; place-items: center; border-radius: 12px; background: #1a1d21; border: 1px solid #2a2e33; font: 600 14px "Inter", sans-serif; color: #fff; }
.gx-acts .main { background: #fff; color: #000; border-color: #fff; }
/* ventanitas */
.gx-modal { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.8); }
.gx-modal[hidden] { display: none; }
.gx-mw { width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border-radius: 18px; background: #111315; border: 1px solid #2a2e33; display: grid; gap: 14px; }
.gx-mw .gx-k { font: 600 13px "JBMono", monospace; color: #c9ccd0; }
.gx-mw h4 { font: 700 24px "Inter", sans-serif; letter-spacing: -.02em; color: #fff; }
.gx-name { display: flex; align-items: center; gap: 2px; padding: 0 12px; border-radius: 12px; background: #15181b; border: 1.5px solid #23272c; font: 600 15px "JBMono", monospace; }
.gx-name input { flex: 1; min-height: 48px; background: none; border: 0; outline: none; color: var(--t-str); font: inherit; }
.gx-imgs { display: flex; flex-wrap: wrap; gap: 8px; } .gx-imgs span { position: relative; } .gx-imgs img { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; }
.gx-imgs span button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; }
.gx-add { width: 96px; height: 96px; border-radius: 10px; border: 1.5px dashed #3a3f45; font: 600 13px "JBMono", monospace; color: var(--t-str); }
.gx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; } .gx-grid button { aspect-ratio: 1; border-radius: 10px; overflow: hidden; } .gx-grid img { width: 100%; height: 100%; object-fit: cover; }
.gx-mact { display: flex; justify-content: flex-end; gap: 22px; } .gx-mact button { font: 600 14px "JBMono", monospace; color: #9aa3ab; } .gx-mact .gx-save { color: var(--t-str); }
@media (max-width: 980px) { .gx-flow { grid-template-columns: 1fr; } .gx-side { position: static; } .gx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gx-doors, .gx-cards, .gx-cards.two { grid-template-columns: 1fr; } .gx-door { min-height: 0; } .gx-sb { padding-left: 18px; } .gx-sum { padding-left: 0; } .gx-frame { flex-direction: column; } .gx-fimg { width: 100%; aspect-ratio: 16/9; } }
.gx-step, .gx-sh, .gx-sb { min-width: 0; } .gx-sum { min-width: 0; max-width: 100%; }
.gx-steps { min-width: 0; } .gx-hist .gx-note { grid-column: 1 / -1; }
/* ═══════════════ CLASES: ruta · lección · tu película · temáticas ═══════════════ */
.ru-top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 10px 0 34px; padding: 18px 20px; border-radius: 18px; background: #0f1113; border: 1px solid #1d2125; }
.ru-prog { flex: 1 1 240px; } .ru-prog p { font-size: 15px; color: #9aa3ab; margin-bottom: 8px; } .ru-prog b { color: #fff; font-size: 20px; }
.ru-bar { height: 6px; border-radius: 99px; background: #1d2125; overflow: hidden; } .ru-bar i { display: block; height: 100%; background: #fff; border-radius: 99px; transition: width 600ms var(--ease-out); }
.ru-peli-link { font: 600 14px "JBMono", monospace; color: var(--t-str); }
.ru-seguir { min-height: 48px; padding: 0 22px; border-radius: 12px; background: #fff; color: #000; font: 700 16px "Inter", sans-serif; transition: transform 160ms ease; } .ru-seguir:active { transform: scale(.97); }
.ru-b { margin-bottom: 30px; }
.ru-bh { position: relative; display: grid; gap: 4px; margin-bottom: 12px; padding-right: 60px; }
.ru-bn { font: 600 12px "JBMono", monospace; color: var(--t-fn); text-transform: lowercase; }
.ru-bh h3 { font: 700 clamp(26px, 3.2vw, 38px) "Inter", sans-serif; letter-spacing: -.03em; color: #fff; }
.ru-bh p { font-size: 16px; color: #9aa3ab; } .ru-bc { position: absolute; right: 0; top: 4px; font: 600 14px "JBMono", monospace; color: var(--t-str); }
.ru-l { list-style: none; display: grid; gap: 6px; }
.ru-m, .ru-et { width: 100%; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #111315; border: 1px solid #1d2125; text-align: left; transition: border-color 160ms ease, transform 160ms ease; }
.ru-m:active { transform: scale(.99); }
@media (hover: hover) { .ru-m:not(:disabled):hover { border-color: #5a6068; } }
.ru-n { font: 700 14px "JBMono", monospace; color: var(--t-fn); } .ru-t { font: 600 17px "Inter", sans-serif; color: #fff; } .ru-mt { font: 500 13px "JBMono", monospace; color: #8b949c; white-space: nowrap; }
.ru-m.ok .ru-mt { color: var(--t-prompt); } .ru-m.ok .ru-n::after { content: " ✓"; color: var(--t-prompt); }
.ru-m.pronto { opacity: .4; cursor: default; }
.ru-et { background: #0c0d0e; border-style: dashed; border-color: #3a3f45; } .ru-et .ru-t { color: var(--t-str); font-weight: 600; } .ru-et.ok { border-style: solid; border-color: var(--t-prompt); } .ru-et.ok .ru-mt { color: var(--t-prompt); }
/* lección */
#leccion { position: fixed; inset: 0; z-index: 118; overflow: auto; background: #0a0b0c; color: #e9ecef; font-family: "Inter", system-ui, sans-serif; }
#leccion[hidden] { display: none; }
#leccion .p { color: var(--t-prompt); } #leccion .kw { color: var(--t-kw); } #leccion .c { color: var(--t-com); }
.lz-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: rgba(10,11,12,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #1d2125; }
.lz-k { flex: 1; font: 600 13px "JBMono", monospace; color: #c9ccd0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lz-x { width: 40px; height: 40px; border-radius: 50%; background: #15181b; color: #fff; }
.lz-in { width: min(860px, 100%); margin: 0 auto; padding: clamp(22px, 4vw, 44px) 18px 60px; }
.lz-h { font: 700 clamp(30px, 4.4vw, 52px)/1.05 "Inter", sans-serif; letter-spacing: -.035em; color: #fff; margin-bottom: 22px; }
.lz-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 28px; }
.lz-steps button { width: 100%; display: grid; gap: 8px; padding: 10px 0 0; border-top: 3px solid #23272c; text-align: left; font: 600 14px "Inter", sans-serif; color: #6c757d; transition: border-color 200ms ease, color 200ms ease; }
.lz-steps span { font: 700 12px "JBMono", monospace; }
.lz-steps .done button { border-color: #8b949c; color: #9aa3ab; } .lz-steps .now button { border-color: #fff; color: #fff; }
.lz-body { min-height: 300px; animation: genIn 320ms var(--ease-out); }
.lz-lbl { font: 600 12px "JBMono", monospace; color: var(--t-com); margin: 0 0 10px; } .lz-lbl::before { content: "// "; }
.lz-logro { font: 600 clamp(22px, 2.6vw, 28px)/1.3 "Inter", sans-serif; letter-spacing: -.02em; color: #fff; margin-bottom: 28px; }
.lz-pasos { list-style: none; counter-reset: p; display: grid; gap: 10px; margin-bottom: 28px; }
.lz-pasos li { counter-increment: p; display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: baseline; padding: 14px 16px; border-radius: 14px; background: #111315; border: 1px solid #1d2125; font-size: 18px; line-height: 1.45; color: #e9ecef; }
.lz-pasos li::before { content: counter(p, decimal-leading-zero); font: 700 14px "JBMono", monospace; color: var(--t-fn); }
.lz-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lz-need { padding-left: 20px; font-size: 16px; color: #c9ccd0; line-height: 1.6; }
.lz-mal { padding: 14px 16px; border-radius: 14px; border: 1px solid #3a2a2a; background: #150f0f; } .lz-mal p:last-child { font-size: 16px; color: #e9c9c9; line-height: 1.45; }
.lz-sub { font-size: 17px; line-height: 1.5; color: #aab2b9; margin-bottom: 16px; }
.lz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.lz-grid button { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #111315; }
.lz-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease-out); }
@media (hover: hover) { .lz-grid button:hover img { transform: scale(1.04); } }
.lz-grid i { position: absolute; left: 8px; top: 6px; font-style: normal; color: #fff; text-shadow: 0 1px 6px #000; }
.lz-grid span, .tm-c { position: absolute; left: 8px; bottom: 6px; font: 600 11px "JBMono", monospace; color: #fff; text-shadow: 0 1px 6px #000; }
.lz-grid button.err { outline: 1px solid rgba(255,107,107,.45); }
.lz-more { font: 600 14px "JBMono", monospace; color: var(--t-str); }
.lz-q { font: 700 clamp(22px, 2.6vw, 28px)/1.3 "Inter", sans-serif; letter-spacing: -.02em; color: #fff; margin-bottom: 18px; }
.lz-ops { display: grid; gap: 8px; }
.lz-ops button { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; padding: 16px; border-radius: 14px; background: #111315; border: 1.5px solid #23272c; text-align: left; font-size: 17px; color: #e9ecef; transition: border-color 160ms ease, transform 160ms ease; }
.lz-ops button:not(:disabled):active { transform: scale(.99); }
@media (hover: hover) { .lz-ops button:not(:disabled):hover { border-color: #5a6068; } }
.lz-ops span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #1d2125; font: 700 13px "JBMono", monospace; color: #c9ccd0; }
.lz-ops .ok { border-color: var(--t-prompt); } .lz-ops .ok span { background: var(--t-prompt); color: #000; }
.lz-ops .ko { border-color: #ff6b6b; } .lz-ops .ko span { background: #ff6b6b; color: #000; }
.lz-fb { margin-top: 14px; font-size: 17px; color: #fff; min-height: 1.4em; }
.lz-go { display: inline-grid; place-items: center; min-height: 54px; padding: 0 26px; border-radius: 14px; background: #fff; color: #000; font: 700 17px "Inter", sans-serif; }
.lz-peli { width: 100%; padding: 14px 16px; border-radius: 14px; background: #15181b; border: 1.5px solid #23272c; color: #fff; font: 400 17px/1.5 "Inter", sans-serif; outline: none; resize: vertical; }
.lz-peli:focus { border-color: #fff; } .lz-saved { margin-top: 8px; font: 600 13px "JBMono", monospace; color: var(--t-prompt); min-height: 1em; }
.lz-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 34px; padding-top: 20px; border-top: 1px solid #1d2125; }
.lz-prev { min-height: 50px; padding: 0 18px; border-radius: 12px; background: #15181b; color: #c9ccd0; font: 600 15px "Inter", sans-serif; } .lz-prev:disabled { opacity: .3; }
.lz-next { min-height: 50px; padding: 0 22px; border-radius: 12px; background: #fff; color: #000; font: 700 16px "Inter", sans-serif; transition: transform 160ms ease; } .lz-next:active { transform: scale(.97); }
@media (max-width: 700px) { .lz-steps button { font-size: 0; } .lz-steps span { font-size: 12px; } .lz-two { grid-template-columns: 1fr; } .lz-grid { grid-template-columns: repeat(2, 1fr); } .lz-next { flex: 1; } }
/* tu película */
.pelicula, .temas { padding: clamp(60px, 9vw, 120px) var(--pad, 24px); max-width: 1280px; margin: 0 auto; }
.pe-g { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 4vw, 48px); margin-top: 28px; }
.pe-lbl { font: 600 12px "JBMono", monospace; color: var(--t-com); margin-bottom: 12px; } .pe-lbl::before { content: "// "; }
.pe-etapas { list-style: none; display: grid; gap: 8px; }
.pe-etapas li { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 16px; border-radius: 14px; background: #111315; border: 1px solid #1d2125; }
.pe-etapas li.ok { border-color: var(--t-prompt); }
.pe-n { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #1d2125; font: 700 14px "JBMono", monospace; color: var(--t-fn); }
.pe-etapas li.ok .pe-n { background: var(--t-prompt); color: #000; }
.pe-etapas b { font: 700 17px "Inter", sans-serif; color: #fff; } .pe-etapas p { font-size: 15px; line-height: 1.45; color: #9aa3ab; margin-top: 3px; }
.pe-yo { color: #c9ccd0 !important; } .pe-yo .c { color: var(--t-com); font: 600 12px "JBMono", monospace; }
.pe-rub { list-style: none; display: grid; gap: 2px; margin-bottom: 26px; }
.pe-rub li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid #1d2125; }
.pe-rub b { font: 600 16px "Inter", sans-serif; color: #fff; } .pe-rub .n { font: 700 14px "JBMono", monospace; color: var(--t-str); } .pe-rub p { grid-column: 1 / -1; font-size: 14px; color: #8b949c; }
.pe-tot b, .pe-tot .n { font-size: 18px; }
.pe-form { display: grid; gap: 8px; padding: 18px; border-radius: 16px; background: #111315; border: 1px solid #23272c; }
.pe-form input, .pe-form textarea { width: 100%; padding: 13px 14px; border-radius: 12px; background: #15181b; border: 1.5px solid #23272c; color: #fff; font: 400 16px "Inter", sans-serif; outline: none; resize: vertical; }
.pe-form input:focus, .pe-form textarea:focus { border-color: #fff; }
.pe-form button { min-height: 54px; border-radius: 12px; background: #fff; color: #000; font: 700 17px "Inter", sans-serif; margin-top: 6px; }
.pe-st { font-size: 15px; color: var(--t-prompt); min-height: 1em; }
@media (max-width: 860px) { .pe-g { grid-template-columns: 1fr; } }
/* temáticas */
.tm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 14px; }
.tm-tabs button { min-height: 42px; padding: 0 16px; border-radius: 999px; background: #111315; border: 1.5px solid #23272c; font: 600 15px "Inter", sans-serif; color: #c9ccd0; transition: border-color 160ms ease; }
.tm-tabs button span { font: 500 12px "JBMono", monospace; color: var(--t-str); margin-left: 4px; }
.tm-tabs button.on { border-color: #fff; color: #fff; background: #1d2125; }
.tm-d { font-size: 17px; color: #9aa3ab; margin-bottom: 18px; }
.tm-grid { columns: 4 220px; column-gap: 10px; }
.tm-grid button { position: relative; display: block; width: 100%; margin-bottom: 10px; break-inside: avoid; border-radius: 12px; overflow: hidden; background: #111315; }
.tm-ph { position: relative; display: block; } .tm-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-ph i { position: absolute; left: 10px; top: 8px; font-style: normal; color: #fff; text-shadow: 0 1px 6px #000; }
.tm-grid button.err { outline: 1px solid rgba(255,107,107,.45); }
.tm-more { display: block; margin: 18px auto 0; font: 600 15px "JBMono", monospace; color: var(--t-str); padding: 10px; }
.ru-et, .ru-peli-link, .lz-more, a.lz-go { text-decoration: none; }
.reel-sub { display: grid; gap: 10px; max-width: 720px; }
.reel-sub p { margin: 0; color: #aab2b9; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.45; }
.reel-sub b { color: #fff; font-weight: 600; }
/* acceso: el correo como una línea de terminal + botón escrito como función */
.acc .s-term { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; width: min(560px, 100%); margin: 0 auto; padding: 11px 14px; border-radius: 10px;
background: rgba(6,7,8,.78); border: 1px solid #2a2e33; font: 500 15px/1.4 "JBMono", ui-monospace, monospace; text-align: left; cursor: text; transition: border-color 160ms ease; }
.acc .s-term:focus-within { border-color: var(--t-prompt); }
.acc .s-term .u { color: var(--t-prompt); } .acc .s-term .pth { color: var(--t-com); } .acc .s-term .kw { color: var(--t-kw); } .acc .s-term .fl { color: var(--t-fn); }
.acc .s-term input { flex: 1 1 180px; min-width: 0; padding: 2px 0; background: none; border: 0; outline: none; box-shadow: none; color: var(--t-str); font: inherit; caret-color: var(--t-prompt); }
.acc .s-term input::placeholder { color: #4a5057; }
.acc .s-hint { margin: 8px auto 0; font: 500 12px "JBMono", monospace; } .acc .s-hint .c { color: var(--t-com); }
.acc .s-btn.cmd { width: auto; min-height: 42px; margin: 16px auto 0; padding: 0 16px; border-radius: 10px; background: #0b0d0f; border: 1px solid #2f343a; box-shadow: none;
font: 600 14px "JBMono", ui-monospace, monospace; letter-spacing: 0; text-transform: none; color: #e9ecef; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.acc .s-btn.cmd .p { color: var(--t-prompt); } .acc .s-btn.cmd .fn { color: var(--t-fn); } .acc .s-btn.cmd .c { color: var(--t-com); }
@media (hover: hover) and (pointer: fine) { .acc .s-btn.cmd:hover { border-color: var(--t-prompt); background: #0f1417; } }
.acc .s-btn.cmd:active { transform: scale(.97); }
.acc .s-btn.cmd::before, .acc .s-btn.cmd::after { content: none; }
/* acceso: casilla normal + la línea de código que se escribe en vivo con lo que pones */
.acc .s-live { width: min(520px, 100%); margin: 0 auto 10px; font: 500 13px/1.5 "JBMono", ui-monospace, monospace; color: #9aa3ab; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc .s-live .u { color: var(--t-prompt); } .acc .s-live .pth { color: var(--t-com); } .acc .s-live .kw { color: var(--t-kw); } .acc .s-live .fl { color: var(--t-fn); } .acc .s-live .s { color: var(--t-str); }
.acc .s-live b { font-weight: 500; } .acc .s-live b.ph { opacity: .45; }
.acc .s-live .caret { display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--t-prompt); animation: blink 1s steps(1) infinite; }
.acc .s-mail { display: grid; gap: 6px; width: min(520px, 100%); margin: 0 auto; text-align: left; }
.acc .s-mail span { font: 600 14px "Inter", system-ui, sans-serif; color: #c9ccd0; }
.acc .s-mail input { min-height: 54px; padding: 0 16px; border-radius: 12px; background: rgba(14,15,17,.86); border: 1.5px solid #34393f; color: #fff; font: 500 18px "Inter", system-ui, sans-serif; outline: none; transition: border-color 160ms ease, box-shadow 160ms ease; }
.acc .s-mail input::placeholder { color: #5c636b; }
.acc .s-mail input:focus { border-color: #fff; box-shadow: 0 0 0 4px rgba(95,215,255,.14); }
.acc .s-btn.friendly { width: min(520px, 100%); min-height: 54px; margin: 12px auto 0; border-radius: 12px; background: #fff; color: #000; border: 0; font: 700 17px "Inter", system-ui, sans-serif; letter-spacing: 0; text-transform: none; box-shadow: none; transition: transform 160ms ease; }
.acc .s-btn.friendly::before, .acc .s-btn.friendly::after { content: none; }
.acc .s-btn.friendly:active { transform: scale(.98); }
.acc .s-code { margin-top: 10px; font: 500 12px "JBMono", monospace; color: var(--t-com); }
@keyframes blink { 50% { opacity: 0; } }
/* botón del correo: compacto y elegante (no una barra gigante) */
.acc .s-btn.friendly { width: auto; min-width: 0; min-height: 44px; margin: 14px auto 0; padding: 0 22px; border-radius: 999px; font: 600 15px "Inter", system-ui, sans-serif; background: #fff; color: #000; }
@media (hover: hover) and (pointer: fine) { .acc .s-btn.friendly:hover { background: #e9ecef; } }
.acc .s-code { margin-top: 8px; font-size: 11px; opacity: .8; }
.acc .s-btn.friendly { height: 44px !important; min-height: 44px !important; padding: 0 22px !important; line-height: 1 !important; }
/* todos los botones del acceso: píldora compacta (Aponte: "muy grande, más estético") */
.acc .s-btn:not(.cmd) { width: auto !important; min-width: 0; height: 44px !important; min-height: 44px !important; margin: 14px auto 0; padding: 0 22px !important; border-radius: 999px !important;
display: inline-flex; align-items: center; justify-content: center; font: 600 15px/1 "Inter", system-ui, sans-serif !important; letter-spacing: 0; text-transform: none; background: #fff; color: #000; border: 0; box-shadow: none; }
.acc .acc-stage { text-align: center; }
/* línea de código EDITABLE: se borra y se escribe como código */
.acc .s-live { cursor: text; }
.acc .s-live-v { display: inline-block; min-width: 1ch; outline: none; color: var(--t-str); caret-color: var(--t-prompt); border-bottom: 1px dashed transparent; transition: border-color 160ms ease; }
.acc .s-live-v:empty::before { content: attr(data-ph); opacity: .45; }
.acc .s-live-v:focus { border-bottom-color: rgba(95,215,255,.5); }
.acc .s-live:hover .s-live-v { border-bottom-color: rgba(255,255,255,.2); }
/* botón aún más minimalista */
.acc .s-btn:not(.cmd) { height: 36px !important; min-height: 36px !important; padding: 0 16px !important; font: 500 14px/1 "Inter", system-ui, sans-serif !important;
background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.35) !important; transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease; }
@media (hover: hover) and (pointer: fine) { .acc .s-btn:not(.cmd):hover { background: #fff !important; color: #000 !important; border-color: #fff !important; } }
.acc .s-btn:not(.cmd):active { transform: scale(.97); }
/* el logo de código se vuelve el logo gráfico real */
.acc .s-logo-w { position: relative; width: fit-content; margin: 0 auto 20px; }
.acc .s-logo-w .s-logo { margin: 0; }
.acc .s-logo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; clip-path: inset(0 100% 0 0); pointer-events: none; }
/* correo: casilla sin etiqueta y la tecla ↵ enter (como en código, sin botón grande) */
.acc .s-btn.key { width: auto !important; height: 28px !important; min-height: 28px !important; margin: 12px auto 0; padding: 0 10px !important; border-radius: 6px !important;
background: rgba(255,255,255,.04) !important; color: #c9ccd0 !important; border: 1px solid rgba(255,255,255,.22) !important; border-bottom-width: 2px !important;
font: 500 12px/1 "JBMono", ui-monospace, monospace !important; letter-spacing: .02em; text-transform: none; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .acc .s-btn.key:hover { color: #fff !important; border-color: var(--t-prompt) !important; background: rgba(95,215,255,.08) !important; } }
.acc .s-btn.key:active { transform: translateY(1px); border-bottom-width: 1px !important; }
.acc .s-mail input { min-height: 48px; font-size: 17px; }
/* ═══ TERMINAL REAL: blanco y negro + un solo toque de color (cian: prompt y cursor) — Aponte 28-09 ═══ */
:root {
--t-kw: #ffffff; /* comandos y palabras clave: blanco */
--t-str: #e3e6e9; /* textos y valores: blanco suave */
--t-fn: #aab2b9; /* nombres, números de paso: gris claro */
--t-com: #6c757d; /* comentarios: gris */
/* --t-prompt (cian) queda SOLO para el prompt y el cursor */
}
.g-code .k, .t-l .gt, .t-q .gt, .t-gt { font-weight: 700; }
.acc .s-live .kw, .gx .kw, #leccion .kw, .es-k .kw { font-weight: 700; }
/* logo en código más fino y exacto (84 columnas) */
.acc .s-logo { font-size: clamp(4.4px, 0.86vw, 7px) !important; line-height: 1 !important; letter-spacing: 0 !important; }
/* intro: el fondo se VE (antes 55 % y un velo muy oscuro) */
#gate .acc-vid { opacity: calc(.88 + var(--lvl) * .12) !important; filter: grayscale(1) contrast(1.12) brightness(1.08) !important; }
#gate .acc-shade { background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,0) 100%) !important; opacity: calc(1 - var(--lvl) * .5); }
#gate:has(.acc.simple:not([hidden])) .acc-shade { background: radial-gradient(60% 55% at 50% 50%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.3) 65%, rgba(0,0,0,.1) 100%) !important; }
.g-code, .g-prompt, .g-term { text-shadow: 0 1px 12px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9); }
/* GRANO DE PELÍCULA sobre el fondo de la intro (Aponte: "se ven mucho") */
#gate .g-grain { position: absolute; inset: -60px; z-index: 1; pointer-events: none; opacity: .34; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
animation: gGrain .42s steps(4) infinite; }
@keyframes gGrain { 0% { transform: translate(0, 0); } 25% { transform: translate(-22px, 14px); } 50% { transform: translate(18px, -26px); } 75% { transform: translate(-12px, -10px); } 100% { transform: translate(0, 0); } }
#gate .acc-vid { filter: grayscale(1) contrast(1.18) brightness(.92) blur(.25px) !important; }
@media (prefers-reduced-motion: reduce) { #gate .g-grain { animation: none; } }
/* punto medio: se ve el contenido, pero como película detrás del código */
#gate .acc-vid { opacity: calc(.78 + var(--lvl) * .2) !important; filter: grayscale(1) contrast(1.15) brightness(.78) blur(.3px) !important; }
#gate .acc-shade { background: radial-gradient(75% 70% at 38% 50%, rgba(0,0,0,.62) 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,.18) 100%) !important; }
#gate .g-grain { opacity: .5; }
/* correo como línea de código: negro transparente, letra de código y cursor de bloque */
.acc .s-mail.code { display: flex; align-items: center; gap: 10px; width: min(460px, 100%); margin: 0 auto; padding: 0 16px; min-height: 50px; border-radius: 10px;
background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color 200ms ease, background 200ms ease; cursor: text; }
.acc .s-mail.code:focus-within { border-color: rgba(125,211,252,.45); background: rgba(0,0,0,.55); }
.acc .s-pr { font: 600 16px "JBMono", ui-monospace, monospace; color: #7dd3fc; }
.acc .s-inw { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.acc .s-mail.code input { width: 100%; min-height: 48px; padding: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none;
font: 500 16px "JBMono", ui-monospace, monospace !important; color: #fff; caret-color: transparent; letter-spacing: 0; }
.acc .s-mir { position: absolute; left: 0; top: 50%; visibility: hidden; white-space: pre; font: 500 16px "JBMono", ui-monospace, monospace; }
.acc .s-blk { position: absolute; left: 0; top: 50%; width: 9px; height: 19px; margin-top: -9.5px; background: #7dd3fc; box-shadow: 0 0 10px rgba(125,211,252,.55); opacity: 0; pointer-events: none; }
.acc .s-blk.on { opacity: 1; animation: blink 1.05s steps(1) infinite; }
/* fondo: menos exposición y más grano */
#gate .acc-vid { filter: grayscale(1) contrast(1.12) brightness(.6) blur(.35px) !important; }
#gate .g-grain { opacity: .68; }
:root { --t-prompt: #7dd3fc; --glowg: 0 0 10px rgba(125,211,252,.35); } /* un solo cian, más suave, en toda la web */
.acc .s-blk.on { animation: sBlk 1.05s steps(1, end) infinite !important; }
@keyframes sBlk { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.acc .s-mail.code .s-pr { color: #7dd3fc !important; }
/* fondo con menos exposición también en la pantalla del correo */
#gate .acc-vid { filter: grayscale(1) contrast(1.1) brightness(.5) blur(.35px) !important; }
#gate:has(.acc.simple:not([hidden])) .acc-shade { background: radial-gradient(60% 55% at 50% 50%, rgba(0,0,0,.66) 0%, rgba(0,0,0,.42) 65%, rgba(0,0,0,.25) 100%) !important; }
/* el código que crea cada casilla/botón (se escribe encima y se deshace) */
.acc .acc-stage { position: relative; }
.acc .s-bld { position: absolute; z-index: 3; display: flex; align-items: center; gap: 1px; padding: 0 12px; pointer-events: none; white-space: nowrap; overflow: hidden;
font: 500 13px "JBMono", ui-monospace, monospace; color: #e3e6e9; text-shadow: 0 1px 8px rgba(0,0,0,.95); }
.acc .s-bld i { width: 8px; height: 15px; background: #7dd3fc; box-shadow: 0 0 8px rgba(125,211,252,.5); }
/* sin el recuadro de cámara: nada de esquinas redondas, solo una viñeta suave de cine */
.g-crt { border-radius: 0 !important; box-shadow: inset 0 0 clamp(80px, 12vw, 200px) rgba(0,0,0,.55) !important; }
#cam { display: none !important; }
/* ACCESO = una sesión de terminal para obtener tu código (sin logo, sin títulos grandes) */
.acc .s-tl { width: min(460px, 100%); margin: 0 auto 16px; text-align: left; font: 500 14px/1.65 "JBMono", ui-monospace, monospace; text-shadow: 0 1px 10px rgba(0,0,0,.9); }
.acc .s-tl p { margin: 0; min-height: 1.65em; }
.acc .s-tl .cmd { color: #fff; } .acc .s-tl .cmd .u { color: #7dd3fc; } .acc .s-tl .cmd .pth { color: #6c757d; }
.acc .s-tl .c { color: #8b949c; }
.acc .s-tl .ok { color: #e3e6e9; }
.acc .s-otp { width: min(460px, 100%); margin: 0 auto; }
.acc .s-links { font: 500 12px "JBMono", monospace; } .acc .s-link { font: inherit; color: #8b949c; }
/* durante el acceso el fondo se apaga: todo se siente terminal (el contenido brilla en la intro) */
#gate.has-auth .acc-vid { filter: grayscale(1) contrast(1.1) brightness(.34) blur(.6px) !important; }
#gate.has-auth .g-grain { opacity: .55; }
/* ═══ TERMINAL VERDE (Aponte: "se ve más real y más tecnológico") — solo en lo que es terminal ═══ */
:root { --t-prompt: #7dd3fc; --t-green: #7dd3fc; --t-green-dim: #5b7b8f; --glowg: 0 0 10px rgba(125,211,252,.35); }
/* intro */
.g-code, .g-prompt { color: #7dd3fc !important; }
.g-code .c, .g-code .ln i, .g-prompt .p { color: #5b7b8f !important; }
.g-code .s, .g-code .n, .g-code .k, .g-code .f { color: #ffd580 !important; }
.g-prompt .u, .g-term .u { color: #7dd3fc !important; text-shadow: 0 0 10px rgba(125,211,252,.4); }
.g-code .caret, .g-prompt .caret { background: #7dd3fc !important; }
/* acceso */
.acc .s-tl .cmd, .acc .s-tl .ok { color: #ffd580; } .acc .s-tl .cmd .u { color: #7dd3fc; } .acc .s-tl .c { color: #5b7b8f; }
.acc .s-mail.code .s-pr, .acc .s-mail.code input { color: #7dd3fc !important; }
.acc .s-mail.code:focus-within { border-color: rgba(125,211,252,.45); }
.acc .s-blk, .acc .s-bld i { background: #7dd3fc !important; box-shadow: 0 0 10px rgba(125,211,252,.55) !important; }
.acc .s-bld { color: #ffd580; }
.acc .s-btn.key { color: #ffd580 !important; } @media (hover: hover) and (pointer: fine) { .acc .s-btn.key:hover { border-color: #7dd3fc !important; background: rgba(125,211,252,.08) !important; } }
.acc .s-cells i.on, .acc .s-otp .s-cells i { color: #7dd3fc; }
/* VERDE + BLANCO: el verde marca lo que es código; el blanco es lo que se lee */
.acc .s-tl .cmd, .acc .s-tl .ok, .acc .s-tl .c { color: #f1f3f5 !important; }
.acc .s-tl .g, .acc .s-tl .cmd .u { color: #7dd3fc !important; text-shadow: 0 0 8px rgba(125,211,252,.35); }
.acc .s-tl .cmd .pth { color: #5b7b8f !important; }
.acc .s-mail.code input { color: #fff !important; }
.acc .s-btn.key { color: #f1f3f5 !important; border-color: rgba(125,211,252,.35) !important; }
.acc .s-bld { color: #f1f3f5; }
.acc .s-cells i.on { color: #fff; }
/* intro: nombres del código en verde, textos entre comillas en blanco, comentarios en verde tenue */
.g-code { color: #7dd3fc !important; }
.g-code .s { color: #ffffff !important; }
.g-code .c { color: #5b7b8f !important; }
.g-prompt .c, .g-term .c { color: #ffffff !important; }
/* INICIO fluido: abre desde negro, desenfocado, y ENFOCA en un solo movimiento continuo */
#gate .acc-vid { transition: filter 2.6s cubic-bezier(.22,1,.36,1), opacity 1.4s ease !important; }
#gate.focusing .acc-vid { filter: grayscale(1) blur(18px) brightness(0) !important; transition: none !important; }
/* intro: el contenido se ve menos (más apagado y con más ruido) */
#gate .acc-vid { opacity: .72 !important; filter: grayscale(1) contrast(1.1) brightness(.44) blur(.4px) !important; }
#gate .g-grain { opacity: .62; }
/* acceso: cuando el mensaje se borra, el fondo se va a NEGRO y solo queda la barra (con el ruido encima) */
#gate.void .acc-vid { opacity: 0 !important; }
#gate.void .acc-shade { opacity: 1 !important; background: #000 !important; transition: background 1.4s ease; }
#gate.void .g-grain { opacity: .42; }
.acc .s-tl { width: min(640px, 100%) !important; }
/* casillas de la clave: mismo cursor de bloque verde que la barra del correo, y negras transparentes */
.acc .s-cells i { background: rgba(0,0,0,.42) !important; border-color: rgba(255,255,255,.14) !important; font: 600 24px "JBMono", ui-monospace, monospace !important; color: #fff !important; }
.acc .s-cells i.on { border-color: rgba(125,211,252,.4) !important; }
.acc .s-cells i.cur { border-color: rgba(125,211,252,.55) !important; box-shadow: 0 0 0 4px rgba(125,211,252,.1) !important; }
.acc .s-cells i.cur::after { width: 11px !important; height: 24px !important; background: #7dd3fc !important; box-shadow: 0 0 10px rgba(125,211,252,.55); animation: sBlk 1.05s steps(1, end) infinite !important; }
/* ═══ PUERTAS PRINCIPALES (skill apple-design): material oscuro translúcido, borde que "atrapa la luz",
respuesta instantánea al presionar, jerarquía por peso/tamaño y menos fondo para mantener el misterio ═══ */
.hub-vid { opacity: .55 !important; filter: grayscale(1) contrast(1.1) brightness(.34) blur(1.5px) !important; }
.hub-shade { background: radial-gradient(80% 70% at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,.85)) !important; }
.hub-grain { position: fixed; inset: -60px; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
animation: gGrain .42s steps(4) infinite; }
.hub-k { color: #7dd3fc !important; text-shadow: 0 0 10px rgba(125,211,252,.35) !important; font-size: 13px !important; letter-spacing: .02em; margin-bottom: 22px !important; }
.hub-doors { gap: 14px !important; }
.hub-door { position: relative; min-height: 270px !important; padding: 26px 26px 22px !important; border-radius: 20px !important; gap: 10px !important;
background: rgba(14,15,17,.52) !important; backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
border: 1px solid rgba(255,255,255,.08) !important; border-top-color: rgba(255,255,255,.2) !important;
box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04) !important;
transition: transform 220ms cubic-bezier(.23,1,.32,1), border-color 220ms ease, background 220ms ease !important; }
.hub-door:active { transform: scale(.98) !important; transition-duration: 100ms !important; }
@media (hover: hover) and (pointer: fine) {
.hub-door:hover { transform: translateY(-3px) !important; background: rgba(20,22,25,.62) !important; border-color: rgba(255,255,255,.16) !important; border-top-color: rgba(255,255,255,.3) !important; }
.hub-door:hover .hub-arr { transform: translateX(0); opacity: 1; }
.hub-door:hover .hub-cmd i { opacity: 1; }
}
.hub-n { font: 600 12px "JBMono", ui-monospace, monospace !important; color: #6c757d !important; letter-spacing: .06em; }
.hub-t { font: 700 clamp(30px, 3.2vw, 44px)/1 "Inter", system-ui, sans-serif !important; letter-spacing: -.035em !important; text-transform: none !important; color: #fff !important; }
.hub-d { font: 400 15px/1.5 "Inter", system-ui, sans-serif !important; color: #9aa3ab !important; max-width: 30ch; }
.hub-cmd { margin-top: auto !important; font: 500 13px "JBMono", ui-monospace, monospace !important; color: #f1f3f5 !important; }
.hub-cmd b { color: #7dd3fc; font-weight: 600; } .hub-cmd i { font-style: normal; color: #7dd3fc; opacity: .45; transition: opacity 200ms ease; }
.hub-arr { position: absolute; top: 24px; right: 24px; font: 400 20px "Inter", sans-serif; color: #fff; opacity: .35; transform: translateX(-6px); transition: transform 220ms cubic-bezier(.23,1,.32,1), opacity 220ms ease; }
@media (prefers-reduced-transparency: reduce) { .hub-door { background: #111315 !important; backdrop-filter: none; } }
/* una vez adentro, deja de ser una cámara VHS: sin REC, reloj, fps ni líneas de barrido */
.tc-hud, .reel .scan { display: none !important; }
/* casilla del correo: que se entienda qué va ahí */
.acc .s-mail.code input::placeholder { color: rgba(241,243,245,.32); font: 500 16px "JBMono", ui-monospace, monospace; }
/* ENTRADA: el video es solo una PRESENCIA — oscuro, borroso y con ruido (Aponte: "se sigue viendo mucho") */
#gate .acc-vid { opacity: .5 !important; filter: grayscale(1) contrast(1.05) brightness(.3) blur(1.6px) !important; }
#gate.has-auth .acc-vid { filter: grayscale(1) contrast(1.05) brightness(.22) blur(2.4px) !important; }
#gate .acc-shade { background: radial-gradient(80% 75% at 45% 50%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.72) 60%, rgba(0,0,0,.88) 100%) !important; }
#gate .g-grain { opacity: .78 !important; }
.hub-vid { opacity: .42 !important; filter: grayscale(1) contrast(1.05) brightness(.26) blur(2.4px) !important; }
.hub-grain { opacity: .66 !important; }
/* la página de adentro: el reel también más en penumbra */
.reel-stage video { filter: grayscale(.35) contrast(1.05) brightness(.62) !important; }
.reel-tint { background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 30%, rgba(0,0,0,.4) 55%, rgba(0,0,0,.95) 100%) !important; }
#cam { display: block !important; }
.cam-af { display: none !important; } /* sin el cuadro del autoenfoque en medio de la imagen */
/* AZUL + AMARILLO (Aponte volvió a preferirlo al verde): azul = código · amarillo = textos del código · blanco = lo que se lee */
:root { --t-prompt: #7dd3fc; --t-str: #ffd580; --glowg: 0 0 10px rgba(125,211,252,.35); }
.g-code { color: #7dd3fc !important; }
.g-code .s { color: #ffd580 !important; }
.g-code .c { color: #8b949c !important; }
.g-prompt .c, .g-term .c { color: #ffffff !important; }
.acc .s-tl .g, .acc .s-tl .cmd .u { color: #7dd3fc !important; text-shadow: 0 0 8px rgba(125,211,252,.3); }
.hub-cmd b, .hub-cmd i, .hub-k { color: #7dd3fc !important; }
.hub-k { text-shadow: 0 0 10px rgba(125,211,252,.3) !important; }
/* PUERTAS más pequeñas: que no se salgan del diseño */
.hub-in { width: min(920px, calc(100% - 32px)) !important; }
.hub-doors { gap: 12px !important; }
.hub-door { min-height: 188px !important; padding: 20px 20px 18px !important; border-radius: 16px !important; gap: 8px !important; }
.hub-t { font-size: clamp(22px, 2.2vw, 30px) !important; }
.hub-d { font-size: 14px !important; line-height: 1.45 !important; }
.hub-cmd { font-size: 12px !important; }
.hub-arr { top: 18px !important; right: 18px !important; font-size: 17px !important; }
.hub-n { font-size: 11px !important; }
/* PUERTAS: tamaño intermedio */
.hub-in { width: min(1060px, calc(100% - 32px)) !important; }
.hub-doors { gap: 14px !important; }
.hub-door { min-height: 228px !important; padding: 24px 24px 20px !important; border-radius: 18px !important; gap: 10px !important; }
.hub-t { font-size: clamp(26px, 2.7vw, 36px) !important; }
.hub-d { font-size: 15px !important; }
.hub-cmd { font-size: 13px !important; }
.hub-arr { top: 22px !important; right: 22px !important; font-size: 19px !important; }
/* ═══ SISTEMA DE BOTONES Y TARJETAS PARA TODA LA PÁGINA (skills apple-design + emil-design-eng) ═══
· primario = píldora blanca · secundario = píldora de vidrio · respuesta al presionar (scale .97, 100 ms)
· tarjetas = material oscuro translúcido con el borde de arriba que atrapa la luz · nada de [ corchetes ] */
.btn, .btn-primary, .btn-sm { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
min-height: 46px !important; padding: 0 22px !important; border-radius: 999px !important;
font: 600 15px/1 "Inter", system-ui, sans-serif !important; letter-spacing: -.01em !important; text-transform: none !important; text-shadow: none !important;
background: rgba(255,255,255,.06) !important; color: #f1f3f5 !important; border: 1px solid rgba(255,255,255,.14) !important; border-top-color: rgba(255,255,255,.24) !important;
backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
transition: transform 160ms cubic-bezier(.23,1,.32,1), background 200ms ease, border-color 200ms ease !important; }
.btn::before, .btn::after { content: none !important; }
.btn-primary { background: #f5f6f7 !important; color: #0b0c0d !important; border-color: #f5f6f7 !important; }
.btn-sm { min-height: 38px !important; padding: 0 16px !important; font-size: 14px !important; }
.btn:active, .btn-primary:active { transform: scale(.97) !important; transition-duration: 100ms !important; }
@media (hover: hover) and (pointer: fine) {
.btn:hover { background: rgba(255,255,255,.11) !important; border-color: rgba(255,255,255,.24) !important; color: #fff !important; }
.btn-primary:hover { background: #fff !important; color: #000 !important; }
}
.ru-seguir, .lz-next, .gx-next, .gx-go, .es-go, .pe-form button, .lz-go, a.lz-go { border-radius: 999px !important; min-height: 46px !important; font: 600 15px "Inter", system-ui, sans-serif !important; transition: transform 160ms cubic-bezier(.23,1,.32,1), background 200ms ease !important; }
.ru-seguir:active, .lz-next:active, .gx-next:active, .gx-go:active, .pe-form button:active { transform: scale(.97) !important; }
.lz-prev { border-radius: 999px !important; min-height: 46px !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.14) !important; }
/* tarjetas: mismo material de vidrio oscuro */
.ru-top, .ru-m, .ru-et, .lz-pasos li, .lz-ops button, .pe-etapas li, .pe-form, .gx-step, .gx-card, .gx-model, .gx-door, .gx-code-w, .gx-res, .tm-tabs button {
background: rgba(255,255,255,.035) !important; border: 1px solid rgba(255,255,255,.08) !important; border-top-color: rgba(255,255,255,.14) !important;
backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); }
.ru-m, .gx-card, .gx-model, .lz-ops button, .tm-tabs button { transition: transform 160ms cubic-bezier(.23,1,.32,1), border-color 200ms ease, background 200ms ease !important; }
.ru-m:active, .gx-card:active, .gx-model:active, .lz-ops button:active { transform: scale(.985) !important; }
@media (hover: hover) and (pointer: fine) { .ru-m:not(:disabled):hover, .gx-card:hover, .gx-model:hover, .lz-ops button:not(:disabled):hover { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.18) !important; } }
.gx-card.on, .gx-model.on, .gx-chip.on, .tm-tabs button.on { border-color: rgba(255,255,255,.7) !important; background: rgba(255,255,255,.08) !important; }
.ru-et { border-style: dashed !important; }
.lz-ops .ok { border-color: #7dd3fc !important; } .lz-ops .ko { border-color: #ff6b6b !important; }
/* lección: explicación simple, "así lo hicimos" y la práctica paso a paso */
.lz-exp { margin: -10px 0 26px; padding: 16px 18px; border-radius: 14px; background: rgba(125,211,252,.05); border: 1px solid rgba(125,211,252,.18); }
.lz-exp p:last-child { font-size: 17px; line-height: 1.55; color: #e9ecef; }
.lz-real, .lz-prac { margin: 0 0 20px; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); border-top-color: rgba(255,255,255,.14); }
.lz-real ol, .lz-prac ol { padding-left: 22px; display: grid; gap: 8px; font-size: 16px; line-height: 1.5; color: #e9ecef; }
.lz-real ol li::marker, .lz-prac ol li::marker { color: #7dd3fc; font: 600 13px "JBMono", monospace; }
.lz-prac { border-color: rgba(255,213,128,.2); } .lz-prac ol li::marker { color: #ffd580; }
@media (max-width: 600px) { .g-code, .g-prompt { font-size: 13px !important; line-height: 1.6 !important; } .g-code .ln i { display: none; } }
.gx-sim { min-height: 200px; display: grid; place-items: center; }
.gx-sim p { position: static !important; margin: 16px; }
.gx-sim:has(img) p { position: absolute !important; }
/* ═══ TERMINAL CON GANCHO: más tecnológica (azul eléctrico + ámbar, brillo de fósforo, barrido de luz) ═══ */
.g-term { position: relative; }
.g-prompt .u, .g-term .u { color: #38bdf8 !important; text-shadow: 0 0 12px rgba(56,189,248,.65), 0 0 2px rgba(56,189,248,.9) !important; }
.g-code { color: #7dd3fc !important; text-shadow: 0 0 10px rgba(56,189,248,.35); }
.g-code .s { color: #fcd34d !important; text-shadow: 0 0 10px rgba(252,211,77,.35) !important; }
.g-code .ln i { color: #1e5e7e !important; }
.g-code .c { color: #e5e7eb !important; font-style: italic; }
.g-code .caret, .g-prompt .caret, .g-code .hd { background: #38bdf8 !important; color: #38bdf8 !important; box-shadow: 0 0 12px rgba(56,189,248,.8); }
.g-code .ln.ok { animation: lnOk .9s ease-out 1; }
@keyframes lnOk { 0% { background: rgba(56,189,248,.14); } 100% { background: transparent; } }
/* barrido de luz que recorre el código cada tanto (se siente vivo) */
.g-term::after { content: ""; position: absolute; left: -10%; right: -10%; top: 0; height: 60px; pointer-events: none;
background: linear-gradient(180deg, transparent, rgba(56,189,248,.07), transparent); animation: gSweep 4.5s linear infinite; }
@keyframes gSweep { 0% { transform: translateY(-80px); } 100% { transform: translateY(420px); } }
/* acceso con el mismo brillo */
.acc .s-tl .g, .acc .s-tl .cmd .u { color: #38bdf8 !important; text-shadow: 0 0 10px rgba(56,189,248,.55) !important; }
.acc .s-blk, .acc .s-bld i, .acc .s-cells i.cur::after { background: #38bdf8 !important; box-shadow: 0 0 12px rgba(56,189,248,.75) !important; }
.acc .s-mail.code:focus-within { border-color: rgba(56,189,248,.6) !important; box-shadow: 0 0 24px rgba(56,189,248,.18); }
.acc .s-mail.code .s-pr { color: #38bdf8 !important; }
@media (prefers-reduced-motion: reduce) { .g-term::after { animation: none; display: none; } }
/* sin la franja de luz que recorría el fondo (no se veía bien) */
.g-term::after { content: none !important; animation: none !important; }
/* ═══ COLORES DE TERMINAL REAL (convención ANSI) ═══
verde = prompt / éxito · azul = ruta · blanco = comando · cian = nombres · amarillo = valores · gris = comentarios · rojo = error */
.g-code .ln.ok { animation: none !important; background: none !important; }
.g-code .hd { background: none !important; box-shadow: none !important; color: #5c636b !important; } /* la "cabeza" que escribe: símbolos, sin caja */
.g-code .caret, .g-prompt .caret { background: #e5e7eb !important; box-shadow: none !important; width: .55em !important; }
.g-prompt .u, .g-term .u, .acc .s-tl .cmd .u { color: #4ade80 !important; text-shadow: none !important; } /* prompt: verde */
.g-prompt .p, .g-term .p, .acc .s-tl .cmd .pth { color: #60a5fa !important; } /* ruta: azul */
.g-prompt .c, .g-term .c, .acc .s-tl .cmd { color: #f3f4f6 !important; } /* comando: blanco */
.g-code { color: #22d3ee !important; text-shadow: none !important; } /* nombres: cian */
.g-code .s { color: #facc15 !important; text-shadow: none !important; } /* valores: amarillo */
.g-code .c { color: #6b7280 !important; font-style: italic; } /* comentarios: gris */
.g-code .ln i { color: #374151 !important; }
.acc .s-tl .g, .acc .s-tl .c { color: #9ca3af !important; text-shadow: none !important; } /* instrucción: gris claro */
.acc .s-tl .ok { color: #4ade80 !important; } /* éxito: verde */
.acc .s-tl .ok .g { color: #4ade80 !important; }
.acc .s-mail.code .s-pr { color: #4ade80 !important; }
.acc .s-blk, .acc .s-bld i, .acc .s-cells i.cur::after { background: #e5e7eb !important; box-shadow: none !important; }
.acc .s-mail.code:focus-within { border-color: rgba(255,255,255,.35) !important; box-shadow: none !important; }
.acc .s-logo-img { image-rendering: auto; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* ═══ APERTURA: TEXTURA DE CÁMARA ANÁLOGA (menos números, más cinta) ═══ */
.cam-bat, .cam-date, .cam-cnt, .cam-br { display: none !important; } /* fuera batería, fecha, contador y esquinas */
.cam-state { opacity: .85; } /* solo queda STBY → ● REC, pequeño */
.cam-view video { filter: blur(.7px) contrast(1.08) saturate(.9) !important; animation: camJit 3.2s steps(1) infinite; }
@keyframes camJit { 0%, 91%, 100% { transform: translateX(0); } 92% { transform: translateX(3px); } 94% { transform: translateX(-2px); } 96% { transform: translateX(1px); } }
.cam-tex { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.cam-tex i { position: absolute; inset: 0; display: block; }
/* líneas de barrido */
.cam-scan { background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
/* grano vivo */
.cam-noise { inset: -80px !important; opacity: .32; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
animation: gGrain .3s steps(3) infinite; }
/* banda de tracking que sube de vez en cuando */
.cam-track { top: auto !important; height: 7%; background: linear-gradient(180deg, transparent, rgba(255,255,255,.1) 40%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.08) 60%, transparent);
filter: blur(1px); mix-blend-mode: screen; animation: camTrack 5.5s linear infinite; }
@keyframes camTrack { 0%, 55% { transform: translateY(20vh); opacity: 0; } 58% { opacity: 1; } 100% { transform: translateY(-110vh); opacity: .8; } }
/* ruido de cabeza abajo (donde la cinta "salta") */
.cam-head { top: auto !important; height: 3.2%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, rgba(0,0,0,.5) 2px 5px, rgba(255,255,255,.12) 5px 9px);
opacity: .55; filter: blur(.4px); animation: camHead .12s steps(2) infinite; }
@keyframes camHead { 0% { transform: translateX(0) skewX(-8deg); } 100% { transform: translateX(-9px) skewX(6deg); } }
/* viñeta y brillo en las luces */
.cam-vig { background: radial-gradient(120% 95% at 50% 50%, transparent 55%, rgba(0,0,0,.6) 100%); }
/* sangrado de color: halo rojo/azul corrido sobre la imagen */
.cam-bleed { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: .22;
background: linear-gradient(90deg, rgba(255,0,60,.35), transparent 30%, transparent 70%, rgba(0,160,255,.35)); }
@media (prefers-reduced-motion: reduce) { .cam-view video, .cam-noise, .cam-track, .cam-head { animation: none !important; } }
/* destello anamórfico al abrir el diafragma */
.cam-flare { position: absolute; left: -20%; right: -20%; top: 50%; height: 2px; margin-top: -1px; z-index: 4; pointer-events: none; opacity: 0;
background: linear-gradient(90deg, transparent, rgba(120,200,255,.25) 20%, rgba(255,255,255,.95) 50%, rgba(120,200,255,.25) 80%, transparent);
box-shadow: 0 0 22px 6px rgba(140,210,255,.35), 0 0 60px 18px rgba(255,255,255,.12); }
/* INGRESO: cuando queda la barra del correo, desaparece todo lo demás */
#gate.solo .g-hud, #gate.solo .g-skip, #gate.solo .s-logo-w, #gate.solo ~ #live-chip, #gate.solo ~ #build-chip { opacity: 0 !important; pointer-events: none; transition: opacity .8s ease; }
body:has(#gate.solo) #live-chip, body:has(#gate.solo) #build-chip { opacity: 0 !important; }
/* MOUSE NORMAL del sistema (sin cursor propio con retraso) — Aponte */
#cursor { display: none !important; }
@media (hover: hover) and (pointer: fine) { body { cursor: auto !important; } a, button, [data-cursor], .gx-card, .ru-m, .hub-door, .pick-card, .gen, label { cursor: pointer !important; } input, textarea, .s-live-v { cursor: text !important; } }
/* destello de la apertura NEUTRO (sin azul) y sin tinte de color inventado */
.cam-flare { background: linear-gradient(90deg, transparent, rgba(255,255,255,.18) 20%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.18) 80%, transparent) !important;
box-shadow: 0 0 20px 5px rgba(255,255,255,.22), 0 0 60px 16px rgba(255,255,255,.08) !important; }
.cam-bleed { display: none !important; }
@media (max-width: 1100px) { .hud-brand span { display: none !important; } .hud-nav { gap: 2px; } .hud-nav a { padding: 6px 8px !important; } }
/* ═══ TEXTURA VHS EN TODA LA WEB (como la apertura): barrido + grano vivo + viñeta, suave para que se lea ═══ */
#vhs-global { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
#vhs-global i { position: absolute; inset: 0; display: block; }
#vhs-global .vg-scan { background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
#vhs-global .vg-noise { inset: -80px; opacity: .1; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
animation: gGrain .3s steps(3) infinite; }
#vhs-global .vg-vig { background: radial-gradient(130% 110% at 50% 50%, transparent 60%, rgba(0,0,0,.45) 100%); }
@media (prefers-reduced-motion: reduce) { #vhs-global .vg-noise { animation: none; } }
/* ═══ PUERTAS: pequeñas, precisas, de web (no bloques blandos) ═══ */
.hub-in { width: min(820px, calc(100% - 32px)) !important; text-align: left !important; }
.hub-k { text-align: center; margin-bottom: 16px !important; }
.hub-doors { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
.hub-door { min-height: 0 !important; height: auto; padding: 16px 16px 14px !important; border-radius: 12px !important; gap: 6px !important;
background: rgba(10,11,12,.72) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.1) !important; border-top-color: rgba(255,255,255,.1) !important; box-shadow: none !important; }
@media (hover: hover) and (pointer: fine) { .hub-door:hover { transform: none !important; background: rgba(20,22,25,.85) !important; border-color: rgba(255,255,255,.35) !important; } }
.hub-door:active { transform: scale(.98) !important; }
.hub-n { font-size: 10px !important; }
.hub-t { font: 600 18px/1.1 "Inter", system-ui, sans-serif !important; letter-spacing: -.015em !important; }
.hub-d { font-size: 13px !important; line-height: 1.4 !important; color: #8b949c !important; max-width: none; }
.hub-cmd { margin-top: 6px !important; font-size: 11px !important; }
.hub-arr { top: 14px !important; right: 14px !important; font-size: 14px !important; opacity: .5; }
@media (max-width: 700px) { .hub-doors { grid-template-columns: 1fr !important; } }
/* botón de acceso: palabra simple */
.acc .s-btn.key { font: 500 13px/1 "Inter", system-ui, sans-serif !important; height: 34px !important; min-height: 34px !important; padding: 0 16px !important; border-radius: 999px !important; }
/* el video se ve MÁS (menos oscuro): el misterio lo pone la textura VHS, no la oscuridad */
#gate .acc-vid { opacity: .85 !important; filter: grayscale(1) contrast(1.1) brightness(.62) blur(.5px) !important; }
#gate.has-auth .acc-vid { filter: grayscale(1) contrast(1.1) brightness(.45) blur(1px) !important; }
#gate .acc-shade { background: radial-gradient(80% 75% at 45% 50%, rgba(0,0,0,.4) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.55) 100%) !important; }
.hub-vid { opacity: .75 !important; filter: grayscale(1) contrast(1.1) brightness(.5) blur(1px) !important; }
.reel-stage video { filter: grayscale(.2) contrast(1.05) brightness(.8) !important; }
/* textura VHS encima de TODO (también sobre la intro y el acceso) y más marcada sobre el video */
#vhs-global { z-index: 9990 !important; }
#vhs-global .vg-scan { background: repeating-linear-gradient(0deg, rgba(0,0,0,.26) 0 1px, transparent 1px 3px) !important; }
#vhs-global .vg-noise { opacity: .16 !important; }
/* ENCENDIDO DE TV ANÁLOGO */
.tv-on { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: #000; display: grid; place-items: center; animation: tvBg 1.25s linear forwards; }
@keyframes tvBg { 0%, 70% { background: #000; } 100% { background: transparent; } }
.tv-snow { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; mix-blend-mode: screen; }
.tv-line { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #fff; transform: scale(0, .004); opacity: 0;
box-shadow: 0 0 40px 12px rgba(255,255,255,.55); filter: blur(.4px); }
/* fondos: todo cambio de exposición es un FUNDIDO lento, nunca un salto */
.tv-on { animation: tvBg 1.6s cubic-bezier(.65,0,.35,1) forwards !important; }
@keyframes tvBg { 0%, 55% { background: #000; } 100% { background: transparent; } }
#gate .acc-vid { transition: opacity 1.8s cubic-bezier(.65,0,.35,1), filter 1.8s cubic-bezier(.65,0,.35,1) !important; }
#gate .acc-shade { transition: opacity 1.8s cubic-bezier(.65,0,.35,1), background 1.8s ease !important; }
#gate.solo .g-hud, #gate.solo .g-skip, #gate.solo .s-logo-w { transition: opacity 1.2s ease !important; }
#lb { z-index: 125 !important; } /* el visor de imágenes va encima de la lección */
/* ═══ ADENTRO = WEB PROFESIONAL: la textura VHS es SOLO de la intro y el acceso ═══ */
body:not(:has(#gate)) #vhs-global, body:not(:has(#gate)) #grain, .hub-grain { display: none !important; }
.hub-vid { filter: grayscale(1) contrast(1.05) brightness(.4) blur(6px) !important; opacity: .6 !important; }
/* cerrar que se siente como cerrar */
.lz-x, .gx-x, #gen .gx-x { width: auto !important; height: 36px !important; padding: 0 14px !important; border-radius: 999px !important; display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.16) !important; color: #fff !important; font: 500 13px "Inter", system-ui, sans-serif !important;
transition: background 160ms ease, transform 160ms ease; }
.lz-x span { font: inherit; }
@media (hover: hover) and (pointer: fine) { .lz-x:hover, .gx-x:hover { background: rgba(255,255,255,.16) !important; } }
.lz-x:active, .gx-x:active { transform: scale(.96); }
body.dentro #vhs-global, body.dentro #grain { display: none !important; }
.cam-view { clip-path: none !important; } .cam-af, .cam-flare { display: none !important; }
.gx-doors { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } @media (max-width: 700px) { .gx-doors { grid-template-columns: 1fr !important; } }
/* ═══ GENERADOR PRO (studio tipo HG, con ADN Mov.ibes) ═══ */
#gen.gp { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; background: #0b0c0d; color: #e9ecef; font-family: "Inter", system-ui, sans-serif; padding: 0; }
#gen.gp[hidden] { display: none; }
#gen.gp.drop::after { content: "Suelta las imágenes para usarlas de referencia"; position: absolute; inset: 12px; border: 1.5px dashed rgba(255,255,255,.4); border-radius: 16px; display: grid; place-items: center; background: rgba(0,0,0,.6); font: 500 15px "Inter"; z-index: 5; pointer-events: none; }
.gp-top { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid #1c1f23; }
.gp-brand { font: 500 13px "JBMono", ui-monospace, monospace; color: #8b949c; } .gp-brand b { color: #fff; font-weight: 600; }
.gp-modes { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: #15181b; margin: 0 auto; }
.gp-modes button { height: 30px; padding: 0 16px; border-radius: 8px; font: 500 13px "Inter"; color: #9aa3ab; transition: background 150ms ease, color 150ms ease; }
.gp-modes button.on { background: #f3f4f6; color: #000; }
.gp-feed { flex: 1; overflow: auto; padding: 18px 16px 12px; }
.gp-grid { columns: 4 260px; column-gap: 10px; max-width: 1500px; margin: 0 auto; }
.gp-empty { column-span: all; display: grid; place-items: center; min-height: 40vh; text-align: center; color: #9aa3ab; font-size: 15px; } .gp-empty .c { font: 400 13px "JBMono", monospace; color: #5c636b; margin-top: 6px; }
.gp-card { break-inside: avoid; margin: 0 0 10px; border-radius: 10px; overflow: hidden; background: #111315; border: 1px solid #1c1f23; }
.gp-media { position: relative; background: #060707; display: grid; place-items: center; }
.gp-media img, .gp-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-run { display: grid; place-items: center; gap: 10px; color: #8b949c; font: 500 12px "JBMono", monospace; padding: 16px; text-align: center; }
.gp-run i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #2a2e33; border-top-color: #fff; animation: gpSpin .7s linear infinite; }
.gp-run.err { color: #ff8a8a; }
@keyframes gpSpin { to { transform: rotate(360deg); } }
.gp-acts { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px; opacity: 0; transition: opacity 150ms ease; }
.gp-card:hover .gp-acts, .gp-card:focus-within .gp-acts { opacity: 1; }
@media (hover: none) { .gp-acts { opacity: 1; } }
.gp-acts button, .gp-acts a { height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font: 500 12px "Inter"; display: inline-flex; align-items: center; }
.gp-acts button:hover, .gp-acts a:hover { background: #fff; color: #000; }
.gp-card figcaption { padding: 8px 10px; display: grid; gap: 2px; } .gp-card figcaption b { font: 600 11px "JBMono", monospace; color: #c9ccd0; } .gp-card figcaption span { font-size: 12px; color: #8b949c; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gp-top { display: grid; gap: 10px; border-bottom: 1px solid #1c1f23; background: #0b0d0f; padding: 12px 16px 10px; }
.gp-top > * { max-width: 1100px; width: 100%; margin-left: auto; margin-right: auto; }
.gp-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gp-mode-deck { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: linear-gradient(180deg, #111416, #0b0d0f); border: 1px solid #20252a; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.gp-mode-line { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 10px; }
.gp-mode-line > span { font: 700 10px "JBMono", monospace; color: #6b737c; text-transform: uppercase; letter-spacing: .1em; }
.gp-mode-line .gp-modes { margin: 0; width: max-content; max-width: 100%; overflow-x: auto; background: transparent; padding: 0; gap: 14px; border-radius: 0; }
.gp-mode-line .gp-modes button { position: relative; height: 34px; padding: 0 2px !important; border-radius: 0; background: transparent; color: #7d858e; font: 700 13px "Inter"; }
.gp-mode-line .gp-modes button.on { background: transparent; color: #fff; }
.gp-mode-line .gp-modes button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 999px; background: #f3f4f6; }
.gp-mode-line-auto { grid-template-columns: 76px 160px minmax(0, 1fr); align-items: stretch; }
.gp-director-auto { min-height: 52px; padding: 8px 13px; border-radius: 12px; background: #f3f4f6; color: #000; white-space: normal; text-align: left; box-shadow: inset 0 -1px 0 rgba(0,0,0,.14); display: grid; align-content: center; gap: 2px; }
.gp-director-auto b { font: 800 12px "Inter"; }
.gp-director-auto em { font: 600 10.5px "JBMono", monospace; color: #34383d; font-style: normal; }
.gp-director-auto:disabled { opacity: .65; }
.gp-bar { border-top: 1px solid #1c1f23; background: #0f1113; padding: 10px 16px 12px; }
.gp-bar > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.gp-refs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.gp-refs[hidden] { display: none; }
.gp-ref { position: relative; flex: none; width: 64px; }
.gp-ref img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; display: block; }
.gp-ref.off img { opacity: .3; }
.gp-ref select { position: absolute; left: 3px; bottom: 3px; height: 18px; padding: 0 2px; border-radius: 4px; border: 0; background: rgba(0,0,0,.8); color: #fff; font: 600 9px "JBMono", monospace; }
.gp-ref button { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.75); color: #fff; font-size: 9px; }
.gp-row { display: flex; gap: 8px; align-items: stretch; }
.gp-prompt { flex: 1; min-height: 52px; max-height: 180px; padding: 12px 14px; border-radius: 12px; background: #15181b; border: 1px solid #262a2f; color: #fff; font: 400 15px/1.45 "Inter"; resize: vertical; outline: none; }
.gp-prompt:focus { border-color: #5c636b; }
.gp-go { flex: none; width: 132px; border-radius: 12px; background: #f3f4f6; color: #000; font: 600 15px "Inter"; transition: transform 120ms ease, opacity 150ms ease; }
.gp-go:active { transform: scale(.97); } .gp-go.busy { opacity: .6; }
.gp-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.gp-ctl select, .gp-add, .gp-model, .gp-see { height: 30px; padding: 0 10px; border-radius: 8px; background: #15181b; border: 1px solid #262a2f; color: #c9ccd0; font: 500 12px "Inter"; }
.gp-ctl select { appearance: none; -webkit-appearance: none; padding-right: 10px; cursor: pointer; }
.gp-model { display: inline-flex; align-items: center; gap: 8px; color: #fff; } .gp-model i { font-style: normal; color: #6c757d; font-size: 10px; }
.gp-see.on { border-color: #9aa3ab; color: #fff; }
.gp-hint { margin-left: auto; font: 500 11px "JBMono", monospace; color: #4a5057; }
.gp-pick { position: relative; }
.gp-menu { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 10; width: 340px; max-height: 60vh; overflow: auto; padding: 4px; border-radius: 12px; background: #15181b; border: 1px solid #2a2e33; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.gp-menu[hidden] { display: none; }
.gp-menu button { width: 100%; display: grid; gap: 1px; padding: 8px 10px; border-radius: 8px; text-align: left; }
.gp-menu button:hover, .gp-menu button.on { background: #1f2327; }
.gp-menu b { font: 600 13px "Inter"; color: #fff; } .gp-menu span { font-size: 12px; color: #9aa3ab; } .gp-menu em { font: 500 11px "JBMono", monospace; font-style: normal; color: #6c757d; }
.gp-exact { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #060707; border: 1px solid #1c1f23; font: 500 12px/1.6 "JBMono", monospace; color: #c9ccd0; white-space: pre-wrap; word-break: break-word; }
.gp-exact .k { color: #22d3ee; } .gp-exact .s { color: #facc15; }
.gp-exact[hidden] { display: none; }
.gp-msg { margin-top: 6px; font-size: 12px; color: #9aa3ab; min-height: 0; } .gp-msg:empty { display: none; } .gp-msg.bad { color: #ff8a8a; }
.gp-x { height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; font: 500 13px "Inter"; }
@media (max-width: 700px) { .gp-hint, .gp-brand { display: none; } .gp-go { width: 96px; } .gp-grid { columns: 2 150px; } .gp-menu { width: min(340px, 90vw); } }
body:has(#gen:not([hidden])) #vhs-global, body:has(#leccion:not([hidden])) #vhs-global { display: none !important; }
.gp-grid:has(.gp-empty) { columns: auto; }
.gp-empty { min-height: 55vh; align-content: center; gap: 6px; }
.ex-q { margin-bottom: 26px; }
.ex-res { margin: 10px 0 0; padding: 16px 18px; border-radius: 14px; font-size: 17px; } .ex-res b { font: 700 22px "Inter"; margin-right: 8px; }
.ex-res.ok { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.35); } .ex-res.ko { background: rgba(255,107,107,.07); border: 1px solid rgba(255,107,107,.3); }
.ru-ex .ru-n { color: #facc15; }
.gp-ai, .gp-tr, .gp-addv { height: 30px; padding: 0 10px; border-radius: 8px; background: #15181b; border: 1px solid #262a2f; color: #c9ccd0; font: 500 12px "Inter"; }
.gp-ai:hover, .gp-tr:hover { border-color: #5c636b; color: #fff; }
.gp-ai[hidden], .gp-tr[hidden], .gp-addv[hidden], .gp-add[hidden] { display: none; }
.gp-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.gp-opts[hidden] { display: none; }
.gp-opts button { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; background: #15181b; border: 1px solid #262a2f; text-align: left; }
.gp-opts button.on { border-color: #9aa3ab; } .gp-opts b { font: 600 12px "JBMono", monospace; color: #22d3ee; } .gp-opts span { font-size: 12px; color: #9aa3ab; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gp-media audio { width: 100%; margin: 24px 12px; }
.gp-modes button { padding: 0 12px !important; }
@media (max-width: 700px) { .gp-opts { grid-template-columns: 1fr; } .gp-modes { overflow-x: auto; } }
/* ── Generador: coherencia (qué es cada foto) + TODOS los ajustes del modelo ── */
.gp-params { display: contents; }
.gp-ctl input[type=number], .gp-adv input[type=number] { height: 30px; width: 92px; padding: 0 10px; border-radius: 8px; background: #15181b; border: 1px solid #262a2f; color: #c9ccd0; font: 500 12px "Inter"; }
.gp-advb { height: 30px; padding: 0 10px; border-radius: 8px; background: #15181b; border: 1px solid #262a2f; color: #c9ccd0; font: 500 12px "Inter"; cursor: pointer; }
.gp-advb.on { background: #f2f3f4; color: #0c0d0e; border-color: #f2f3f4; }
.gp-adv { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 12px 0 4px; border-top: 1px solid #1f2327; margin-top: 10px; }
.gp-adv[hidden] { display: none; }
.gp-adv label { display: flex; align-items: center; gap: 8px; font: 500 12px "Inter"; color: #8a9097; }
.gp-adv select { height: 30px; padding: 0 10px; border-radius: 8px; background: #15181b; border: 1px solid #262a2f; color: #c9ccd0; font: 500 12px "Inter"; appearance: none; -webkit-appearance: none; }
.gp-ref { width: 88px; }
.gp-ref img { width: 88px; height: 88px; }
.gp-ref select { height: 20px; max-width: 82px; font-size: 9.5px; }
.gp-ref select.ask { outline: 1px dashed #f2f3f4; outline-offset: 1px; }
/* ── Generador: CAMINO DEL DIRECTOR + MIS ELEMENTS ── */
.gp-path { display: flex; align-items: stretch; gap: 8px; padding: 0; overflow-x: auto; scrollbar-width: thin; }
.gp-path::-webkit-scrollbar { height: 4px; }
.gp-path::-webkit-scrollbar-track { background: transparent; }
.gp-path::-webkit-scrollbar-thumb { background: #262a2f; border-radius: 999px; }
.gp-pathset, .gp-path-steps { display: inline-flex; align-items: stretch; gap: 6px; }
.gp-pathset { padding-right: 8px; margin-right: 2px; border-right: 1px solid #262a2f; }
.gp-path-t { align-self: center; font: 600 10px "JBMono", monospace; color: #58616b; margin: 0 2px 0 8px; text-transform: uppercase; letter-spacing: .08em; }
.gp-path-pro { margin-left: 4px; padding-left: 8px; border-left: 1px solid #262a2f; }
.gp-path-pros { display: inline-flex; gap: 6px; }
.gp-path button { flex: 0 0 168px; min-height: 52px; padding: 7px 9px; border-radius: 12px; background: #15181b; border: 1px solid #262a2f; color: #c9ccd0; font: 700 12px "Inter"; display: inline-flex; align-items: flex-start; gap: 8px; transition: background 150ms ease, color 150ms ease, transform 120ms ease, border-color 150ms ease; }
.gp-path button i { font-style: normal; min-width: 30px; height: 24px; padding: 0 5px; border-radius: 7px; display: grid; place-items: center; background: #23272c; color: #fff; font: 800 9px "JBMono", monospace; }
.gp-path button span { display: grid; gap: 1px; text-align: left; }
.gp-path button b { font: 800 12px "Inter"; color: inherit; }
.gp-path button em { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10.5px "JBMono", monospace; font-style: normal; color: #8c949d; }
.gp-path button small { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10px "Inter"; color: #59616a; }
.gp-path button:hover { border-color: #5c636b; } .gp-path button:active { transform: scale(.97); }
.gp-path button.on { background: #f3f4f6; color: #000; border-color: #f3f4f6; } .gp-path button.on i { background: #000; color: #fff; } .gp-path button.on em { color: #34383d; } .gp-path button.on small { color: #4d5359; }
.gp-path button.gp-camino { flex-basis: 184px; background: #101316; border-color: #242a30; }
.gp-path button.gp-camino i { min-width: 34px; background: #1e2328; }
.gp-path button.gp-camino em { max-width: 122px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 1.18; }
.gp-path button.gp-camino.on { background: #f3f4f6; color: #000; border-color: #f3f4f6; }
.gp-path button.libre { flex-basis: 74px; align-items: center; justify-content: center; padding: 0 12px; }
.gp-path-a { color: #3a4047; font-size: 11px; }
.gp-powers { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; }
.gp-powers span { height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; background: #111315; border: 1px solid #20252a; color: #7f8790; font: 500 10.5px "JBMono", monospace; }
.gp-guide { margin-bottom: 10px; padding: 14px 16px; border-radius: 14px; background: rgba(21,24,27,.72); border: 1px solid #22262b; border-top-color: #2e3338; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); max-height: 42vh; overflow: auto; }
.gp-guide[hidden] { display: none; }
.gp-flow { margin-bottom: 14px; padding: 12px; border-radius: 12px; background: #0d0f11; border: 1px solid #20252a; display: grid; gap: 10px; }
.gp-flow-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gp-flow-head b { font: 800 13px "Inter"; color: #fff; letter-spacing: -.01em; }
.gp-flow-head span { font: 500 11px "JBMono", monospace; color: #7e8790; text-align: right; }
.gp-flow-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.gp-flow-steps span { min-height: 68px; padding: 8px; border-radius: 10px; background: #121518; border: 1px solid #22272d; display: grid; align-content: start; gap: 2px; opacity: .62; }
.gp-flow-steps span.on { opacity: 1; background: #f3f4f6; border-color: #f3f4f6; color: #000; }
.gp-flow-steps i { font: 800 9px "JBMono", monospace; font-style: normal; color: #77808a; }
.gp-flow-steps b { font: 800 11px "Inter"; color: #e9ecef; }
.gp-flow-steps em { font: 500 9.5px/1.25 "Inter"; color: #77808a; font-style: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gp-flow-steps span.on i, .gp-flow-steps span.on b, .gp-flow-steps span.on em { color: #000; }
.gp-flow-next { font: 600 11px "JBMono", monospace; color: #aab2bb; }
.gp-g-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.gp-g-head b { font: 700 16px "Inter"; letter-spacing: -0.02em; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.gp-g-head b i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #f3f4f6; color: #000; font: 700 11px "JBMono", monospace; }
.gp-g-head span { font-size: 13px; color: #9aa3ab; }
.gp-g-ana { margin: 6px 0 12px; font: 400 12px "JBMono", monospace; color: #6b7280; }
.gp-g-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.gp-slot { position: relative; padding: 10px 12px; border-radius: 10px; background: #111315; border: 1px dashed #30353b; display: grid; gap: 4px; }
.gp-slot.need { border-color: #4a5057; } .gp-slot.ok { border-style: solid; border-color: #3a4047; }
.gp-slot b { font: 600 13px "Inter"; color: #fff; } .gp-slot b em { font: 400 11px "Inter"; color: #6b7280; font-style: normal; }
.gp-slot.ok b { color: #fff; } .gp-slot > span { font-size: 12px; color: #8b949c; line-height: 1.4; }
.gp-slot-b { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.gp-slot-b button { height: 26px; padding: 0 10px; border-radius: 999px; background: #1b1f23; border: 1px solid #2e3338; color: #e9ecef; font: 500 12px "Inter"; }
.gp-slot-b button:first-child { background: #f3f4f6; color: #000; border-color: #f3f4f6; }
.gp-slot-b em { font: 500 11px "JBMono", monospace; color: #9aa3ab; font-style: normal; }
.gp-g-campos { display: grid; gap: 8px; margin-top: 10px; }
.gp-g-campos label { display: grid; gap: 4px; } .gp-g-campos label span { font: 600 12px "Inter"; color: #c9ccd0; }
.gp-g-campos input { height: 38px; padding: 0 12px; border-radius: 10px; background: #0f1113; border: 1px solid #262a2f; color: #fff; font: 400 14px "Inter"; outline: none; }
.gp-g-campos input:focus { border-color: #5c636b; }
.gp-g-names { font: 400 11px "JBMono", monospace; color: #6b7280; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.gp-g-names button { height: 22px; padding: 0 8px; border-radius: 999px; background: #1b1f23; border: 1px solid #2e3338; color: #e9ecef; font: 500 11px "JBMono", monospace; }
.gp-lib { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding-bottom: 8px; position: relative; }
.gp-lib[hidden] { display: none; }
.gp-lib-t { flex: none; font: 500 11px "JBMono", monospace; color: #5c636b; text-transform: lowercase; margin-right: 4px; }
.gp-el { flex: none; position: relative; display: inline-flex; }
.gp-el > button:first-child { height: 34px; padding: 0 12px 0 3px; border-radius: 999px; background: #15181b; border: 1px solid #262a2f; display: inline-flex; align-items: center; gap: 8px; color: #e9ecef; }
.gp-el > button:first-child:hover { border-color: #5c636b; }
.gp-el img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.gp-el b { font: 500 12px "JBMono", monospace; }
.gp-el .x { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: #23272c; color: #9aa3ab; font-size: 8px; opacity: 0; transition: opacity 150ms ease; }
.gp-el:hover .x { opacity: 1; }
.gp-libmenu { position: absolute; left: 8px; bottom: calc(100% + 6px); z-index: 12; width: 300px; max-height: 50vh; overflow: auto; padding: 6px; border-radius: 12px; background: #15181b; border: 1px solid #2a2e33; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.gp-libmenu p { font: 500 11px "JBMono", monospace; color: #6b7280; padding: 6px 8px 4px; }
.gp-libmenu button { width: 100%; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; text-align: left; }
.gp-libmenu button:hover { background: #1f2327; }
.gp-libmenu img { grid-row: span 2; width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.gp-libmenu b { font: 500 12px "JBMono", monospace; color: #fff; } .gp-libmenu span { font-size: 11px; color: #8b949c; }
.gp-ref-n { position: absolute; left: 3px; top: 3px; max-width: 80px; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.78); color: #fff; font: 600 9px "JBMono", monospace; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-save { padding: 10px; display: grid; gap: 8px; border-top: 1px solid #1c1f23; }
.gp-save p { font-size: 12px; color: #9aa3ab; }
.gp-save label { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 8px; font: 500 12px "Inter"; color: #8b949c; }
.gp-save input, .gp-save select { height: 32px; padding: 0 10px; border-radius: 8px; background: #0f1113; border: 1px solid #262a2f; color: #fff; font: 500 12px "JBMono", monospace; }
.gp-save div { display: flex; gap: 6px; } .gp-save button { height: 30px; padding: 0 14px; border-radius: 999px; font: 600 12px "Inter"; background: #f3f4f6; color: #000; } .gp-save button.no { background: transparent; color: #9aa3ab; border: 1px solid #2e3338; }
@media (max-width: 700px) { .gp-path-a { display: none; } .gp-g-slots { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .gp-mode-line, .gp-mode-line-auto { grid-template-columns: 1fr; } .gp-director-auto { width: 100%; min-height: 42px; text-align: center; } .gp-path button, .gp-path button.gp-camino { flex-basis: 72vw; justify-content: flex-start; } .gp-path button em, .gp-path button small, .gp-path button.gp-camino em { max-width: 52vw; } }
@media (max-width: 700px) { .gp-flow-head { display: grid; } .gp-flow-head span { text-align: left; } .gp-flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ── Layout final: consola familiar de generación, no cinta genérica ── */
#gen.gp {
position: fixed;
inset: 0;
z-index: 1000;
width: 100vw;
height: 100dvh;
overflow: hidden;
padding: 0;
place-items: stretch;
display: grid;
grid-template-columns: 272px minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto;
background:
radial-gradient(circle at 48% 14%, rgba(255,255,255,.055), transparent 28%),
linear-gradient(180deg, #050607 0%, #090a0c 56%, #050607 100%);
}
#gen.gp[hidden] { display: none; }
#gen.gp.loading .gp-top,
#gen.gp.loading .gp-feed,
#gen.gp.loading .gp-bar {
pointer-events: none;
opacity: .55;
}
#gen.gp.loading::after {
content: "cargando modelos";
position: fixed;
left: 50%;
top: 50%;
z-index: 40;
transform: translate(-50%, -50%);
padding: 12px 16px;
border-radius: 999px;
background: #f3f4f6;
color: #050607;
box-shadow: 0 18px 45px rgba(0,0,0,.34);
font: 900 12px "JBMono", ui-monospace, monospace;
text-transform: uppercase;
}
#gen .gp-top {
grid-column: 1;
grid-row: 1 / span 2;
min-height: 0;
overflow: auto;
align-content: start;
padding: 12px;
border-right: 1px solid #1c2025;
border-bottom: 0;
background: #0b0d0f;
box-shadow: 18px 0 42px rgba(0,0,0,.28);
}
#gen .gp-top > * {
max-width: none;
width: 100%;
margin-left: 0;
margin-right: 0;
}
#gen .gp-head-row {
position: relative;
min-height: 42px;
padding-bottom: 12px;
border-bottom: 1px solid #1f242a;
}
.gp-product-menu {
position: absolute;
z-index: 20;
left: 0;
top: calc(100% - 4px);
width: min(360px, calc(100vw - 28px));
max-height: min(620px, calc(100vh - 78px));
overflow: auto;
padding: 8px;
border-radius: 16px;
background: rgba(16,19,23,.98);
border: 1px solid #2a3139;
box-shadow: 0 28px 70px rgba(0,0,0,.45);
}
.gp-product-menu[hidden] { display: none; }
.gp-product-menu > b {
display: block;
padding: 8px 10px 10px;
color: #68727c;
font: 900 11px "JBMono", ui-monospace, monospace;
text-transform: uppercase;
letter-spacing: .08em;
}
.gp-product-menu button {
width: 100%;
min-height: 58px;
display: grid;
gap: 3px;
padding: 10px;
border-radius: 12px;
text-align: left;
color: #eef2f5;
}
.gp-product-menu button:hover {
background: #1b2026;
}
.gp-product-menu span {
font: 850 13px "Inter", system-ui, sans-serif;
}
.gp-product-menu em {
color: #87919b;
font: 650 11.5px/1.35 "Inter", system-ui, sans-serif;
font-style: normal;
}
#gen .gp-brand {
width: auto;
display: inline-flex;
align-items: center;
gap: 10px;
color: #eef2f6;
}
#gen .gp-brand span {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: #eff2f5;
color: #050607;
font: 900 10px "JBMono", ui-monospace, monospace;
}
#gen .gp-brand b {
display: block;
font: 800 14px "Inter", system-ui, sans-serif;
color: #f3f4f6;
letter-spacing: -.02em;
text-transform: none;
}
#gen .gp-x {
height: 30px;
padding: 0 10px;
border-radius: 999px;
background: #15191e;
border: 1px solid #252b32;
color: #9ca6b0;
font: 700 11px "Inter", system-ui, sans-serif;
}
.gp-side-nav {
display: grid;
gap: 4px;
padding: 12px 0;
border-bottom: 1px solid #1f242a;
}
.gp-side-nav button,
.gp-projects button {
min-height: 36px;
padding: 0 10px;
border-radius: 10px;
color: #a4adb7;
text-align: left;
font: 750 13px "Inter", system-ui, sans-serif;
}
.gp-side-nav button:hover,
.gp-side-nav button.on,
.gp-projects button:hover {
background: #171b20;
color: #fff;
}
.gp-projects {
display: grid;
gap: 6px;
padding: 12px 0;
border-bottom: 1px solid #1f242a;
}
.gp-projects span {
padding: 0 10px;
color: #69737d;
font: 850 11px "JBMono", ui-monospace, monospace;
text-transform: uppercase;
}
.gp-projects button:last-child {
background: #eef2f5;
color: #050607;
text-align: center;
}
#gen .gp-mode-deck {
gap: 14px;
padding-top: 12px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#gen .gp-mode-line,
#gen .gp-mode-line-auto {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
padding: 12px;
border-radius: 14px;
background: #111417;
border: 1px solid #23282e;
}
#gen .gp-mode-line-auto {
gap: 8px;
}
#gen .gp-mode-line:first-child { display: none; }
#gen .gp-mode-line > span {
font: 800 11px "JBMono", ui-monospace, monospace;
color: #7e8790;
text-transform: uppercase;
letter-spacing: .08em;
}
#gen .gp-mode-line .gp-modes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
width: 100%;
gap: 2px;
overflow: visible;
border-bottom: 1px solid #303741;
}
#gen .gp-mode-line .gp-modes button {
height: 38px;
padding: 0 3px 8px !important;
border-radius: 0;
background: transparent;
border: 0;
color: #a8b0b8;
font: 700 11px "Inter", system-ui, sans-serif;
position: relative;
}
#gen .gp-mode-line .gp-modes button.on {
background: transparent;
color: #fff;
}
#gen .gp-mode-line .gp-modes button.on::after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
border-radius: 999px;
background: #fff;
}
.gp-model-card {
display: grid;
grid-template-columns: 44px 1fr;
align-items: center;
gap: 12px;
min-height: 68px;
padding: 10px;
border-radius: 14px;
background: #111417;
border: 1px solid #252b32;
}
.gp-model-art {
height: 44px;
border-radius: 10px;
display: grid;
place-items: center;
background:
linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0) 38%),
radial-gradient(circle at 78% 18%, rgba(255,255,255,.22), transparent 30%),
linear-gradient(150deg, #2a3038, #0b0d10 58%, #171b20);
border: 1px solid #303741;
overflow: hidden;
}
.gp-model-art span {
width: 26px;
height: 26px;
border-radius: 50%;
display: grid;
place-items: center;
background: #f3f4f6;
color: #050607;
font: 900 11px "JBMono", ui-monospace, monospace;
}
.gp-model-card b {
display: block;
color: #fff;
font: 800 14px "Inter", system-ui, sans-serif;
letter-spacing: -.02em;
}
.gp-model-card em {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 3px;
color: #8a939c;
font: 600 11px/1.25 "Inter", system-ui, sans-serif;
font-style: normal;
}
.gp-model-jump {
grid-column: 1 / -1;
height: 30px;
padding: 0 10px;
border-radius: 999px;
background: #1a1f24;
border: 1px solid #303741;
color: #e8ecef;
font: 700 11px "Inter", system-ui, sans-serif;
}
.gp-dropstack {
display: grid;
gap: 8px;
}
.gp-dropzone {
min-height: 136px;
padding: 16px 14px;
border-radius: 14px;
background:
linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
#121518;
border: 1px dashed #303741;
color: #e9edf1;
display: grid;
place-items: center;
align-content: center;
text-align: center;
gap: 7px;
}
.gp-dropzone i {
width: 34px;
height: 34px;
border-radius: 50%;
display: grid;
place-items: center;
background: #242a31;
color: #cfd6de;
font: 900 10px "JBMono", ui-monospace, monospace;
font-style: normal;
}
.gp-dropzone b {
max-width: 220px;
font: 800 14px/1.1 "Inter", system-ui, sans-serif;
letter-spacing: -.02em;
}
.gp-dropzone em {
max-width: 230px;
color: #7f8993;
font: 600 11.5px/1.35 "Inter", system-ui, sans-serif;
font-style: normal;
}
.gp-dropzone:hover {
border-color: #f3f4f6;
background: #171b1f;
}
#gen .gp-director-auto {
width: 100%;
min-height: 66px;
padding: 12px 14px;
border-radius: 12px;
background: #f3f4f6;
color: #050607;
}
#gen .gp-director-auto b { font-size: 14px; letter-spacing: -.01em; }
#gen .gp-director-auto em { font-size: 11px; color: #42484e; }
#gen .gp-open-library {
width: 100%;
min-height: 38px;
border-radius: 10px;
background: #171c21;
border: 1px solid #2a3139;
color: #f0f3f6;
font: 800 12px "Inter", system-ui, sans-serif;
}
#gen .gp-path {
display: none;
gap: 10px;
overflow: visible;
}
#gen .gp-path::-webkit-scrollbar { display: none; }
#gen .gp-pathset,
#gen .gp-path-steps {
display: grid;
gap: 6px;
}
#gen .gp-pathset {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#gen .gp-pathset {
padding: 0 0 10px;
margin: 0;
border-right: 0;
border-bottom: 1px solid #272d34;
}
#gen .gp-path-t {
margin: 0;
color: #66707a;
}
#gen .gp-path-a { display: none; }
#gen .gp-path button,
#gen .gp-path button.gp-camino {
flex: none;
width: 100%;
min-height: 50px;
padding: 8px;
border-radius: 10px;
background: #15191d;
border-color: #283038;
justify-content: flex-start;
}
#gen .gp-path button.gp-camino {
min-height: 70px;
display: grid;
grid-template-columns: 1fr;
align-content: start;
gap: 6px;
}
#gen .gp-path button.gp-camino b {
font-size: 12px;
}
#gen .gp-path button.gp-camino em {
display: none;
}
#gen .gp-path button i,
#gen .gp-path button.gp-camino i {
min-width: 0;
width: max-content;
height: 22px;
padding: 0 7px;
border-radius: 7px;
background: #242a31;
font-size: 9px;
}
#gen .gp-path button b { font-size: 12.5px; }
#gen .gp-path button em,
#gen .gp-path button small,
#gen .gp-path button.gp-camino em {
max-width: 250px;
white-space: normal;
line-height: 1.25;
}
#gen .gp-path button.on,
#gen .gp-path button.gp-camino.on {
background: #f3f4f6;
color: #050607;
border-color: #f3f4f6;
}
#gen .gp-path button.libre {
min-height: 40px;
border-radius: 10px;
}
#gen .gp-auto-b {
width: 100%;
height: 38px;
margin-left: 0;
border-radius: 10px;
}
#gen .gp-powers {
display: none;
}
#gen .gp-powers span {
height: 24px;
background: #0f1215;
border-color: #22272d;
}
#gen .gp-guide {
margin-bottom: 0;
max-height: none;
overflow: visible;
padding: 12px;
border-radius: 14px;
background: #101316;
}
#gen .gp-flow {
padding: 10px;
}
#gen .gp-flow-head {
display: grid;
gap: 4px;
}
#gen .gp-flow-head span {
text-align: left;
line-height: 1.35;
}
#gen .gp-flow-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#gen .gp-flow-steps span {
min-height: 70px;
}
#gen .gp-g-slots {
grid-template-columns: 1fr;
}
#gen .gp-g-head b { font-size: 15px; }
#gen .gp-lib {
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
gap: 6px;
overflow: visible;
padding-bottom: 0;
}
#gen .gp-lib[hidden] { display: none; }
#gen .gp-el > button:first-child {
width: 100%;
height: 40px;
border-radius: 10px;
}
#gen .gp-feed {
grid-column: 2;
grid-row: 1;
min-height: 0;
overflow: auto;
margin: 0;
padding: 24px clamp(22px, 4vw, 62px) 14px;
border-radius: 0;
border: 0;
background:
radial-gradient(circle at 45% 0%, rgba(255,255,255,.075), transparent 24%),
linear-gradient(180deg, #07080a, #08090b);
}
.gp-hg-nav {
position: sticky;
top: 0;
z-index: 8;
min-height: 46px;
display: grid;
grid-template-columns: auto repeat(8, max-content) 1fr max-content max-content;
align-items: center;
gap: 6px;
margin: -12px calc(clamp(22px, 4vw, 62px) * -1) 18px;
padding: 8px clamp(22px, 4vw, 62px);
background: rgba(7,8,10,.92);
border-bottom: 1px solid #1c2229;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.gp-hg-nav > b {
margin-right: 8px;
color: #f5f7f9;
font: 950 16px "Inter", system-ui, sans-serif;
letter-spacing: -.04em;
}
.gp-hg-nav > button {
height: 30px;
padding: 0 9px;
border-radius: 9px;
color: #a0aab4;
font: 800 12px "Inter", system-ui, sans-serif;
}
.gp-hg-nav > button:hover {
background: #171c21;
color: #fff;
}
.gp-hg-nav .gp-credit {
background: #151a20;
border: 1px solid #2a3139;
color: #f3f4f6;
}
.gp-hg-nav .gp-user {
background: #eef2f5;
color: #050607;
}
.gp-mega {
position: absolute;
left: clamp(22px, 4vw, 62px);
top: 48px;
width: min(760px, calc(100vw - 340px));
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 12px;
border-radius: 18px;
background: rgba(15,18,22,.98);
border: 1px solid #2a3139;
box-shadow: 0 32px 80px rgba(0,0,0,.48);
}
.gp-mega[hidden] { display: none; }
.gp-mega h3 {
margin: 0 0 8px;
color: #69737d;
font: 900 11px "JBMono", ui-monospace, monospace;
text-transform: uppercase;
letter-spacing: .08em;
}
.gp-mega section {
display: grid;
align-content: start;
gap: 5px;
}
.gp-mega button {
min-height: 56px;
display: grid;
gap: 3px;
padding: 10px;
border-radius: 12px;
text-align: left;
color: #f1f4f7;
}
.gp-mega button:hover {
background: #1b2026;
}
.gp-mega button b {
font: 850 13px "Inter", system-ui, sans-serif;
}
.gp-mega button em {
color: #89939d;
font: 650 11.5px/1.35 "Inter", system-ui, sans-serif;
font-style: normal;
}
.gp-account {
position: absolute;
right: clamp(22px, 4vw, 62px);
top: 48px;
width: 280px;
padding: 10px;
border-radius: 18px;
background: rgba(15,18,22,.98);
border: 1px solid #2a3139;
box-shadow: 0 32px 80px rgba(0,0,0,.48);
}
.gp-account[hidden] { display: none; }
.gp-account > b {
display: block;
padding: 6px 8px 10px;
color: #f2f5f8;
font: 900 15px "Inter", system-ui, sans-serif;
}
.gp-account-card,
.gp-account-row {
padding: 10px;
border-radius: 12px;
background: #11161b;
border: 1px solid #252c34;
margin-bottom: 8px;
}
.gp-account-card span,
.gp-account-row span {
display: block;
color: #78828c;
font: 850 10px "JBMono", ui-monospace, monospace;
text-transform: uppercase;
}
.gp-account-card strong,
.gp-account-row b {
display: block;
margin-top: 3px;
color: #f3f6f9;
font: 900 16px "Inter", system-ui, sans-serif;
}
.gp-account-card em {
display: block;
margin-top: 2px;
color: #f3f4f6;
font: 750 11px "Inter", system-ui, sans-serif;
font-style: normal;
}
.gp-account button {
width: 100%;
height: 34px;
margin-top: 6px;
border-radius: 10px;
background: #eef2f5;
color: #050607;
font: 850 12px "Inter", system-ui, sans-serif;
}
.gp-project-strip {
height: 124px;
display: grid;
grid-template-columns: repeat(3, minmax(180px, 1fr));
gap: 14px;
max-width: 850px;
margin: 0 auto 34px;
}
.gp-project-strip button {
border-radius: 18px;
border: 1px solid #252b32;
background:
linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0) 40%),
radial-gradient(circle at 72% 28%, rgba(243,244,246,.18), transparent 30%),
#11151a;
color: #e9edf1;
font: 850 13px "Inter", system-ui, sans-serif;
text-align: left;
padding: 16px;
}
.gp-hero {
max-width: 960px;
margin: 0 auto 18px;
text-align: center;
}
.gp-hero h1 {
margin: 0 0 24px;
color: #f5f7f9;
font: 950 clamp(42px, 7vw, 92px)/.86 "Inter", system-ui, sans-serif;
letter-spacing: -.07em;
}
.gp-mode-title {
margin: -8px 0 12px;
color: #79838d;
font: 850 12px "JBMono", ui-monospace, monospace;
text-transform: uppercase;
letter-spacing: .08em;
}
.gp-stage-modes {
width: min(720px, 100%);
max-width: 100%;
margin: 0 auto 18px;
padding: 6px;
display: inline-grid;
grid-template-columns: repeat(4, minmax(92px, 1fr));
gap: 4px;
border-radius: 18px;
background: #11151a;
border: 1px solid #252b32;
}
.gp-stage-modes button {
height: 58px;
padding: 0 14px;
border-radius: 13px;
color: #96a0aa;
font: 900 15px "Inter", system-ui, sans-serif;
}
.gp-stage-modes button.on {
background: #eef2f5;
color: #050607;
}
.gp-director-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.gp-director-chips button {
min-height: 42px;
padding: 7px 12px;
border-radius: 12px;
background: #11151a;
border: 1px solid #252b32;
color: #dbe1e6;
font: 750 12px "Inter", system-ui, sans-serif;
}
.gp-director-chips b {
display: block;
margin-top: 2px;
color: #7b858f;
font: 800 11px "JBMono", ui-monospace, monospace;
}
.gp-feed-tabs {
position: sticky;
top: 0;
z-index: 2;
display: flex;
gap: 6px;
padding: 0 0 12px;
background: linear-gradient(180deg, #07080a 0%, rgba(7,8,10,.88) 72%, rgba(7,8,10,0) 100%);
}
.gp-feed-tabs button {
height: 34px;
padding: 0 14px;
border-radius: 10px;
background: #111417;
border: 1px solid #23282e;
color: #88919a;
font: 700 12px "Inter", system-ui, sans-serif;
}
.gp-feed-tabs button.on {
background: #f3f4f6;
color: #050607;
border-color: #f3f4f6;
}
#gen .gp-grid {
max-width: 1500px;
margin: 0;
display: block;
columns: initial;
column-count: initial;
column-width: initial;
}
#gen .gp-empty {
min-height: calc(100vh - 190px);
border: 1px dashed #2b3138;
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
#0d0f11;
}
.gp-how {
max-width: 560px;
margin: 90px auto 0;
padding: 22px;
border-radius: 18px;
border: 1px solid #242a31;
background: #111417;
color: #dfe4e8;
}
.gp-how b {
display: block;
margin-bottom: 8px;
font: 900 24px "Inter", system-ui, sans-serif;
letter-spacing: -.04em;
}
.gp-how p {
color: #9ba5ae;
font: 500 14px/1.55 "Inter", system-ui, sans-serif;
}
.gp-skill-wall {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 18px;
}
.gp-skill-wall span {
min-height: 72px;
padding: 12px;
border-radius: 12px;
background: #0b0d0f;
border: 1px solid #242a31;
}
.gp-skill-wall b {
margin: 0 0 4px;
font: 800 12px "Inter", system-ui, sans-serif;
}
.gp-skill-wall em {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: #8a939c;
font: 600 11px/1.35 "Inter", system-ui, sans-serif;
font-style: normal;
}
.gp-preset-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 16px;
padding: 6px 2px 16px;
}
.gp-preset-head b {
color: #f5f7f9;
font: 900 28px/1 "Inter", system-ui, sans-serif;
letter-spacing: -.05em;
}
.gp-preset-head span {
max-width: 430px;
color: #88929c;
text-align: right;
font: 600 13px/1.4 "Inter", system-ui, sans-serif;
}
.gp-preset-grid {
display: grid;
grid-template-columns: repeat(4, minmax(180px, 1fr));
gap: 12px;
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
.gp-preset {
min-height: 245px;
padding: 10px;
border-radius: 18px;
background: #111417;
border: 1px solid #242a31;
color: #f5f7f9;
display: grid;
grid-template-rows: 118px 1fr auto;
gap: 12px;
text-align: left;
transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}
.gp-preset:hover,
.gp-preset.on {
transform: translateY(-2px);
border-color: #f3f4f6;
background: #151a1e;
}
.gp-preset-art {
position: relative;
overflow: hidden;
border-radius: 14px;
background:
radial-gradient(circle at 78% 18%, rgba(243,244,246,.34), transparent 25%),
radial-gradient(circle at 20% 78%, rgba(255,255,255,.13), transparent 30%),
linear-gradient(135deg, #252b32, #0b0d0f 68%);
border: 1px solid #303741;
}
.gp-preset-art i {
position: absolute;
left: 10px;
top: 10px;
padding: 5px 8px;
border-radius: 999px;
background: rgba(0,0,0,.55);
color: #f3f4f6;
font: 900 10px "JBMono", ui-monospace, monospace;
font-style: normal;
}
.gp-preset-art b {
position: absolute;
right: 12px;
bottom: 8px;
color: rgba(255,255,255,.22);
font: 900 44px/1 "Inter", system-ui, sans-serif;
letter-spacing: -.08em;
}
.gp-preset strong {
display: block;
font: 900 16px/1.05 "Inter", system-ui, sans-serif;
letter-spacing: -.035em;
}
.gp-preset em,
.gp-preset small {
display: block;
margin-top: 5px;
color: #929ca5;
font: 650 12px/1.35 "Inter", system-ui, sans-serif;
font-style: normal;
}
.gp-preset small {
color: #6f7983;
font-size: 11px;
}
.gp-preset u {
text-decoration: none;
width: max-content;
padding: 8px 10px;
border-radius: 999px;
background: #242a31;
color: #e8edf1;
font: 800 11px "Inter", system-ui, sans-serif;
}
.gp-preset.on u {
background: #f3f4f6;
color: #050607;
}
#gen .gp-bar {
grid-column: 2;
grid-row: 2;
width: min(980px, calc(100% - 44px));
justify-self: center;
margin: 0 0 22px;
padding: 10px;
border: 1px solid #252b32;
border-radius: 22px;
background: rgba(14,17,20,.96);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
position: sticky;
bottom: 0;
z-index: 3;
}
#gen .gp-bar > * {
max-width: none;
}
#gen .gp-row {
max-width: none;
display: grid;
grid-template-columns: minmax(0, 1fr) 152px;
gap: 8px;
}
.gp-prompt-label {
height: 38px;
margin-bottom: 8px;
padding: 0 10px 0 12px;
border-radius: 12px;
background: #15191d;
border: 1px solid #252b32;
display: flex;
align-items: center;
justify-content: space-between;
color: #f1f4f7;
font: 800 13px "Inter", system-ui, sans-serif;
}
.gp-prompt-toggle {
width: 38px;
height: 20px;
border-radius: 999px;
background: #f3f4f6;
color: #050607;
font: 800 10px "JBMono", ui-monospace, monospace;
}
.gp-prompt-toggle[aria-pressed="false"] {
background: #303741;
color: #98a2ac;
}
#gen .gp-prompt {
min-height: 74px;
border-radius: 16px;
background: #0c0f12;
border: 1px solid #20262d;
}
#gen .gp-prompt[hidden] { display: none; }
#gen .gp-go {
width: 100%;
height: 74px;
border-radius: 16px;
background: #eff2f5;
color: #050607;
box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
#gen .gp-ctl {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
#gen .gp-ctl > *,
#gen .gp-pick,
#gen .gp-model,
#gen .gp-ctl select,
#gen .gp-add,
#gen .gp-addv,
#gen .gp-ai,
#gen .gp-tr,
#gen .gp-see {
width: 100%;
}
#gen .gp-pick {
min-width: 210px;
flex: 1;
}
#gen .gp-model {
justify-content: space-between;
}
#gen .gp-ars,
#gen .gp-params {
display: contents;
}
#gen .gp-hint {
grid-column: 1 / -1;
margin-left: 0;
text-align: center;
}
#gen .gp-adv {
gap: 8px;
}
#gen .gp-adv label {
width: 100%;
justify-content: space-between;
}
#gen .gp-adv input[type=number],
#gen .gp-adv select {
width: 132px;
}
#gen .gp-menu {
width: 100%;
}
#gen .gp-refs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
overflow: visible;
padding-bottom: 8px;
}
#gen .gp-refs[hidden] { display: none; }
#gen .gp-ref,
#gen .gp-ref img {
width: 100%;
}
#gen .gp-ref img {
height: 84px;
}
@media (min-width: 981px) {
#gen .gp-path-steps {
max-height: 315px;
overflow: auto;
padding-right: 2px;
}
#gen .gp-guide {
max-height: 40vh;
overflow: auto;
}
}
@media (max-width: 980px) {
#gen.gp {
display: flex;
flex-direction: column;
}
#gen .gp-top {
max-height: 52vh;
border-right: 0;
border-bottom: 1px solid #20242a;
box-shadow: none;
}
#gen .gp-feed {
flex: 1;
padding: 12px;
}
#gen .gp-bar {
border-top: 1px solid #20242a;
}
#gen .gp-flow-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
#gen .gp-mode-line .gp-modes,
#gen .gp-flow-steps {
grid-template-columns: 1fr;
}
#gen .gp-row {
display: grid;
}
#gen .gp-go {
width: 100%;
height: 44px;
}
.gp-feed-tabs {
overflow-x: auto;
}
}
/* ── Crear mi personaje (automático) ── */
.gp-auto-b { height: 28px; padding: 0 14px; margin-left: auto; border-radius: 999px; background: #f3f4f6; color: #000; font: 600 12px "Inter"; transition: transform 120ms ease; }
.gp-auto-b:active { transform: scale(.97); }
.gp-auto { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(5,6,7,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gp-auto-in { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px; border-radius: 18px; background: rgba(21,24,27,.92); border: 1px solid #262a2f; border-top-color: #33383e; box-shadow: 0 30px 80px rgba(0,0,0,.6); display: grid; gap: 14px; }
.gp-auto-in header { display: flex; align-items: center; justify-content: space-between; } .gp-auto-in header b { font: 700 20px "Inter"; letter-spacing: -0.03em; color: #fff; }
.gp-auto-x { width: 30px; height: 30px; border-radius: 50%; background: #1f2327; color: #c9ccd0; }
.gp-auto-sub { font-size: 13.5px; line-height: 1.5; color: #9aa3ab; } .gp-auto-sub b { color: #fff; font-weight: 600; }
.gp-auto-f { display: grid; gap: 6px; } .gp-auto-f span { font: 600 12px "Inter"; color: #c9ccd0; }
.gp-auto-f input { height: 42px; padding: 0 14px; border-radius: 10px; background: #0f1113; border: 1px solid #262a2f; color: #fff; font: 500 15px "JBMono", monospace; outline: none; } .gp-auto-f input:focus { border-color: #5c636b; }
.gp-auto-drop { padding: 12px 14px; border-radius: 12px; border: 1px dashed #3a4047; background: #111315; display: grid; gap: 4px; }
.gp-auto-drop b { font: 600 13px "Inter"; color: #fff; } .gp-auto-drop b em { font: 400 11px "Inter"; color: #6b7280; font-style: normal; } .gp-auto-drop > span { font-size: 12px; color: #8b949c; }
.gp-auto-drop .th { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gp-auto-drop .th > span { position: relative; } .gp-auto-drop .th img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; display: block; }
.gp-auto-drop .th > span button { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.75); color: #fff; font-size: 9px; }
.gp-auto-drop .add { width: 64px; height: 64px; border-radius: 8px; border: 1px dashed #4a5057; color: #c9ccd0; font: 500 12px "Inter"; }
.gp-auto-cost { font: 500 12px "JBMono", monospace; color: #6b7280; }
.gp-auto-go { height: 48px; border-radius: 999px; background: #f3f4f6; color: #000; font: 600 15px "Inter"; transition: transform 120ms ease, opacity 150ms ease; }
.gp-auto-go:disabled { opacity: .4; } .gp-auto-go:active { transform: scale(.98); }
.gp-auto-log { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: #0c0d0e; border: 1px solid #1c1f23; list-style: none; }
.gp-auto-log[hidden] { display: none; }
.gp-auto-log li { display: grid; grid-template-columns: 16px 1fr auto; column-gap: 10px; align-items: center; font: 500 12.5px "JBMono", monospace; color: #c9ccd0; }
.gp-auto-log li i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #2a2e33; border-top-color: #fff; animation: gpSpin .7s linear infinite; }
.gp-auto-log li.ok i { animation: none; border-color: #4ade80; background: #4ade80; } .gp-auto-log li.bad i { animation: none; border-color: #ff5a5a; background: #ff5a5a; }
.gp-auto-log li img { grid-row: span 2; width: 52px; height: 52px; border-radius: 6px; object-fit: cover; }
.gp-auto-log li em { grid-column: 2; font: 400 11.5px "Inter"; font-style: normal; color: #8b949c; line-height: 1.4; }
.gp-auto-log li.bad em { color: #ff8a8a; }
/* ── FAMILIAS DE VIDEO + REFERENCIAS (30-09) · ADN Mov.ibes monocromo · solo escritorio ── */
.gp-menu { width: 400px; padding: 0; }
.gp-menu-top { position: sticky; top: 0; z-index: 1; display: grid; gap: 8px; padding: 10px; background: #141618; border-bottom: 1px solid #2a2e33; }
.gp-menu-q { width: 100%; height: 34px; padding: 0 12px; border-radius: 10px; background: #0c0d0e; border: 1px solid #2a2e33; color: #fff; font: 400 13px "Inter"; outline: none; }
.gp-menu-q:focus { border-color: #5c636b; }
.gp-menu-tabs { display: flex; gap: 4px; }
.gp-menu-tabs button { flex: 1; height: 28px; border-radius: 8px; font: 500 12px "Inter"; color: #8b949c; transition: background-color 150ms ease, color 150ms ease; }
.gp-menu-tabs button[aria-selected="true"] { background: #fff; color: #0c0d0e; }
.gp-menu-list { padding: 4px; }
.gp-fam > p { padding: 10px 10px 4px; font: 600 11px "JBMono", monospace; letter-spacing: .06em; text-transform: uppercase; color: #6c757d; }
.gp-fam > p i { font-style: normal; color: #3a3f45; }
.gp-menu-0 { padding: 16px 10px; font-size: 12px; color: #8b949c; }
.gp-modos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 0 10px; }
.gp-modos[hidden] { display: none; }
.gp-modos-t { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 2px; padding: 3px; border-radius: 10px; background: #141618; border: 1px solid #2a2e33; }
.gp-modos-t button { height: 28px; padding: 0 12px; border-radius: 7px; font: 500 12px "Inter"; color: #9aa3ab; transition: background-color 150ms ease, color 150ms ease, transform 120ms ease-out; }
.gp-modos-t button:active { transform: scale(0.97); }
.gp-modos-t button[aria-selected="true"] { background: #fff; color: #0c0d0e; box-shadow: 0 0 18px rgba(255,255,255,.18); }
@media (hover: hover) and (pointer: fine) { .gp-modos-t button:not([aria-selected="true"]):hover { color: #fff; background: #1f2327; } }
.gp-refok, .gp-refno { font-size: 12px; color: #9aa3ab; }
.gp-refok b { color: #fff; font-weight: 600; margin-right: 4px; }
.gp-refno b { color: #fff; font-weight: 600; margin-right: 4px; padding: 2px 6px; border-radius: 6px; border: 1px dashed #5c636b; }
.gp-refno button { margin-left: 6px; padding: 3px 9px; border-radius: 7px; border: 1px solid #2a2e33; color: #fff; font: 500 11px "Inter"; }
.gp-refno button:active { transform: scale(0.97); }
.gp-ctl { position: relative; }
.gp-refpanel { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 14; width: 420px; max-height: 70vh; overflow: auto; padding: 14px; border-radius: 14px; background: #141618; border: 1px solid #2a2e33; box-shadow: 0 24px 70px rgba(0,0,0,.6);
transform-origin: bottom left; transition: opacity 180ms cubic-bezier(0.23,1,0.32,1), transform 180ms cubic-bezier(0.23,1,0.32,1); }
@starting-style { .gp-refpanel { opacity: 0; transform: scale(0.97) translateY(4px); } }
.gp-refpanel header { display: grid; gap: 2px; margin-bottom: 10px; } .gp-refpanel header b { font: 600 14px "Inter"; color: #fff; } .gp-refpanel header span { font-size: 12px; color: #8b949c; }
.gp-rp-t { margin: 12px 0 6px; font: 600 11px "JBMono", monospace; letter-spacing: .06em; text-transform: uppercase; color: #6c757d; }
.gp-rp-roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.gp-rp-roles button { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: 10px; background: #0c0d0e; border: 1px solid #2a2e33; font: 500 12px "Inter"; color: #fff; transition: border-color 150ms ease, transform 120ms ease-out; }
.gp-rp-roles button i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #5c636b; font: 600 11px "JBMono", monospace; font-style: normal; }
.gp-rp-roles button:active { transform: scale(0.97); }
.gp-rp-roles button.off { opacity: .38; }
@media (hover: hover) and (pointer: fine) { .gp-rp-roles button:hover { border-color: #5c636b; } }
.gp-rp-lib { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .gp-rp-lib em { grid-column: 1/-1; font-size: 12px; color: #6c757d; font-style: normal; }
.gp-rp-lib button { display: grid; gap: 2px; padding: 6px; border-radius: 10px; border: 1px solid #2a2e33; text-align: left; }
.gp-rp-lib img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; } .gp-rp-lib b { font: 500 11px "JBMono", monospace; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gp-rp-lib span { font-size: 10px; color: #8b949c; }
.gp-rp-new { display: grid; grid-template-columns: 1fr 120px; gap: 6px; } .gp-rp-new .gp-rp-t { grid-column: 1/-1; }
.gp-rp-new input, .gp-rp-new select { height: 32px; padding: 0 10px; border-radius: 8px; background: #0c0d0e; border: 1px solid #2a2e33; color: #fff; font: 400 12px "Inter"; }
.gp-rp-new button { grid-column: 1/-1; height: 34px; border-radius: 9px; background: #fff; color: #0c0d0e; font: 600 12px "Inter"; transition: transform 120ms ease-out; } .gp-rp-new button:active { transform: scale(0.97); }
.gp-at { position: absolute; z-index: 15; width: 300px; max-height: 280px; overflow: auto; padding: 4px; border-radius: 12px; background: #141618; border: 1px solid #2a2e33; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.gp-at p { padding: 8px; font-size: 12px; color: #8b949c; } .gp-at .gp-at-w { color: #fff; border-bottom: 1px dashed #2a2e33; }
.gp-at button { width: 100%; display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; text-align: left; }
.gp-at button:hover { background: #1f2327; } .gp-at img { grid-row: span 2; width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.gp-at b { font: 500 12px "JBMono", monospace; color: #fff; } .gp-at span { font-size: 11px; color: #8b949c; }
.gp-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; } .gp-pills[hidden] { display: none; }
.gp-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 3px; border-radius: 999px; background: #fff; color: #0c0d0e; font: 500 11px "JBMono", monospace; }
.gp-pill img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.gp-pill.off { background: transparent; color: #9aa3ab; border: 1px dashed #5c636b; }
.gp-pill.no { background: transparent; color: #6c757d; border: 1px solid #2a2e33; text-decoration: line-through; padding-left: 10px; }
@media (prefers-reduced-motion: reduce) { .gp-refpanel { transition: opacity 150ms ease; } }
#gen .gp-menu { width: 400px !important; max-width: none !important; }
#gen .gp-menu-list button, #gen .gp-at button, #gen .gp-rp-lib button, #gen .gp-rp-roles button { height: auto !important; min-height: 0; white-space: normal; }
#gen .gp-refpanel { width: 420px !important; max-width: none !important; }
#gen .gp-menu-tabs button[aria-selected="true"], #gen .gp-modos-t button[aria-selected="true"] { background: #fff !important; color: #0c0d0e !important; }
@media (max-width: 900px) { .aca-host:has(> iframe.aca-real) { height: calc(100dvh - var(--top, 52px) - 60px - env(safe-area-inset-bottom)); } }
/* §caso_inevitable (08-10): galería de un caso real dentro de la clase */
.aca-gal-g, .lz-body .aca-gal-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 10px; }
.aca-gal-g figure { margin: 0; } .aca-gal-g video, .aca-gal-g img { width: 100%; height: auto; object-fit: contain; /* §caso_inevitable_hibrido: formato original */ border-radius: 10px; background: #000; display: block; }
.aca-gal-g figcaption { font-size: 12.5px; color: #8a9199; margin-top: 6px; } .aca-gal-g figcaption b { display: block; color: #fff; font-size: 13.5px; }
.aca-gal-n { font-size: 12.5px; color: #8a9199; border: 1px dashed #3a3f45; border-radius: 10px; padding: 10px 12px; margin-top: 12px; }