@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap');

:root{
  --teal:#78BBCB;
  --gray:#c0c0c0;
  --gray-dark:#7f7f7f;
  --gray-light:#ffffff;
  --navy1:#000080;
  --navy2:#1084d0;
  --ink:#0a0a0a;

  --c-sonido:#e63946;
  --c-cine:#6a4c93;
  --c-diseno:#f4a300;
  --c-web:#2a9d8f;
  --c-branding:#e07a5f;
  --c-editorial:#3d5a80;
  --c-digital:#06d6a0;
  --c-experimentos:#ff006e;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ overflow-x:hidden; }
body{
  background:var(--teal);
  font-family:'VT323', monospace;
  font-size:19px;
  color:var(--ink);
  min-height:100vh;
  padding-bottom:64px;
  position:relative;
  overflow-x:hidden;
}

/* CRT scanline overlay */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:500;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.05) 0px,
    rgba(0,0,0,0.05) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity:.5;
}

@keyframes blink{ 50%{ opacity:0; } }
.cursor{
  display:inline-block;
  width:.55em; height:1em;
  background:var(--ink);
  vertical-align:-.15em;
  margin-left:2px;
  animation:blink 1s steps(1) infinite;
}

/* ── Boot window ── */
.boot-win{
  position:fixed; top:50%; left:50%; z-index:1000;
  transform:translate(-50%,-50%);
  width:300px;
  background:var(--gray);
  border:2px solid;
  border-color:var(--gray-light) var(--gray-dark) var(--gray-dark) var(--gray-light);
  box-shadow:4px 4px 0 rgba(0,0,0,.4);
  transition:opacity .5s;
}
.boot-win.closed{ opacity:0; pointer-events:none; }
.boot-bar{
  height:18px;
  border:2px inset var(--gray-light);
  background:#fff;
  overflow:hidden;
}
.boot-fill{
  height:100%; width:0%;
  background:repeating-linear-gradient(45deg,var(--navy1) 0 8px, var(--navy2) 8px 16px);
  animation:fillbar 2.2s linear forwards;
}
@keyframes fillbar{ to{ width:100%; } }

body:not(.booted) #desktop,
body:not(.booted) #taskbar{
  opacity:0; visibility:hidden; pointer-events:none;
}
#desktop, #taskbar{ transition:opacity .6s; }
body.booted #desktop,
body.booted #taskbar{
  opacity:1; visibility:visible; pointer-events:auto;
}

/* ── Page bar (sub-pages) ── */
.pagebar{
  padding:18px 20px 4px;
}
.pagebar-row{
  display:flex; align-items:center; gap:16px;
}
.pagebar-title{
  font-family:'Press Start 2P',monospace;
  font-size:.85rem;
  color:#fff;
  text-shadow:2px 2px 0 var(--navy1);
  letter-spacing:.03em;
}
.pagebar-sub{
  margin-top:8px;
  font-size:1rem;
  color:#e8fffb;
}

/* ── Desktop icon grid ── */
.desktop{
  display:grid;
  grid-template-columns:repeat(auto-fill, 92px);
  gap:26px 18px;
  justify-content:start;
  padding:24px 24px 40px;
}

.icon{
  display:flex; flex-direction:column; align-items:center;
  width:92px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.icon-glyph{
  width:64px; height:64px;
  display:flex; align-items:center; justify-content:center;
  font-size:2.6rem;
  filter:drop-shadow(2px 3px 0 rgba(0,0,0,.35));
}
.icon-label{
  margin-top:2px;
  font-family:'VT323',monospace;
  font-size:.95rem;
  color:#fff;
  text-align:center;
  text-shadow:1px 1px 2px rgba(0,0,0,.9), 0 0 4px rgba(0,0,0,.5);
  line-height:1.15;
  padding:1px 4px;
}
.icon:active .icon-label{
  background:var(--navy1);
}

/* ── Windows (opened on demand) ── */
.win{
  position:fixed;
  width:270px;
  background:var(--gray);
  border:2px solid;
  border-color:var(--gray-light) var(--gray-dark) var(--gray-dark) var(--gray-light);
  box-shadow:3px 3px 0 rgba(0,0,0,.35);
  transform:translate(var(--tx,0px),var(--ty,0px));
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:1000;
}
.win.shown{ opacity:1; pointer-events:auto; }
.win.dragging{ z-index:2000 !important; box-shadow:6px 6px 0 rgba(0,0,0,.4); transition:none; }

.titlebar{
  background:linear-gradient(90deg,var(--navy1),var(--navy2));
  color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 6px;
  cursor:grab;
  user-select:none;
  touch-action:none;
  font-size:.95rem;
  letter-spacing:.02em;
}
.titlebar:active{ cursor:grabbing; }
.tb-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-btns{ display:flex; gap:3px; flex-shrink:0; }
.tb-btn{
  width:17px; height:16px;
  background:var(--gray);
  border:1px outset var(--gray-light);
  color:var(--ink);
  font-family:'VT323',monospace;
  font-size:.85rem;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.tb-btn:active{ border-style:inset; }

.win-body{
  padding:12px 12px 14px;
}
.win.minimized .win-body{ display:none; }

.thumb{
  height:96px;
  display:flex; align-items:center; justify-content:center;
  font-size:2.6rem;
  border:2px inset var(--gray-light);
  margin-bottom:10px;
}

.tag{
  display:inline-block;
  font-size:.7rem;
  letter-spacing:.08em;
  color:#fff;
  padding:2px 7px;
  margin-bottom:8px;
  font-family:'VT323',monospace;
}

.win-title{
  font-size:1.25rem;
  line-height:1.1;
  margin-bottom:6px;
}
.win-year{
  font-size:.85rem;
  color:#333;
  margin-bottom:8px;
}
.win-desc{
  font-size:.95rem;
  line-height:1.35;
  color:#222;
  margin-bottom:10px;
}

.win-action{
  display:inline-block;
  font-family:'VT323',monospace;
  font-size:.95rem;
  background:var(--gray);
  border:2px outset var(--gray-light);
  padding:3px 10px;
  cursor:pointer;
  text-decoration:none;
  color:var(--ink);
}
.win-action:active{ border-style:inset; }

/* category thumb colors */
.win[data-cat="sonido"] .thumb{ background:var(--c-sonido); }
.win[data-cat="cine"] .thumb{ background:var(--c-cine); }
.win[data-cat="diseno"] .thumb{ background:var(--c-diseno); }
.win[data-cat="web"] .thumb{ background:var(--c-web); }
.win[data-cat="branding"] .thumb{ background:var(--c-branding); }
.win[data-cat="editorial"] .thumb{ background:var(--c-editorial); }
.win[data-cat="digital"] .thumb{ background:var(--c-digital); }
.win[data-cat="experimentos"] .thumb{ background:var(--c-experimentos); }

.win[data-cat="sonido"] .tag{ background:var(--c-sonido); }
.win[data-cat="cine"] .tag{ background:var(--c-cine); }
.win[data-cat="diseno"] .tag{ background:var(--c-diseno); }
.win[data-cat="web"] .tag{ background:var(--c-web); }
.win[data-cat="branding"] .tag{ background:var(--c-branding); }
.win[data-cat="editorial"] .tag{ background:var(--c-editorial); }
.win[data-cat="digital"] .tag{ background:var(--c-digital); }
.win[data-cat="experimentos"] .tag{ background:var(--c-experimentos); }

/* ── Taskbar ── */
#taskbar{
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  height:44px;
  background:var(--gray);
  border-top:2px solid var(--gray-light);
  display:flex; align-items:center;
  padding:0 8px;
  gap:10px;
}
#start-btn{
  font-family:'VT323',monospace;
  font-size:1.05rem;
  font-weight:bold;
  background:var(--gray);
  border:2px outset var(--gray-light);
  padding:5px 14px;
  cursor:pointer;
  color:var(--ink);
}
#start-btn.active{ border-style:inset; }
#taskbar .spacer{ flex:1; }
#clock{
  font-family:'VT323',monospace;
  font-size:1.05rem;
  border:2px inset var(--gray-light);
  padding:4px 10px;
  background:var(--gray);
}

#contact-pop{
  position:fixed; bottom:44px; left:8px; z-index:200;
  width:min(300px,80vw);
  background:var(--gray);
  border:2px solid;
  border-color:var(--gray-light) var(--gray-dark) var(--gray-dark) var(--gray-light);
  box-shadow:3px 3px 0 rgba(0,0,0,.35);
  display:none;
}
#contact-pop.open{ display:block; }
#contact-pop .titlebar{ cursor:default; }
#contact-pop .win-body{ padding:8px; }
.clink{
  display:flex; justify-content:space-between;
  padding:7px 4px;
  text-decoration:none;
  color:var(--ink);
  border-bottom:1px solid var(--gray-dark);
  font-size:1.05rem;
}
.clink:last-child{ border-bottom:none; }
.clink:hover{ background:var(--navy2); color:#fff; }

@media (max-width:900px){
  .win{ width:230px; }
}
@media (max-width:480px){
  .win{ width:min(250px,84vw); }
  .desktop{ grid-template-columns:repeat(auto-fill, 78px); gap:20px 10px; padding:18px 14px 40px; }
  .icon{ width:78px; }
}