/* =====================================================================
   LA BITÁCORA DE SABABA · estilos editoriales (memoria viva, NO feed)
   Debe sentirse como abrir un libro de memorias: Playfair con protagonismo,
   Montserrat solo para leer, mucho aire, oscuro y premium.
   La paleta se declara también en .bit-lightbox porque se añade a <body>
   (misma lección que La Mesa: si no, las variables no llegan).
   ===================================================================== */

#bitacora, .bit-lightbox {
  --b-pine:    #0f1712;
  --b-pine2:   #16241d;
  --b-bg:      #0d150f;
  --b-line:    rgba(201, 170, 106, 0.16);
  --b-ember:   #c8a96a;
  --b-ember-hi:#e6c98a;
  --b-bone:    #ece5d5;
  --b-bone-hi: #f7f4ee;
  --b-dim:     #9aa48f;
  --b-jade:    #8fc0a4;
}

/* Fondo oscuro cuando la ruta activa es la Bitácora (como las demás secciones). */
body.mobile-view-bitacora { background: var(--b-bg) !important; }
#bitacora {
  --pad: 22px;
  color: var(--b-bone);
  min-height: 100vh;
  overflow-x: clip; /* blinda la portada a sangre (márgenes negativos) contra scroll horizontal */
  padding: 34px var(--pad) 140px;
  background:
    radial-gradient(96% 22% at 50% 0%, rgba(201, 170, 106, 0.10), transparent 46%),
    linear-gradient(180deg, #16241d 0%, #101a12 58%, var(--b-bg) 100%) !important;
  font-family: "Montserrat", sans-serif;
  -webkit-font-smoothing: antialiased;
}
#bitacora .bit-wrap { max-width: 720px; margin: 0 auto; }
@media (max-width: 380px) { #bitacora { --pad: 16px; } }

/* Nav inferior en penumbra en esta ruta. */
body.mobile-view-bitacora nav.mobile-app-nav {
  background: #101a14 !important; border: 1px solid rgba(201, 170, 106, 0.18) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.45) !important;
}
body.mobile-view-bitacora nav.mobile-app-nav a { color: #93a08c !important; }
body.mobile-view-bitacora nav.mobile-app-nav a.active { background: rgba(201, 170, 106, 0.15) !important; color: #e6c98a !important; }

/* --------------------------- LA BIBLIOTECA --------------------------- */
.bit-head { text-align: center; padding: 22px 4px 8px; animation: bitRise 0.5s ease both; }
.bit-eyebrow {
  font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--b-ember); font-weight: 600;
}
.bit-head h1 {
  font-family: "Playfair Display", serif; font-weight: 700;
  font-size: clamp(2.4rem, 10vw, 3.4rem); line-height: 1.04; letter-spacing: -0.01em;
  color: var(--b-bone-hi); margin: 16px 0 14px;
}
.bit-head p { color: var(--b-dim); font-size: 0.95rem; max-width: 40ch; margin: 0 auto; line-height: 1.65; }
/* filete ornamental que "abre" la biblioteca */
.bit-head::after { content: ""; display: block; width: 46px; height: 1px; background: var(--b-line); margin: 30px auto 0; }

.bit-shelf { display: flex; flex-direction: column; animation: bitRise 0.55s ease both; }
.bit-chapter {
  display: block; text-align: left; width: 100%; cursor: pointer;
  background: none; border: none; border-bottom: 1px solid var(--b-line);
  padding: 42px 4px; color: inherit; transition: opacity 0.25s ease;
}
.bit-chapter:hover { opacity: 0.82; }
.bit-chapter-mark { font-size: 1.35rem; display: block; margin-bottom: 18px; opacity: 0.85; }
.bit-chapter-title {
  display: block;
  font-family: "Playfair Display", serif; font-weight: 700; font-size: clamp(1.6rem, 6vw, 2rem);
  color: var(--b-bone-hi); line-height: 1.16; letter-spacing: -0.01em;
}
.bit-chapter-sub { display: block; font-family: "Playfair Display", serif; font-style: italic; color: var(--b-dim); font-size: 1.02rem; margin-top: 10px; line-height: 1.45; }
.bit-chapter-meta {
  margin-top: 20px; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--b-ember); display: flex; flex-wrap: wrap; gap: 7px 12px; align-items: center;
}
.bit-chapter-meta .dot { color: var(--b-line); }
.bit-chapter-open {
  margin-top: 22px; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--b-ember-hi); font-weight: 600;
}
.bit-star { color: var(--b-ember-hi); font-size: 0.8em; vertical-align: 0.15em; margin-left: 4px; }

.bit-empty { text-align: center; color: var(--b-dim); padding: 70px 16px; animation: bitRise 0.5s ease both; }
.bit-empty .bit-chapter-mark { opacity: 0.5; font-size: 2rem; }
.bit-empty h3 { font-family: "Playfair Display", serif; color: var(--b-bone); font-size: 1.5rem; margin-bottom: 10px; }
.bit-empty p { max-width: 34ch; margin: 0 auto; line-height: 1.6; }
.bit-loading { text-align: center; color: var(--b-dim); padding: 70px 16px; font-family: "Montserrat", sans-serif; letter-spacing: 0.02em; }

/* --------------------------- EL CAPÍTULO ----------------------------- */
.bit-back {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
  color: var(--b-dim); font-family: "Montserrat", sans-serif; font-size: 0.76rem;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 0; margin-bottom: 24px;
  transition: color 0.2s ease;
}
.bit-back:hover { color: var(--b-ember-hi); }

/* Portada como apertura de libro: a sangre (edge-to-edge) y disolviéndose en la página. */
.bit-cover-wrap {
  position: relative;
  margin: 0 calc(-1 * var(--pad)) 0;
  animation: bitRise 0.5s ease both;
}
.bit-cover {
  width: 100%; aspect-ratio: 4 / 3; max-height: 66vh; object-fit: cover; display: block;
  border: none; border-radius: 0;
}
.bit-cover-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 21, 15, 0) 46%, rgba(13, 21, 15, 0.55) 78%, var(--b-bg) 100%);
}

.bit-article { max-width: 600px; margin: 0 auto; position: relative; animation: bitRise 0.6s ease both; }
/* el encabezado emerge desde la portada */
.bit-tipo {
  margin-top: 30px; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--b-ember); font-weight: 600;
}
.bit-title {
  font-family: "Playfair Display", serif; font-weight: 700;
  font-size: clamp(2.2rem, 9vw, 3.2rem); line-height: 1.06; letter-spacing: -0.015em;
  color: var(--b-bone-hi); margin: 14px 0 10px;
}
.bit-subtitle {
  font-family: "Playfair Display", serif; font-style: italic; font-size: 1.28rem;
  color: var(--b-dim); line-height: 1.42;
}
.bit-datemeta {
  margin: 22px 0 4px; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--b-dim); display: flex; flex-wrap: wrap; gap: 7px 14px;
}
.bit-rule { border: none; border-top: 1px solid var(--b-line); margin: 34px 0; width: 100%; }

.bit-story { color: #e4ddce; font-size: 1.08rem; line-height: 1.92; }
.bit-story p { margin: 0 0 1.5em; }
.bit-story p:last-child { margin-bottom: 0; }
/* capitular sobria en el primer párrafo: sabor de libro */
.bit-story > p:first-of-type::first-letter {
  font-family: "Playfair Display", serif; font-weight: 700; color: var(--b-ember-hi);
  font-size: 3.1em; line-height: 0.78; float: left; margin: 0.06em 0.1em 0 0;
}

/* Galería: las imágenes respiran, con su rótulo editorial. */
.bit-section-label {
  margin: 44px 0 16px; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--b-ember); font-weight: 600; text-align: center;
}
.bit-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; }
.bit-gallery img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px;
  border: 1px solid var(--b-line); cursor: zoom-in;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.bit-gallery img:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8); }
.bit-gallery img:active { transform: scale(0.985); }

.bit-organizer {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--b-line);
  color: var(--b-dim); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: center;
}
.bit-organizer b { color: var(--b-bone); font-weight: 600; }

/* CTA final: cierra la lectura, no es un botón pegado. */
.bit-cta-wrap { margin: 46px 0 8px; text-align: center; }
.bit-cta-wrap::before { content: "\2726"; display: block; color: var(--b-ember); font-size: 0.9rem; opacity: 0.7; margin-bottom: 26px; }
.bit-cta {
  display: inline-block; background: linear-gradient(180deg, var(--b-ember-hi), var(--b-ember));
  color: #241d12; border: none; border-radius: 999px; padding: 15px 34px; cursor: pointer;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em;
  box-shadow: 0 18px 40px -18px rgba(201, 170, 106, 0.6); text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bit-cta:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -18px rgba(201, 170, 106, 0.7); }
.bit-cta--ghost {
  background: transparent; color: var(--b-ember-hi);
  border: 1px solid rgba(230, 201, 138, 0.45); box-shadow: none;
}
.bit-cta--ghost:hover { box-shadow: none; border-color: var(--b-ember-hi); }

/* --------------------------- LIGHTBOX -------------------------------- */
.bit-lightbox {
  position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center;
  background: rgba(6, 10, 8, 0.94); padding: 24px; cursor: zoom-out; animation: bitFade 0.28s ease;
}
.bit-lightbox.hidden { display: none; }
.bit-lightbox img {
  max-width: 100%; max-height: 90vh; border-radius: 12px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75); animation: bitZoom 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bit-lightbox-x {
  position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--b-line); background: rgba(15, 23, 18, 0.85); color: var(--b-bone); font-size: 1rem; cursor: pointer;
  transition: background 0.2s ease;
}
.bit-lightbox-x:hover { background: rgba(201, 170, 106, 0.2); }

/* --------------------------- animaciones ----------------------------- */
@keyframes bitFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bitZoom { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes bitRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .bit-head, .bit-shelf, .bit-empty, .bit-cover-wrap, .bit-article,
  .bit-lightbox, .bit-lightbox img { animation: none !important; }
}

/* --------------------- TEASER EN EL HOME (fondo claro) --------------- */
/* Un "libro" oscuro y premium sobre el Home crema: invita a entrar. */
.bitacora-teaser {
  display: block; margin: 8px 0 4px; padding: 24px 22px; border-radius: 20px; text-decoration: none;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(201, 170, 106, 0.16), transparent 55%),
    linear-gradient(155deg, #16241d 0%, #101a12 70%);
  border: 1px solid rgba(201, 170, 106, 0.22);
  box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.bitacora-teaser:hover { transform: translateY(-2px); border-color: rgba(201, 170, 106, 0.4); }
.bitacora-teaser .bt-eyebrow {
  font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: #e6c98a; font-weight: 600;
}
.bitacora-teaser strong {
  display: block; font-family: "Playfair Display", serif; font-weight: 700; font-size: 1.6rem;
  color: #f7f4ee; line-height: 1.14; margin: 10px 0 8px; letter-spacing: -0.01em;
}
.bitacora-teaser .bt-sub { display: block; color: #9aa48f; font-size: 0.9rem; line-height: 1.55; }
.bitacora-teaser .bt-cta {
  display: inline-block; margin-top: 16px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #e6c98a; font-weight: 600;
}