/* ============================================================
   Mario Misas — estilo boceto a mano, minimalista, monocromo
   ============================================================ */

:root {
  /* Paleta calcada de los grises de cabecera.jpg / icono_*.png (blanco puro + grises neutros) */
  --paper: #ffffff;
  --paper-alt: #f4f4f4;
  --ink: #6e6e6e;
  --ink-soft: #949494;
  --ink-light: #d8d8d8;
  --accent: #4a4a4a;
  --border: 2px solid var(--ink);
  --radius-sketch: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.08);
  --font-title: "Permanent Marker", cursive;
  --font-hand: "Patrick Hand", cursive;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-hand);
  font-size: 20px;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ---------- textura de fondo sutil tipo papel ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(var(--ink-light) 0.6px, transparent 0.6px);
  background-size: 22px 22px;
  opacity: 0.25;
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Hero / cabecera ---------- */
.hero {
  text-align: center;
  padding: 8vh 5vw 4vh;
}

.hero__image {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

/* ---------- Grid de secciones (tiles) ---------- */
.tiles {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  max-width: 1000px;
  width: 100%;
  margin: 2vh auto 8vh;
  padding: 0 5vw;
}

@media (max-width: 700px) {
  .tiles {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    max-width: 360px;
  }
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 1.4rem;
  border: var(--border);
  border-radius: var(--radius-sketch);
  background: var(--paper-alt);
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease, rotate 0.25s ease;
  cursor: pointer;
}

.tile:nth-child(2n) {
  --radius-sketch: 15px 225px 15px 255px / 255px 15px 225px 15px;
}

.tile:hover,
.tile:focus-visible {
  transform: translateY(-6px) rotate(-1.5deg);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.14);
}

.tile__icon {
  width: 100%;
  height: 100%;
}

.tile__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  padding: 2rem 1rem 3rem;
  color: var(--ink-light);
  font-size: 0.95rem;
}

.footer__instagram {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-bottom: 0.5rem;
}

/* ============================================================
   Galería de cómics
   ============================================================ */

.gallery-header {
  text-align: center;
  padding: 6vh 5vw 2vh;
}

.gallery-header__title {
  font-family: var(--font-title);
  font-size: clamp(2rem, 6vw, 3.4rem);
  color: var(--accent);
  margin: 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.4rem 5vw 0;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  color: var(--ink);
  border: var(--border);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  background: var(--paper-alt);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease;
}

.back-link:hover {
  transform: translateX(-4px);
}

.comic-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2.4rem;
  max-width: 1200px;
  width: 100%;
  margin: 3vh auto 8vh;
  padding: 0 5vw;
}

.comic-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-align: center;
}

.comic-card__cover {
  position: relative;
  border: var(--border);
  border-radius: 6px 16px 6px 16px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 3 / 4.2;
  background: var(--paper-alt);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.comic-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comic-card:hover .comic-card__cover,
.comic-card:focus-visible .comic-card__cover {
  transform: translateY(-6px) rotate(1deg);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.16);
}

.comic-card__title {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--accent);
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.2rem;
  padding: 4rem 1rem;
}

/* ============================================================
   Lector flipbook
   ============================================================ */

.reader-page {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  overflow: hidden;
}

.reader-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.4rem;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.rtl-notice {
  flex: 0 0 auto;
  align-self: center;
  margin: 0 1.4rem 0.4rem;
  padding: 0.4rem 1.2rem;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  text-align: center;
  color: #000;
  background: #ffd600;
  border: var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}

.reader-title {
  font-family: var(--font-title);
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  color: var(--accent);
  margin: 0;
}

.reader-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 1rem;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* Contenedor del flipbook: ocupa todo el hueco disponible entre la
   cabecera y los botones (nunca más, para no forzar scroll). La proporción
   real de las páginas la controla St.PageFlip (ver reader.js), que ajusta
   su propio tamaño dentro de este hueco sin recortar ni deformar el PDF. */
#flipbook-container {
  width: 100%;
  height: 100%;
  max-width: 1100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#flipbook {
  /* St.PageFlip decide si tiene que encoger la página comprobando la
     altura de ESTE div; si no le damos una altura real (queda "auto",
     creciendo según su contenido) esa comprobación nunca detecta que se
     sale del hueco disponible, y la página se recorta en vez de encoger. */
  height: 100%;
  margin: 0 auto;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
}

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  pointer-events: none;
}

.reader-status {
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.1rem;
  padding: 0 1rem;
}

.progress-bar {
  width: min(320px, 70vw);
  height: 10px;
  margin: 0.8rem auto 0;
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper-alt);
}

.progress-bar__fill {
  height: 100%;
  width: 0%;
  background: var(--ink);
  transition: width 0.2s ease;
}

.reader-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 0.5rem 1rem 0.9rem;
}

.nav-btn {
  font-family: var(--font-hand);
  font-size: 1.4rem;
  border: var(--border);
  background: var(--paper-alt);
  border-radius: 999px;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease;
  color: var(--ink);
}

.nav-btn:hover {
  transform: scale(1.08);
}

.nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

.page-indicator {
  font-family: var(--font-hand);
  color: var(--ink-soft);
  min-width: 6rem;
  text-align: center;
}

.hidden {
  display: none !important;
}