/* estilos compartidos — ANOTHER DAY, AGAIN
   Identidad tomada directamente del arte de referencia: papel de manga con
   screentone, tinta negra gruesa, rojo sangre muy contenido, cruces góticas
   y una textura VHS/arcade para los paneles "en vivo". */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Patrick+Hand&display=swap');

* { box-sizing: border-box; }

:root {
  --paper: #f5f1e8;      /* papel de manga, cálido, no blanco puro */
  --paper-dim: #e9e2d0;  /* paneles internos, un paso más oscuro */
  --ink: #141414;        /* tinta, casi negro */
  --ink-soft: #3a3a3a;   /* texto secundario */
  --grey: #8f8a7c;       /* gris cálido, para detalles menores */
  --grey-line: #c9c2ae;  /* bordes/hairlines */
  --night: #131313;      /* paneles oscuros tipo VHS (nav, visor) */
  --night-soft: #232323;
  --blood: #7a1f2b;      /* rojo sangre, contenido */
  --blood-bright: #a8324a;

  --font-pixel: 'Press Start 2P', monospace;
  --font-body: 'IBM Plex Mono', ui-monospace, monospace;
  --font-hand: 'Patrick Hand', cursive;
}

body {
  background-color: var(--paper);
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
  padding: 0 0 4rem;
  position: relative;
}

/* screentone sutil de fondo, como el sombreado a puntitos de tus dibujos */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(20,20,20,0.07) 1px, transparent 1.3px);
  background-size: 5px 5px;
  pointer-events: none;
  z-index: -1;
}

a { color: var(--blood); text-decoration: underline; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

::selection { background: var(--blood); color: var(--paper); }

.envoltura {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem 0;
}
.envoltura.angosta {
  max-width: 700px;
}

/* ---------- BARRA DE NAVEGACIÓN: banda VHS con stickers pegados ---------- */
.nav-barra {
  padding: 1.1rem 1rem;
  background: var(--night);
  border-bottom: 3px solid var(--ink);
  position: relative;
  overflow: hidden;
}
/* misma estática que el visor, para que la nav se sienta parte del mismo aparato */
.nav-barra::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: screen;
}
.nav-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  width: 86px;
  padding: .55rem .3rem .5rem;
  border: 3px solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--grey-line);
  text-decoration: none !important;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
/* rotadas alternadas, como stickers pegados a mano en un collage */
.nav-item:nth-child(odd) { transform: rotate(-2deg); }
.nav-item:nth-child(even) { transform: rotate(2deg); }
.nav-item:hover {
  transform: rotate(0deg) translate(-2px, -2px);
  background: var(--blood);
  box-shadow: 5px 5px 0 var(--paper);
  border-color: var(--ink);
}
.nav-item:hover .nav-etiqueta { color: var(--paper); }
.nav-icono {
  font-size: 1.2rem;
  line-height: 1;
  color: var(--blood);
}
.nav-item:hover .nav-icono { color: var(--paper); }
.nav-etiqueta {
  font-family: var(--font-pixel);
  letter-spacing: 0;
  text-transform: uppercase;
  font-size: .5rem;
  line-height: 1.5;
  color: var(--ink);
}
.nav-nota {
  font-family: var(--font-hand);
  font-size: .8rem;
  color: var(--grey);
}

.nav-item--news .nav-icono { animation: pulso-vivo 2.2s ease-in-out infinite; }
@keyframes pulso-vivo {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* separador con cruces, en vez de puntos */
.nav-separador {
  text-align: center;
  letter-spacing: .5em;
  color: var(--grey-line);
  font-size: .75rem;
  margin: .9rem 0 0;
}

/* ---------- BANNER ---------- */
.banner {
  max-width: 900px;
  margin: 0 auto 1.5rem;
  padding: 0 1.5rem;
}
.banner img {
  width: 100%;
  display: block;
  border: 3px solid var(--ink);
  border-radius: 4px;
  box-shadow: 5px 5px 0 var(--grey-line);
}

h1 {
  text-align: center;
  font-family: var(--font-pixel);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.05rem;
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--ink);
}
h1::before, h1::after {
  content: "✝";
  color: var(--blood);
  margin: 0 .5em;
  font-size: .85em;
}

h2 {
  color: var(--ink);
  font-family: var(--font-pixel);
  font-weight: 400;
  text-transform: uppercase;
  font-size: .82rem;
  line-height: 1.7;
  letter-spacing: .02em;
}

hr {
  border: none;
  border-top: 2px dashed var(--grey-line);
  margin: 2.2rem 0;
}

.migas {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-hand);
  color: var(--ink-soft);
}

/* ---------- BOTONES / CTA: stickers de tinta gruesa ---------- */
.cta {
  text-align: center;
  margin-top: 1.5rem;
}
.cta a {
  display: inline-block;
  background: var(--paper);
  color: var(--ink) !important;
  border: 3px solid var(--ink);
  border-radius: 2px;
  padding: .75rem 1.4rem;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .78rem;
  text-decoration: none !important;
  margin: 0 .4rem;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .1s ease, box-shadow .1s ease, background .1s ease, color .1s ease;
}
.cta a:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--blood);
  background: var(--blood);
  color: var(--paper) !important;
  border-color: var(--blood);
}

/* ---------- ARCHIVO ---------- */
.tomo-grupo {
  margin-bottom: 2.5rem;
}
.tomo-grupo h2 {
  border-bottom: 2px dashed var(--grey-line);
  padding-bottom: .4rem;
}
.tomo-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.2rem;
  list-style: none;
  padding: 0;
  margin-top: 1.2rem;
}
.tomo-lista li {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--grey-line);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tomo-lista li:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--blood);
}
.tomo-lista a {
  display: block;
  color: inherit;
}
.tomo-portada {
  position: relative;
  aspect-ratio: 0.7;
  background: repeating-linear-gradient(45deg, var(--paper-dim) 0 2px, var(--paper) 2px 14px);
  border-bottom: 2px solid var(--ink);
}
.tomo-portada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tomo-badge {
  position: absolute;
  top: .5rem;
  left: .5rem;
  background: var(--blood);
  color: var(--paper);
  font-size: .68rem;
  font-weight: bold;
  padding: .15rem .55rem;
  border-radius: 2px;
  font-family: var(--font-hand);
  letter-spacing: .02em;
  transform: rotate(-2deg);
}
.tomo-titulo {
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  padding: .6rem .4rem;
}

/* ---------- LECTOR ---------- */
.lector-barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  margin-bottom: 1rem;
  color: var(--ink-soft);
}

.escenario {
  display: flex;
  justify-content: center;
  align-items: stretch;
  position: relative;
  background: var(--night);
  border: 3px solid var(--ink);
  border-radius: 4px;
  padding: 1.2rem;
  min-height: 60vh;
}

.spread {
  display: flex;
  gap: 0;
  max-width: 100%;
}

.pagina {
  height: 70vh;
  max-height: 640px;
  aspect-ratio: 0.708;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--grey-line);
}
.pagina img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.spread.portada-sola .pagina { margin: 0 auto; }
.spread:not(.portada-sola) .pagina.izq { border-right: none; }
.spread:not(.portada-sola) .pagina.der { border-left: none; }

.placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  color: var(--grey);
  background: repeating-linear-gradient(45deg, var(--paper-dim) 0 2px, var(--paper) 2px 14px);
}
.placeholder .n {
  font-size: 2rem;
  color: var(--blood);
  font-family: var(--font-pixel);
  font-weight: 400;
}
.placeholder .tag {
  font-size: .6rem;
  font-family: var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.zona-nav {
  position: absolute;
  top: 0; bottom: 0;
  width: 15%;
  cursor: pointer;
}
.zona-nav.prev { left: 0; }
.zona-nav.next { right: 0; }

.lector-controles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
  margin-top: 1rem;
}

.nav-btn {
  background: var(--paper);
  border: 2px solid var(--ink);
  color: var(--ink);
  padding: .5rem 1.1rem;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .78rem;
}
.nav-btn:hover { background: var(--blood); color: var(--paper); border-color: var(--blood); }
.nav-btn:disabled { opacity: .35; cursor: default; }
.nav-btn:disabled:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); }

.contador {
  font-size: 1rem;
  color: var(--ink-soft);
  min-width: 8ch;
  text-align: center;
  font-family: var(--font-hand);
}

@media (max-width: 640px) {
  .pagina { height: 50vh; }
}

/* ---------- PERSONAJES ---------- */
.personaje {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 4px;
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.4rem;
  box-shadow: 4px 4px 0 var(--grey-line);
}
.personaje h2 {
  margin-top: 0;
  font-size: .95rem;
}
.personaje .rol {
  font-size: .76rem;
  color: var(--blood);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: -.2rem 0 .6rem;
  font-family: var(--font-body);
  font-weight: 600;
}