:root {
  --bg: #EBDDC6;
  --bg-soft: #F1E7D5;
  --ink: #211D19;
  --ink-soft: #5C5347;
  --linea: rgba(33, 29, 25, 0.16);
  --shadow-hover: 0 18px 40px -16px rgba(33, 29, 25, 0.28);
}

* { box-sizing: border-box; }

/* ---------------- Fotos: sin clic derecho ni arrastre ----------------
   Las fotos van detrás de una capa transparente (::after), así el clic
   derecho cae sobre el contenedor y el navegador no ofrece "guardar
   imagen" ni "copiar imagen". No reemplaza a una marca de agua. */
.frame img,
.lightbox img {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.frame,
.lightbox-frame {
  position: relative;
}

.frame::after,
.lightbox-frame::after {
  content: "";
  position: absolute;
  inset: 0;
}

html {
  /* Reserva el espacio de la scrollbar vertical siempre, aunque la
     página todavía no sea lo bastante alta para necesitarla. Sin esto,
     el ancho disponible cambia justo después del primer render (cuando
     el contenido crece y la scrollbar aparece), y todo lo que se haya
     medido/calculado con ese ancho antes de tiempo queda mal (ej. el
     mosaico, que arma cada fila con el ancho disponible). */
  scrollbar-gutter: stable;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Jost', sans-serif;
  overflow-x: hidden;
}

#dots-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.book-nav, .book-header, .gallery, .empty-state, .books-grid {
  position: relative;
  z-index: 1;
}

/* ---------------- Nav ---------------- */
.book-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px clamp(20px, 5vw, 64px);
  background: var(--bg);
  border-bottom: 1px solid var(--linea);
}

.book-nav .brand {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.05em;
}

.book-nav .brand {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.book-nav .nav-links {
  display: flex;
  gap: clamp(18px, 3vw, 36px);
}

.book-nav .nav-links a {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}

.book-nav .nav-links a:hover,
.book-nav .nav-links a.active {
  color: var(--ink);
}

.book-header {
  text-align: center;
  padding: 8vh 6vw 6vh;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}

.book-header h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  margin: 0;
  letter-spacing: 0.01em;
}

.subtitle {
  font-weight: 300;
  color: var(--ink-soft);
  font-size: 1rem;
  margin-top: 0.9rem;
  letter-spacing: 0.02em;
}

/* Escrito del book, editable desde el panel */
.book-intro {
  max-width: 58ch;
  margin: 2.4rem auto 0;
  text-align: left;
}

.book-intro p {
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}

.book-intro p:last-child { margin-bottom: 0; }

/* ---------------- /books.html: listado de books (título + texto) ---------------- */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  padding: 2vh 6vw 14vh;
  max-width: 1400px;
  margin: 0 auto;
}

.book-tile {
  display: block;
  color: inherit;
  text-decoration: none;

  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(.22,.61,.36,1),
              transform 0.8s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--delay, 0ms);
}

.book-tile.in-view {
  opacity: 1;
  transform: translateY(0);
}

.book-tile-body {
  padding: 1.6rem 1.8rem;
  background: var(--bg-soft);
  border: 1px solid var(--linea);
  transition: border-color 0.2s ease;
}

.book-tile:hover .book-tile-body {
  border-color: var(--ink-soft);
}

.book-tile-body h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 1.7rem;
  margin: 0;
  letter-spacing: 0.01em;
}

.book-tile-meta {
  margin: 0.4rem 0 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.book-tile-intro {
  margin: 0.9rem 0 0;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--linea);
  color: var(--ink-soft);
  margin-left: 8px;
  vertical-align: 2px;
}

@media (max-width: 760px) {
  .books-grid { grid-template-columns: 1fr; }
}

/* ---------------- Book con código ---------------- */
.passcode-gate {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 18vh 6vw 12vh;
}

.passcode-gate h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: 0 0 2rem;
}

.passcode-gate form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.passcode-gate input {
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  padding: 12px 16px;
  min-width: 240px;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--linea);
}

.passcode-gate input:focus {
  outline: none;
  border-color: var(--ink);
}

.passcode-btn {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 26px;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
}

.passcode-error {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: #8c2f1d;
}

/* ---------------- Galería — fotos grandes, sin marco ---------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: clamp(10px, 1.6vw, 22px);
  padding: 2vh 6vw 14vh;
  max-width: 1600px;
  margin: 0 auto;
}

.gallery--home {
  /* En la home no hay header arriba de la grilla: un poco más de aire
     entre el nav sticky y la primera fila de fotos. */
  padding-top: 6vh;
}

/* En la home cada .frame es un link a la galería completa del book, no
   un disparador de lightbox: cursor normal de link, no de zoom. */
.gallery--home .frame {
  display: block;
  cursor: pointer;
}

.frame {
  /* <figure> trae 1em 40px de margen por defecto del navegador; sin
     resetearlo se suma al gap de la grilla/fila y lo desalinea todo. */
  margin: 0;
  cursor: zoom-in;
  will-change: transform, opacity;
  overflow: hidden;

  opacity: 0;
  transform: translateY(42px);
  transition: opacity 0.9s cubic-bezier(.22,.61,.36,1),
              transform 0.9s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--delay, 0ms);
}

.frame.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Flotación idle, muy sutil, solo una vez que la tarjeta ya está visible */
.frame.in-view {
  animation: float 7s ease-in-out var(--float-delay, 0s) infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  background: var(--bg-soft);
  transition: transform 0.5s ease;
}

.frame:hover img {
  transform: scale(1.015);
}

.frame.entering {
  animation: enter-pop 1.1s cubic-bezier(.22,.61,.36,1);
}
@keyframes enter-pop {
  0%   { opacity: 0; transform: translateY(28px) scale(0.98); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.005); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.empty-state {
  text-align: center;
  color: var(--ink-soft);
  font-weight: 300;
  padding: 4vh 0 12vh;
}

/* ---------------- Toast ---------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 50;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------------- Lightbox ---------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 12, 9, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease;
  padding: 4vh 4vw;
}
.lightbox.open {
  opacity: 1;
}
.lightbox[hidden] { display: none; }

.lightbox img {
  display: block;
  max-width: 92vw;
  max-height: 90vh;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  transform: scale(0.94);
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1);
}
.lightbox.open img {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 22px;
  right: 30px;
  background: none;
  border: none;
  color: #F1E7D5;
  font-size: 2.2rem;
  font-weight: 300;
  cursor: pointer;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.lightbox-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

.lightbox-book-link {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  color: #F1E7D5;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(241, 231, 213, 0.4);
  padding-bottom: 2px;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.lightbox-book-link:hover { opacity: 1; }
.lightbox-book-link:empty { display: none; }

@media (max-width: 760px) {
  .gallery { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 640px) {
  .book-nav .nav-links { gap: 14px; }
  .book-nav .nav-links a { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .frame, .frame.in-view, .lightbox, .lightbox img, .toast {
    animation: none !important;
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
}