:root{
  --bg:#e8e4f0; --ink:#1e1830; --muted:#5a5274; --line:#1e1830; --panel:#ddd7ea;
  --gh:#e8892e; --gh-ink:#1e1830; --gh-text:#a8520f;
  --ma:#12955f; --ma-ink:#ffffff; --ma-text:#0d7a4c;
  --fp:#b4421f; --fp-ink:#ffffff; --fp-text:#9a3518;
  --tf:#5b3fd0; --tf-ink:#ffffff; --tf-text:#4a30b5;
  color-scheme: light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#16121f; --ink:#f1ead9; --muted:#a79fbf; --line:#3d3555; --panel:#201a2e;
    --gh:#f0913a; --gh-ink:#16121f; --gh-text:#f0913a;
    --ma:#4ef0a5; --ma-ink:#16121f; --ma-text:#4ef0a5;
    --fp:#e0603e; --fp-ink:#16121f; --fp-text:#e0603e;
    --tf:#a08cff; --tf-ink:#16121f; --tf-text:#b8a8ff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#16121f; --ink:#f1ead9; --muted:#a79fbf; --line:#3d3555; --panel:#201a2e;
  --gh:#f0913a; --gh-ink:#16121f; --gh-text:#f0913a;
  --ma:#4ef0a5; --ma-ink:#16121f; --ma-text:#4ef0a5;
  --fp:#e0603e; --fp-ink:#16121f; --fp-text:#e0603e;
  --tf:#a08cff; --tf-ink:#16121f; --tf-text:#b8a8ff;
  color-scheme: dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:"VT323", ui-monospace, "Courier New", monospace; font-size:23px; line-height:1.3}
a{color:inherit}
.pixel{font-family:"Press Start 2P", ui-monospace, monospace; font-weight:normal}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}

/* barra superior */
.top{border-bottom:3px solid var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:14px; padding-bottom:14px}
.brand{text-decoration:none; display:flex; flex-direction:column; gap:4px}
.brand b{font-family:"Press Start 2P", ui-monospace, monospace; font-weight:normal; font-size:15px; letter-spacing:1px}
.brand span{color:var(--muted); font-size:19px; line-height:1}
nav ul{list-style:none; margin:0; padding:0; display:flex; gap:6px 18px; flex-wrap:wrap}
nav a{text-decoration:none; font-size:22px; padding:2px 0; border-bottom:3px solid transparent}
nav a:hover{border-bottom-color:var(--tf)}
nav a[aria-current="page"]{border-bottom-color:var(--tf); color:var(--tf-text)}
nav a:focus-visible, .brand:focus-visible{outline:3px solid var(--tf); outline-offset:3px}

main.wrap{padding-top:40px; padding-bottom:64px}
.hero{margin-bottom:44px}
h1{font-family:"Press Start 2P", ui-monospace, monospace; font-weight:normal; font-size:clamp(30px,6.5vw,60px); line-height:1.1; margin:0 0 18px; letter-spacing:2px}
h1.stack{text-shadow:4px 4px 0 var(--gh), 8px 8px 0 var(--fp), 12px 12px 0 var(--ma)}
.lead{max-width:46ch; margin:0; color:var(--muted)}
h2.section{font-family:"Press Start 2P", ui-monospace, monospace; font-weight:normal; font-size:clamp(16px,2.2vw,20px); line-height:1.4; margin:64px 0 10px}
.section-lead{margin:0 0 28px; color:var(--muted); max-width:52ch}

/* juegos */
.games{display:flex; flex-direction:column; gap:48px}
.game{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:28px; align-items:center}
.screen{display:block; border:6px solid var(--accent); background:#000; box-shadow:8px 8px 0 var(--line); line-height:0}
.screen img{width:100%; height:auto; image-rendering:pixelated; image-rendering:crisp-edges; display:block}
.screen:focus-visible{outline:4px solid var(--ink); outline-offset:4px}
.info h3{font-family:"Press Start 2P", ui-monospace, monospace; font-weight:normal; font-size:clamp(16px,2.3vw,21px); line-height:1.35; margin:0 0 14px; color:var(--accent-text)}
.info p{margin:0 0 12px; max-width:46ch}
.info .modes, .by{color:var(--muted)}

.btn{display:inline-block; margin-top:6px; font-family:"Press Start 2P", ui-monospace, monospace; font-size:12px; line-height:1.4;
  background:var(--accent); color:var(--accent-ink); text-decoration:none; padding:13px 16px; border:3px solid var(--line); box-shadow:4px 4px 0 var(--line)}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translate(3px,3px); box-shadow:1px 1px 0 var(--line)}
.btn:focus-visible{outline:4px solid var(--ink); outline-offset:3px}

/* tarjetas de apps y del taller */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px}
.card{background:var(--panel); border:3px solid var(--line); box-shadow:6px 6px 0 var(--line); padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px}
.card h3{font-family:"Press Start 2P", ui-monospace, monospace; font-weight:normal; font-size:17px; line-height:1.4; margin:0; color:var(--tf-text)}
.card p{margin:0}
.card .btn{align-self:flex-start; margin-top:8px}
.tag{align-self:flex-start; font-family:"Press Start 2P", ui-monospace, monospace; font-size:10px; line-height:1.4; padding:5px 8px; border:2px solid var(--line); background:var(--bg)}
.card.soon{border-style:dashed; box-shadow:none; background:transparent}
.links{display:flex; gap:8px 18px; flex-wrap:wrap; margin-top:4px}
.links a{text-decoration:underline; text-decoration-color:var(--tf); text-underline-offset:3px}

.prose{max-width:62ch}
.prose h2{font-family:"Press Start 2P", ui-monospace, monospace; font-weight:normal; font-size:15px; line-height:1.5; margin:36px 0 10px}
.prose p, .prose li{margin:0 0 12px}

footer{border-top:3px solid var(--line); color:var(--muted); font-size:21px}
footer .wrap{padding-top:22px; padding-bottom:28px; display:flex; flex-wrap:wrap; gap:6px 22px; justify-content:space-between}
footer a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--tf); text-underline-offset:3px}
footer a:hover{color:var(--tf-text)}

@media (max-width:760px){
  main.wrap{padding-top:28px}
  .game{grid-template-columns:1fr; gap:18px}
  .games{gap:40px}
  h1.stack{text-shadow:3px 3px 0 var(--gh), 6px 6px 0 var(--fp), 9px 9px 0 var(--ma)}
}
@media (prefers-reduced-motion: reduce){ .btn:active{transform:none} }