:root {
  --noche: #0d1124;
  --noche-2: #161c38;
  --noche-3: #222a4d;
  --cal: #f3ead8;
  --cal-suave: #c9c0ad;
  --granate: #b3121b;
  --granate-claro: #e0353a;
  --oro: #e8c27a;
  --olivo: #6f7d3c;
  --ancho: 1100px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body {
  margin: 0;
  background: var(--noche);
  color: var(--cal);
  font-family: "Spectral", Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.65;
}
img { max-width: 100%; }
a { color: var(--oro); }
h1, h2, h3, .marca, nav, .etiqueta, .boton, .niveles span, figcaption strong, .rasgos strong {
  font-family: "Pixelify Sans", "Courier New", monospace;
}
h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--oro);
  margin: 0 0 1rem;
  line-height: 1.25;
  text-shadow: 3px 3px 0 var(--granate);
}
.pix, .sprite, .niveles li::before { image-rendering: pixelated; }

/* Barra superior */
.barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(13, 17, 36, .92);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--granate);
}
.marca { display: flex; align-items: center; gap: .6rem; color: var(--cal); text-decoration: none; font-weight: 700; font-size: 1.15rem; }
.marca img { border-radius: 4px; }
nav { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
nav a { color: var(--cal-suave); text-decoration: none; font-size: 1rem; }
nav a:hover { color: var(--oro); }

/* Portada */
.portada { position: relative; overflow: hidden; background: #050814; }
.portada img { display: block; width: 100%; height: auto; }
.portada picture { display: block; position: relative; }
.portada picture::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(transparent, var(--noche)); }
.portada-texto { padding: 1.5rem clamp(1rem, 5vw, 4rem) 1rem; background: var(--noche); text-align: center; }
.portada h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.etiqueta { display: inline-block; margin: 0 0 .6rem; padding: .2rem .8rem; border: 2px solid var(--oro); color: var(--oro); font-size: .95rem; letter-spacing: .05em; }
.lema { font-size: clamp(1.15rem, 2.5vw, 1.5rem); font-style: italic; margin: 0 0 1.4rem; }
.botones { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.boton {
  display: inline-block; padding: .65rem 1.4rem;
  background: var(--granate); color: var(--cal); text-decoration: none; font-size: 1.05rem;
  border: 2px solid var(--oro); box-shadow: 4px 4px 0 #000;
  transition: transform .1s, background .2s;
}
.boton:hover { background: var(--granate-claro); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
.boton.secundario { background: transparent; }
.boton.secundario:hover { background: rgba(232, 194, 122, .15); }

/* Secciones */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: clamp(3rem, 8vw, 5.5rem) clamp(1rem, 4vw, 2rem); }
.intro { max-width: 46rem; color: var(--cal-suave); }
.columnas { display: grid; grid-template-columns: 3fr 2fr; gap: 2.5rem; align-items: center; }
.escena {
  display: flex; justify-content: center; align-items: flex-end; gap: 0;
  min-height: 190px; padding-bottom: 14px;
  background: url(/assets/niveles/nivel1.png) center bottom / cover;
  image-rendering: pixelated;
  border: 3px solid var(--oro); box-shadow: 6px 6px 0 var(--granate);
}

.rasgos { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; }
.rasgos li { background: var(--noche-2); border-left: 4px solid var(--granate); padding: 1.2rem 1.3rem; font-size: 1rem; color: var(--cal-suave); }
.rasgos img { display: block; height: 30px; width: auto; margin-bottom: .6rem; }
.rasgos strong { display: block; color: var(--cal); font-size: 1.15rem; margin-bottom: .3rem; }

/* Niveles */
.niveles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.niveles li {
  position: relative; overflow: hidden; min-height: 210px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1rem 1.1rem; border: 2px solid var(--noche-3);
  transition: border-color .2s, transform .2s;
}
.niveles li::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fondo) center / cover;
  transition: transform .4s;
}
.niveles li::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 20%, rgba(8, 10, 22, .92) 75%); }
.niveles li { isolation: isolate; }
.niveles li:hover { border-color: var(--oro); transform: translateY(-3px); }
.niveles li:hover::before { transform: scale(1.06); }
.niveles span { position: absolute; top: .6rem; left: .8rem; font-size: 1.6rem; color: var(--oro); text-shadow: 2px 2px 0 #000; }
.niveles h3 { margin: 0; font-size: 1.35rem; }
.niveles p { margin: .2rem 0 0; font-size: .95rem; color: var(--cal-suave); line-height: 1.45; }

/* Personajes */
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.galeria figure { margin: 0; padding: 1rem; text-align: center; background: var(--noche-2); border: 2px solid var(--noche-3); }
.galeria .sprite { margin: 0 auto .6rem; }
.galeria figure > div { display: block; }
.galeria figure { display: flex; flex-direction: column; justify-content: flex-end; }
figcaption { font-size: .95rem; color: var(--cal-suave); line-height: 1.4; }
figcaption strong { display: block; color: var(--cal); font-size: 1.1rem; }

/* Sprites animados: el JS pone --w, --h, --n y la imagen */
.sprite {
  --e: 3;
  width: calc(var(--w) * var(--e) * 1px);
  height: calc(var(--h) * var(--e) * 1px);
  background-repeat: no-repeat;
  background-size: calc(var(--w) * var(--n) * var(--e) * 1px) 100%;
  animation: andar calc(var(--n) * 120ms) steps(var(--n)) infinite;
}
.sprite.x2 { --e: 2; }
.sprite.izq { margin-right: -40px; }
@keyframes andar { to { background-position-x: calc(var(--w) * var(--n) * var(--e) * -1px); } }

/* Banda sonora */
.reproductor { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.5rem; background: var(--noche-2); border: 2px solid var(--oro); box-shadow: 6px 6px 0 var(--granate); padding: 1.5rem; }
.ahora { display: flex; flex-direction: column; gap: 1rem; }
.ahora img { border-radius: 8px; }
.ahora-titulo { font-family: "Pixelify Sans", monospace; font-size: 1.3rem; margin: 0 0 .6rem; color: var(--oro); }
.ahora audio { width: 100%; }
.pistas { margin: 0; padding: 0; list-style: none; counter-reset: pista; }
.pistas li {
  counter-increment: pista; cursor: pointer;
  display: flex; gap: .8rem; padding: .45rem .7rem; font-size: 1rem;
  border-bottom: 1px solid var(--noche-3);
}
.pistas li::before { content: counter(pista, decimal-leading-zero); font-family: "Pixelify Sans", monospace; color: var(--cal-suave); }
.pistas li:hover { background: var(--noche-3); }
.pistas li.activa { background: var(--granate); }
.pistas li.activa::before { content: "▶"; color: var(--oro); }

/* Estudio */
.estudio { display: grid; grid-template-columns: 160px 1fr; gap: 2.5rem; align-items: start; }
.estudio .icono { border-radius: 18px; box-shadow: 6px 6px 0 var(--granate); }

/* Página activa en el menú */
nav a[aria-current="page"] { color: var(--oro); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* Submenú de la página del juego */
.subnav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; padding: 0 1rem 1rem; }
.subnav a { color: var(--cal-suave); text-decoration: none; font-size: 1rem; }
.subnav a:hover { color: var(--oro); }

/* Cabecera de páginas interiores */
.cabecera {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  min-height: 300px; padding: 2rem 1rem 1.5rem;
  border-bottom: 2px solid var(--granate);
}
.cabecera::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fondo) center 60% / cover; image-rendering: pixelated; }
.cabecera::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 40%, rgba(13, 17, 36, .85)); }
.cabecera h1 { margin: .5rem 0 0; font-size: clamp(2.2rem, 6vw, 3.4rem); color: var(--oro); text-shadow: 4px 4px 0 var(--granate); }
.escena-cabecera { display: flex; align-items: flex-end; gap: .5rem; }

/* Llamada a otra página */
.llamada { display: grid; grid-template-columns: 120px 1fr; gap: 2rem; align-items: center; }
.llamada .icono { border-radius: 16px; box-shadow: 6px 6px 0 var(--granate); }
.llamada p { margin-top: 0; }
.llamada.ancha { grid-template-columns: 320px 1fr; }
.llamada.ancha img { width: 100%; height: auto; border: 3px solid var(--oro); box-shadow: 6px 6px 0 var(--granate); }

/* Niveles en miniatura (portada) */
.niveles.mini { margin-top: 3rem; grid-template-columns: repeat(4, 1fr); }
.niveles.mini li { min-height: 130px; }
.niveles.mini h3 { font-size: 1.1rem; }

/* Tabla de controles */
.tabla { overflow-x: auto; }
.tabla table { width: 100%; border-collapse: collapse; background: var(--noche-2); font-size: 1rem; }
.tabla th, .tabla td { text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--noche-3); }
.tabla th { font-family: "Pixelify Sans", monospace; color: var(--oro); background: var(--noche-3); }

/* Quiénes somos */
.cabecera .subtitulo { margin: .2rem 0 0; font-style: italic; font-size: 1.2rem; }
.destacado { font-size: 1.3rem; }
.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.pasos li { counter-increment: paso; position: relative; padding: 3.2rem 1.2rem 1.2rem; background: var(--noche-2); border-top: 4px solid var(--oro); color: var(--cal-suave); font-size: 1rem; }
.pasos li::before { content: counter(paso); position: absolute; top: .6rem; left: 1.2rem; font-family: "Pixelify Sans", monospace; font-size: 1.8rem; color: var(--oro); text-shadow: 2px 2px 0 var(--granate); }
.pasos strong { display: block; color: var(--cal); font-family: "Pixelify Sans", monospace; font-size: 1.15rem; margin-bottom: .3rem; }

/* Formularios */
.formulario { display: grid; gap: 1rem; max-width: 46rem; }
.formulario .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.formulario label { display: grid; gap: .3rem; font-family: "Pixelify Sans", monospace; font-size: 1rem; }
.formulario input:not([type="checkbox"]), .formulario select, .formulario textarea {
  width: 100%; padding: .65rem .8rem; font: inherit; font-family: "Spectral", Georgia, serif; font-size: 1.05rem;
  color: var(--cal); background: var(--noche-2); border: 2px solid var(--noche-3); border-radius: 0;
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: none; border-color: var(--oro); }
.formulario .check { display: block; font-family: "Spectral", Georgia, serif; color: var(--cal-suave); }
.formulario .check input { margin: 0 .5rem 0 0; accent-color: var(--granate); vertical-align: middle; }
.formulario button { justify-self: start; cursor: pointer; font-family: "Pixelify Sans", monospace; }
.formulario button:disabled { opacity: .6; cursor: wait; }
.opcional { color: var(--cal-suave); font-size: .85rem; }
.trampa, .oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.resultado { margin: 0; min-height: 1.5em; }
.resultado.ok { color: #9fd49a; }
.resultado.error { color: #ff8f8f; }
.formulario.en-linea { grid-template-columns: 1fr auto; align-items: center; }
.formulario.en-linea .check, .formulario.en-linea .resultado { grid-column: 1 / -1; }
.boletin { border-top: 2px solid var(--noche-3); }
.boletin > p { color: var(--cal-suave); max-width: 46rem; }

/* Textos legales y avisos */
.texto-legal { max-width: 50rem; }
.texto-legal h1, .aviso h1 { font-size: clamp(2rem, 5vw, 2.8rem); color: var(--oro); text-shadow: 3px 3px 0 var(--granate); margin-top: 0; }
.texto-legal h2 { font-size: 1.4rem; margin-top: 2rem; }
.aviso { max-width: 40rem; text-align: center; padding-top: 5rem; }

/* Pie */
footer a { color: var(--cal-suave); }
footer { border-top: 2px solid var(--granate); background: #070a18; text-align: center; color: var(--cal-suave); font-size: .95rem; }
footer p { margin: 0; padding: 1rem; }
.desfile { overflow: hidden; height: 84px; border-bottom: 2px solid var(--noche-3); background: url(/assets/niveles/nivel2.png) center 70% / cover; image-rendering: pixelated; }
.corredor { display: flex; align-items: flex-end; width: max-content; height: 100%; animation: cruzar 22s linear infinite; }
.corredor .separado { margin-left: 120px; }
@keyframes cruzar { from { transform: translateX(-420px); } to { transform: translateX(100vw); } }

@media (max-width: 760px) {
  .barra { flex-direction: column; align-items: flex-start; gap: .3rem; }
  nav { gap: .2rem 1rem; }
  nav a { font-size: .9rem; }
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .galeria .sprite.x3 { --e: 2; }
  .galeria .sprite.x2 { --e: 1.5; }
  .columnas, .reproductor, .estudio, .llamada, .llamada.ancha { grid-template-columns: 1fr; }
  .niveles.mini { grid-template-columns: repeat(2, 1fr); }
  .formulario .fila, .formulario.en-linea { grid-template-columns: 1fr; }
  .escena-cabecera .sprite.x3 { --e: 2; }
  .ahora { flex-direction: row; align-items: center; }
  .ahora img { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .sprite, .corredor { animation: none; }
  html { scroll-behavior: auto; }
}