@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{--bg:#020104;--g:#14FF00;--gs:#5baa55;--w:#d9e4d8;--p:#B700FF}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:#020104;color:var(--w);font-family:"IBM Plex Mono",monospace;overflow-x:hidden}
.reference-bg{position:fixed;inset:-2%;width:104%;height:104%;object-fit:cover;object-position:center;z-index:0;opacity:.38;filter:brightness(.72) saturate(.62) contrast(1.18);mix-blend-mode:screen;transform:scale(1.035);animation:bgFault 9.8s steps(1) infinite;pointer-events:none}
.data-layer{position:fixed;inset:0;z-index:2;overflow:hidden;pointer-events:none;color:var(--g);font-size:clamp(8px,1vw,13px);line-height:1.45;letter-spacing:1.2px;opacity:.43;text-shadow:0 0 5px rgba(20,255,0,.16)}
.data-block{position:absolute;display:flex;flex-direction:column;gap:2px;white-space:nowrap;animation:flicker var(--s,5s) steps(4) infinite,jitter var(--j,8s) steps(2) infinite}.data-block span:nth-child(2n){opacity:.61}.data-block span:nth-child(3n){opacity:.36}.data-block span:nth-child(4n){opacity:.77}
.b1{left:4%;top:7%;--s:6.1s;--j:11s}.b2{left:24%;top:9%;--s:4.7s;--j:8s}.b3{right:4%;top:27%;--s:5.1s;--j:9s}.b4{right:10%;top:45%;--s:8s;--j:14s}.b5{left:5%;bottom:19%;--s:6.8s;--j:10s}.b6{left:7%;bottom:9%;--s:4.2s;--j:12s}.b7{left:34%;bottom:8%;--s:7.1s;--j:8s}.b8{left:4%;top:74%;--s:5.6s;--j:15s}.b9{right:6%;bottom:6%;--s:8.2s;--j:11s}.b10{left:57%;bottom:7%;--s:6.6s;--j:13s}
.note{position:fixed;z-index:7;width:min(350px,25vw);min-width:285px;padding:15px 17px 13px;border:1px solid rgba(183,0,255,.78);background:rgba(10,2,15,.62);color:#c67be2;box-shadow:0 0 16px rgba(183,0,255,.05),inset 0 0 18px rgba(183,0,255,.03);animation:note 8.4s steps(2) infinite}.note-one{left:4.5vw;top:20%}.note-two{left:4.5vw;top:55%}.hint-note{display:none;right:4.5vw;top:58%;width:min(300px,23vw);min-width:250px}.hint-note.visible{display:block}.note-head{margin-bottom:16px;font-size:10px;letter-spacing:1.1px;color:#d26bf2}.note-text{font-size:11px;line-height:1.65;letter-spacing:.15px}.note a{color:#d26bf2;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}.note a:hover{color:var(--p)}.note-cursor{margin-top:10px;color:var(--p);animation:blink 1.7s steps(2) infinite}
.scanlines,.noise,.vignette,.flash,.tear,.monitor-frame{position:fixed;inset:0;pointer-events:none}.scanlines{z-index:10;background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.3) 3px,rgba(255,255,255,.018) 4px);opacity:.82}.noise{z-index:11;inset:-60%;opacity:.12;background-image:repeating-radial-gradient(circle at 20% 30%,rgba(255,255,255,.65) 0 1px,transparent 1px 4px);background-size:5px 5px;animation:noise .11s steps(2) infinite}.vignette{z-index:12;background:radial-gradient(ellipse at center,transparent 28%,rgba(0,0,0,.25) 61%,rgba(0,0,0,.9) 100%)}.flash{z-index:13;background:#e7d7ed;opacity:0;mix-blend-mode:screen;animation:flash 11.7s steps(1) infinite}.tear{left:-4%;width:108%;height:2px;z-index:14;background:rgba(20,255,0,.34);box-shadow:0 0 6px rgba(20,255,0,.25);opacity:0}.tear-a{top:38%;animation:tearA 7.8s steps(1) infinite}.tear-b{top:72%;animation:tearB 10.4s steps(1) infinite}.monitor-frame{z-index:15;inset:9px;border:1px solid rgba(183,0,255,.12);border-radius:15px;box-shadow:inset 0 0 80px rgba(0,0,0,.84),0 0 25px rgba(0,0,0,.74)}
.screen{position:relative;z-index:6;width:min(94vw,1180px);min-height:100vh;margin:auto;padding:24px 0 30px}.topbar{display:flex;justify-content:space-between;border-bottom:1px solid rgba(20,255,0,.14);padding-bottom:9px;color:var(--gs);font-size:9px;letter-spacing:2px}.topbar span:last-child{color:#7e3e92}.topbar i{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--g);box-shadow:0 0 8px var(--g);animation:blink 1.7s steps(2) infinite}
.hero{width:min(650px,100%);margin:10vh 0 0 29%;position:relative}.file-tag{color:var(--gs);font-size:10px;letter-spacing:2px;margin-bottom:20px;animation:badText 6.8s steps(2) infinite}.title-wrap{position:relative;width:max-content;animation:titleFault 7.2s steps(2) infinite}h1{position:relative;margin:0;font-family:"Microsoft Yi Baiti","Times New Roman",serif;font-weight:400;font-size:clamp(78px,13vw,142px);line-height:.66;letter-spacing:.035em;color:var(--w);text-shadow:2px 0 rgba(20,255,0,.33),-2px 0 rgba(183,0,255,.4)}h1:before,h1:after{content:attr(data-text);position:absolute;inset:0}.h1{}h1:before{color:var(--g);opacity:.45;clip-path:inset(17% 0 63% 0);transform:translate(-5px,0);animation:sliceA 4.1s steps(2) infinite}h1:after{color:var(--p);opacity:.42;clip-path:inset(62% 0 11% 0);transform:translate(5px,0);animation:sliceB 5.7s steps(2) infinite}
.error-line{display:flex;gap:12px;margin-top:28px;color:var(--g);font-size:11px;letter-spacing:2px;animation:flicker 8s steps(4) infinite}.error-line span:nth-child(2){color:var(--p)}
.terminal{margin:34px 0 31px;padding:13px 18px;border-left:1px solid rgba(20,255,0,.42);background:rgba(7,2,10,.48);color:#527f52;font-size:10px;line-height:1.9}.terminal p{margin:0}.terminal em{color:var(--gs);font-style:normal}.terminal strong{color:var(--g);font-weight:500}
.access label{display:block;margin-bottom:8px;color:var(--gs);font-size:9px;letter-spacing:2px}.input-row{display:flex;height:52px;border:1px solid rgba(20,255,0,.46);background:rgba(5,2,8,.64);box-shadow:inset 0 0 15px rgba(20,255,0,.035)}.prompt{width:43px;display:grid;place-items:center;color:var(--g);border-right:1px solid rgba(20,255,0,.18)}input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--g);padding:0 14px;font:12px "IBM Plex Mono",monospace;letter-spacing:3px}input::placeholder{color:#386138}button{width:100%;height:47px;margin-top:8px;display:flex;justify-content:space-between;align-items:center;padding:0 14px;border:1px solid rgba(20,255,0,.72);background:rgba(20,255,0,.045);color:var(--g);cursor:pointer;font:600 11px "IBM Plex Mono",monospace;letter-spacing:2px}button:hover{background:rgba(20,255,0,.1);box-shadow:0 0 18px rgba(20,255,0,.08)}button small{color:#427342;font:9px "IBM Plex Mono",monospace}.message{min-height:115px;margin-top:26px;padding:17px;border:1px solid rgba(20,255,0,.25);background:rgba(5,2,8,.58);color:var(--w);font-size:11px;line-height:1.8}.message:empty{display:none}.message.success{border-color:rgba(20,255,0,.7)}.message.denied{border-color:rgba(183,0,255,.55)}.message h2{margin:0 0 8px;color:var(--g);font-size:18px;letter-spacing:3px}.message strong{color:var(--g)}footer{display:flex;justify-content:space-between;margin-top:40px;color:#386138;font-size:8px;letter-spacing:2px}footer span:last-child{color:#7c3d8d}
@keyframes flicker{0%,8%,100%{opacity:.38;filter:brightness(.68)}9%{opacity:.7;filter:brightness(1.15)}10%{opacity:.14}11%{opacity:.45}42%{opacity:.42}43%{opacity:.76;filter:brightness(1.24)}44%{opacity:.18}45%{opacity:.44}79%{opacity:.36}80%{opacity:.75}81%{opacity:.11}82%{opacity:.44}}
@keyframes jitter{0%,87%,100%{transform:translate(0)}88%{transform:translate(-3px,0)}89%{transform:translate(5px,1px)}90%{transform:translate(-1px,0)}}
@keyframes bgFault{0%,36%,100%{filter:brightness(.72) saturate(.62) contrast(1.18);transform:scale(1.035)}37%{filter:brightness(1.12) saturate(.92) contrast(1.3);transform:translateX(-3px) scale(1.042)}37.5%{filter:brightness(.28) saturate(.18) contrast(1.45);transform:translateX(6px) scale(1.035)}38%{filter:brightness(.72) saturate(.62) contrast(1.18);transform:translateX(0) scale(1.035)}71%{filter:brightness(.72) saturate(.62) contrast(1.18)}72%{filter:brightness(1) saturate(1) contrast(1.26);transform:translateX(4px) scale(1.04)}72.4%{filter:brightness(.25) saturate(.15) contrast(1.48);transform:translateX(-6px) scale(1.035)}73%{filter:brightness(.72) saturate(.62) contrast(1.18);transform:translateX(0) scale(1.035)}}
@keyframes noise{0%{transform:translate(0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-2%)}}@keyframes flash{0%,18%,18.2%,42%,42.12%,68%,68.18%,100%{opacity:0}18.05%,42.07%,68.1%{opacity:.08}}@keyframes tearA{0%,69%,70%,100%{opacity:0;transform:translateX(0)}69.2%{opacity:.65;transform:translateX(-8px)}69.5%{opacity:.18;transform:translateX(13px)}}@keyframes tearB{0%,31%,31.2%,81%,81.15%,100%{opacity:0;transform:translateX(0)}31.05%,81.07%{opacity:.5;transform:translateX(11px)}}@keyframes blink{0%,37%,100%{opacity:1}38%,62%{opacity:.18}}@keyframes badText{0%,89%,100%{transform:translate(0);opacity:1}90%{transform:translate(-8px,0);opacity:.25}91%{transform:translate(7px,1px);opacity:.8}}@keyframes titleFault{0%,88%,100%{transform:translate(0)}89%{transform:translate(-6px,0)}90%{transform:translate(7px,-1px)}91%{transform:translate(0)}}@keyframes sliceA{0%,82%,100%{transform:translate(-5px,0);opacity:.45}83%{transform:translate(10px,-2px);opacity:.75}84%{transform:translate(-14px,1px);opacity:.18}85%{transform:translate(-5px,0)}}@keyframes sliceB{0%,76%,100%{transform:translate(5px,0);opacity:.42}77%{transform:translate(-11px,2px);opacity:.72}78%{transform:translate(12px,0);opacity:.15}79%{transform:translate(5px,0)}}@keyframes note{0%,90%,100%{transform:translate(0);filter:brightness(1)}91%{transform:translate(-2px,0);filter:brightness(1.4)}92%{transform:translate(4px,1px);filter:brightness(.72)}93%{transform:translate(0);filter:brightness(1)}}
@media(max-width:1100px){.note-one{left:4vw;top:10%;width:290px;min-width:0}.note-two{left:4vw;top:31%;width:290px;min-width:0}.hint-note{right:4vw;top:62%;width:270px;min-width:0}.hero{margin:55vh auto 0;width:min(650px,88vw)}.reference-bg{opacity:.26}}@media(max-width:700px){.screen{width:88vw}.hero{margin:58vh auto 0}.note-one,.note-two,.hint-note{width:88vw;left:6vw;right:auto}.note-one{top:5%}.note-two{top:25%}.hint-note{top:50%}.data-layer{font-size:8px}footer{flex-direction:column;gap:10px}.topbar{font-size:8px}}

/* === WINNER FORM === */
.winner-form{
  margin-top:28px;
  padding:18px;
  border:1px solid rgba(20,255,0,.48);
  background:rgba(4,2,8,.72);
  color:var(--paper);
  box-shadow:inset 0 0 24px rgba(20,255,0,.025);
  animation:formBoot .8s steps(4);
}
.winner-form[hidden]{display:none}
.winner-form-head{
  color:var(--green);
  font-size:17px;
  letter-spacing:3px;
  margin-bottom:12px;
}
.winner-form-copy{font-size:11px;line-height:1.72;color:#aab9aa}
.winner-form-copy p{margin:0 0 10px}
.winner-form-copy strong{color:var(--green);font-weight:600}
#contactForm{margin-top:18px}
#contactForm label{
  display:block;
  margin:0 0 10px;
  color:#8aa28c;
  font-size:9px;
  letter-spacing:1.5px;
}
#contactForm input{
  display:block;
  width:100%;
  height:42px;
  margin-top:6px;
  padding:0 11px;
  border:1px solid rgba(183,0,255,.32);
  background:rgba(8,2,12,.82);
  color:var(--paper);
  font:11px "IBM Plex Mono",monospace;
  letter-spacing:1px;
}
#contactForm input:focus{border-color:rgba(183,0,255,.75)}
#contactForm button{margin-top:13px}
.contact-message{min-height:0;margin-top:12px;font-size:10px;line-height:1.6}
.contact-message.success{color:var(--green)}
.contact-message.error{color:#d26bf2}
@keyframes formBoot{
  0%{opacity:0;transform:translateX(-8px)}
  50%{opacity:.5;transform:translateX(3px)}
  100%{opacity:1;transform:translateX(0)}
}

/* Acomodamos las ventanas laterales en desktop. */
@media(min-width:1101px){
  .note-two{left:4.5vw;top:59%;width:min(350px,25vw)}
  .hint-note{right:4.5vw;top:58%}
}
@media(max-width:1100px){
  .note-two{left:4vw;top:31%;width:290px;min-width:0}
  .hint-note{right:4vw;top:62%;width:270px;min-width:0}
}
@media(max-width:700px){
  .note-two{top:25%}
  .hint-note{top:50%}
  .winner-form{margin-top:22px}
}