@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');
:root{font-family:Inter,system-ui,sans-serif;color:#f1f4fc;background:#090d1b;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow-x:hidden;background:radial-gradient(ellipse at 50% 10%,#17213b 0%,#090d1b 56%)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #7ba9ff;outline-offset:3px}[hidden]{display:none!important}.ambient{position:fixed;z-index:-1;pointer-events:none;filter:blur(80px);opacity:.25;border-radius:50%}.ambient-one{width:330px;height:330px;background:#1f62ff;top:10%;left:-200px}.ambient-two{width:360px;height:360px;background:#a12865;right:-230px;top:38%}.topbar{height:78px;max-width:1160px;margin:auto;padding:0 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff13}.brand{font-family:'DM Mono',monospace;font-size:15px;font-weight:500;letter-spacing:.12em;display:flex;align-items:center;gap:12px}.brand-mark{font-size:32px;color:#7aa5ff}.brand small{display:block;color:#79869e;font-size:9px;margin-top:4px;letter-spacing:.16em}.status{font:10px 'DM Mono',monospace;color:#9ca9bc;letter-spacing:.1em}.status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#4adea7;margin-right:7px;box-shadow:0 0 12px #4adea7}.shell{max-width:750px;margin:0 auto;padding:48px 22px 60px}.eyebrow{display:flex;align-items:center;gap:16px;justify-content:center;color:#8794ae;font:10px 'DM Mono',monospace;letter-spacing:.2em;text-align:center}.line{width:45px;height:1px;background:#47526c}.hero{text-align:center;padding:22px 0 34px}.edition{color:#85a8fb;font:11px 'DM Mono',monospace;letter-spacing:.2em}.hero h1{font:900 clamp(66px,13vw,112px)/.82 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.015em;margin:20px 0 24px}.hero h1 em{font-style:normal;color:#85a8ff;text-shadow:0 0 48px #3265ee60}.subtitle{font-size:14px;color:#aab5cb;line-height:1.7;margin:0}.terminal{background:linear-gradient(145deg,#121a2c,#0d1323);border:1px solid #394560;border-radius:13px;box-shadow:0 28px 100px #0008,0 0 0 5px #ffffff05;overflow:hidden}.terminal-top{height:49px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #303b53;padding:0 22px;color:#8897b4;font:10px 'DM Mono',monospace;letter-spacing:.08em}.terminal-top>span:first-child{display:flex;gap:6px}.terminal-top i{width:7px;height:7px;display:block;border-radius:50%}.red-dot{background:#fc6473}.yellow-dot{background:#e6bc5b}.green-dot{background:#65d6a1}.terminal-code{color:#53627e}.screen{padding:37px 48px 40px;text-align:center}.glyph{font-size:46px;color:#7ca6ff;margin:0 0 14px}.section-label{color:#7ca6ff;font:10px 'DM Mono',monospace;letter-spacing:.18em}.screen h2{font:800 38px 'Barlow Condensed',sans-serif;margin:14px 0 8px;text-transform:uppercase;letter-spacing:.02em}.screen>p{font-size:13px;color:#9ba8bf;line-height:1.8;max-width:440px;margin:0 auto 25px}.screen form{text-align:left;max-width:400px;margin:25px auto 0}.screen label{font:10px 'DM Mono',monospace;letter-spacing:.14em;color:#a4b0c6;display:block;margin-bottom:10px}.screen input{width:100%;height:54px;border:1px solid #3c4a65;background:#0a1020;border-radius:6px;color:white;text-align:center;font:16px 'DM Mono',monospace;letter-spacing:.1em;padding:0 14px}.screen input::placeholder{color:#5e6b83}.primary{margin-top:14px;background:#7199f8;color:#09152d;border:0;border-radius:6px;width:100%;min-height:53px;padding:12px 16px;font:700 12px Inter,sans-serif;letter-spacing:.04em;display:flex;align-items:center;justify-content:center;gap:15px;transition:background .2s,transform .2s}.primary:hover{background:#a0baff;transform:translateY(-1px)}.primary span{font-size:19px}.screen .hint{font-size:11px;color:#72829f;margin:22px auto 0}.inline-button{border:0;background:none;color:#9db9ff;text-decoration:underline;padding:0;font:inherit}.error{color:#ff8e9a;font-size:12px;line-height:1.5}.riddle{text-align:left;background:#18233a;border:1px solid #354764;padding:22px;border-radius:7px;max-width:400px;margin:auto}.riddle span,.mission span,.faction-panel span{font:10px 'DM Mono',monospace;letter-spacing:.13em;color:#8fa9e9;display:block;margin-bottom:12px}.riddle strong{font-size:15px;line-height:1.7;font-weight:600}.back{background:none;border:0;color:#8393b1;margin-top:24px;font:11px 'DM Mono',monospace}.faction-emblem{font-size:60px;margin:0 0 10px}.faction-panel{padding:25px;border:1px solid #3b5da1;background:#152447;border-radius:8px;margin:24px 0}.faction-panel h3{font:900 48px/.95 'Barlow Condensed',sans-serif;margin:0 0 12px}.faction-panel p{font-size:13px;color:#c4d1e9;line-height:1.6;margin:0}.faction-panel.villain{background:#351829;border-color:#954263}.faction-panel.villain span{color:#ff99b6}.mission{border:1px dashed #4a5772;border-radius:8px;text-align:left;padding:20px}.mission p{font-size:13px;line-height:1.7;color:#b2bfd4;margin:0}.bottom-meta{display:flex;justify-content:space-between;gap:15px;margin-top:22px;color:#63718a;font:9px 'DM Mono',monospace;letter-spacing:.06em}footer{text-align:center;border-top:1px solid #ffffff10;padding:25px;color:#57647b;font:9px 'DM Mono',monospace;letter-spacing:.1em}footer span{color:#7b9ef6}@media(max-width:560px){.topbar{padding:0 16px;height:67px}.brand{font-size:12px}.brand small{font-size:8px}.status{font-size:8px}.shell{padding:35px 14px 45px}.hero h1{font-size:clamp(61px,17vw,87px)}.eyebrow{font-size:8px}.line{width:20px}.screen{padding:29px 22px 34px}.screen h2{font-size:32px}.terminal-top{padding:0 13px;font-size:8px}.terminal-code{display:none}.bottom-meta{font-size:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
/* Branding: Operación Multiverso · facciones azul y carmesí */
:root{--hero-blue:#23baff;--villain-red:#ff174d}
body{background:radial-gradient(ellipse at 50% 25%,#19152f 0%,#090b1b 62%);isolation:isolate}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;background:linear-gradient(90deg,#004a9450 0%,transparent 36%,transparent 64%,#a5003d50 100%)}
.topbar{position:relative;z-index:2;max-width:1500px;border-bottom-color:#ffffff23}
.brand-mark{color:#38c8ff}.brand small{color:#b1b6d0}
.character-art{position:fixed;top:70px;bottom:0;width:min(33vw,540px);z-index:-1;background-position:center top;background-repeat:no-repeat;background-size:cover;pointer-events:none;opacity:.92}
.heroes-art{left:0;background-image:linear-gradient(90deg,transparent 58%,#090b1b 100%),linear-gradient(0deg,#090b1b 0%,transparent 30%),url('./assets/heroes-cinematic.webp'),url('./assets/heroes.svg')}
.villains-art{right:0;background-image:linear-gradient(270deg,transparent 58%,#090b1b 100%),linear-gradient(0deg,#090b1b 0%,transparent 30%),url('./assets/villanos-cinematic.webp'),url('./assets/villanos.svg')}
.shell{position:relative;z-index:1;max-width:690px;padding-top:32px}
.hero{padding-top:12px;padding-bottom:30px}
.hero .edition{font-size:12px;letter-spacing:.42em;color:#dbe7ff}
.hero h1{font-size:clamp(66px,10vw,102px);margin:18px 0 24px;line-height:.92;filter:drop-shadow(0 5px 10px #000a)}
.operation-label{display:inline-block;font-size:.35em;line-height:1.2;letter-spacing:.15em;padding:3px 22px;background:linear-gradient(110deg,#a9001d,#fa1439);color:white;transform:skew(-9deg);box-shadow:0 8px 28px #ff124966}
.hero h1 em{color:#f6f7ff;letter-spacing:-.02em;text-shadow:3px 4px 0 #162c65,-3px -2px 0 #c8ddff,0 0 28px #1685ff90}
.hero-slogan{font-size:clamp(14px,2.2vw,20px);font-weight:800;letter-spacing:.06em;line-height:1.4;margin:0 0 13px}
.hero-slogan strong{color:#ff3158}
.hero .subtitle{max-width:450px;margin:auto;color:#e1e4f3;text-shadow:0 2px 6px #000;font-size:13px}
.terminal{background:linear-gradient(125deg,#101b32f5,#1b1127f5);border:1px solid #7a548b;box-shadow:-2px 0 22px #0088ff30,2px 0 22px #f8005a30,0 25px 60px #000b;backdrop-filter:blur(12px)}
.terminal-top{background:#090d1f9c}
.primary{background:linear-gradient(110deg,#d9002e,#ff174e);color:#fff;box-shadow:0 8px 22px #e5003e3d}
.primary:hover{background:linear-gradient(110deg,#ff2350,#ff4b70)}
.screen input{border-color:#5c668a;background:#0a0f22}
.screen input:focus{border-color:#48caff}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0 6px;text-align:center}
.steps>div{padding:12px 4px;border-right:1px solid #ffffff30;display:flex;align-items:center;justify-content:center;gap:10px}
.steps>div:last-child{border:0}
.steps b{font:800 29px 'Barlow Condensed',sans-serif;color:#80aaff}
.steps>div:last-child b{color:#ff4a76}
.steps span{font-size:10px;font-weight:800;line-height:1.4;letter-spacing:.06em}
.faction-panel{box-shadow:0 0 28px #006fff27}
.faction-panel.villain{box-shadow:0 0 28px #ff006027}
@media(max-width:1050px){.character-art{width:30vw;opacity:.6}.shell{max-width:620px}}
@media(max-width:650px){.character-art{top:65px;bottom:auto;height:480px;width:48vw;opacity:.55}.heroes-art{background-position:56% top}.villains-art{background-position:44% top}.shell{padding-top:28px}.hero{padding-bottom:24px}.hero h1{font-size:clamp(58px,14vw,88px)}.hero .subtitle{font-size:12px;max-width:330px}.hero-slogan{font-size:14px}.terminal{backdrop-filter:blur(18px)}.steps{gap:0}.steps>div{gap:5px}.steps b{font-size:24px}.steps span{font-size:8px}}

/* Mobile-first recruitment: access form visible without scrolling on typical phones */
@media(max-width:650px){
  .topbar{height:48px;padding:0 14px}
  .brand{gap:6px;font-size:11px}.brand-mark{font-size:22px}.brand small{font-size:7px;margin-top:2px}
  .status{font-size:8px}
  .shell{padding:8px 12px 25px;max-width:460px}
  .eyebrow{display:none}
  .hero{padding:5px 0 12px}
  .hero .edition{font-size:9px;letter-spacing:.24em;margin:3px 0}
  .hero h1{font-size:clamp(48px,13vw,72px);margin:7px 0 8px;line-height:.84}
  .operation-label{font-size:.32em;padding:2px 13px}
  .hero-slogan{font-size:11px;line-height:1.3;margin:0}
  .hero .subtitle{display:none}
  .character-art{top:48px;height:260px;opacity:.35}
  .terminal-top{height:30px}
  .screen{padding:13px 18px 17px}
  #screen-access .glyph{display:none}
  #screen-access .section-label{font-size:9px}
  #screen-access h2{font-size:24px;margin:6px 0 2px}
  #screen-access>p{font-size:11px;line-height:1.4;margin:0 auto 8px}
  #screen-access form{margin:10px auto 0}
  #screen-access label{font-size:9px;margin-bottom:6px}
  #screen-access input{height:48px;font-size:16px}
  #screen-access .primary{min-height:48px;margin-top:9px}
  #screen-access .hint{font-size:10px;margin:11px auto 0;line-height:1.5}
  .steps{margin:9px 0 0}
  .steps>div{padding:4px 2px}
  .steps b{font-size:20px}
  .steps span{font-size:8px}
  .bottom-meta{margin-top:10px}
  footer{padding:12px;font-size:8px}
}
@media(max-width:650px) and (max-height:700px){
  .hero h1{font-size:clamp(44px,11vw,58px)}
  .hero{padding-bottom:8px}
  .hero-slogan{font-size:10px}
  #screen-access h2{font-size:21px}
  .steps,.bottom-meta,footer{display:none}
  #screen-access .hint{margin-top:7px}
}
@media(max-width:650px) and (max-height:560px){
  .hero .edition{display:none}
  .hero h1{margin:4px 0 5px}
  #screen-access>p{display:none}
  .terminal-top{height:26px}
  .screen{padding:10px 16px}
}