/* Edición digital · Biodiversidad y Conocimiento Local · Doñana */

:root {
  /* Paleta de la portada (libro-ojo): menta + coral + carbón + crema */
  --tinta:    #2c2a2b;   /* carbón: texto y títulos (del título de cubierta) */
  --tinta-2:  #5d5b5d;   /* secundario */
  --papel:    #f5f8f6;   /* fondo de lectura, casi blanco con pizca de menta */
  --papel-2:  #dcebe8;   /* sidebar / cajas: menta clara */
  --linea:    #c7ddd8;   /* divisorias: menta grisácea */
  --acento:   #d64d57;   /* coral: tomate y "Y CONOCIMIENTO LOCAL" (enlaces, activo) */
  --acento-2: #4f8a83;   /* teal oscuro: versalitas y detalles */
  --menta:    #a3cdc9;   /* color de marca: fondo de la portada */
  --crema:    #ece7db;   /* blanco cálido del ojo */

  /* Escala tipográfica corta */
  --fs-display: 2.6rem;
  --fs-h1:      2rem;
  --fs-h2:      1.35rem;
  --fs-h3:      1.08rem;
  --fs-cuerpo:  1.06rem;
  --fs-nota:    0.86rem;
  --fs-eyebrow: 0.74rem;

  /* Ritmo vertical */
  --aire-parte:  4.5rem;   /* entre secciones de primer nivel */
  --aire-bloque: 1.5rem;   /* entre bloques de una misma parte */

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --col-lectura: 40rem;
  --ancho-sidebar: 17rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: var(--fs-cuerpo);
  line-height: 1.72;
}

/* ---------- Sidebar ---------- */
/* Índice como cajón bajo demanda en todos los tamaños (no barra fija) */
#sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(20rem, 82vw);
  background: var(--papel-2);
  border-right: 1px solid var(--linea);
  padding: 1.6rem 1.2rem 3rem;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  z-index: 48;                      /* por encima del header fijo */
  box-shadow: 2px 0 24px rgba(0, 0, 0, 0.16);
}
#sidebar.abierto { transform: translateX(0); }
#backdrop {
  position: fixed;
  inset: 0;
  z-index: 46;
  background: rgba(20, 32, 30, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#backdrop.visible { opacity: 1; pointer-events: auto; }
.marca {
  display: block;
  font-size: var(--fs-nota);
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
  text-decoration: none;
  margin-bottom: 1.1rem;
}
#buscador {
  width: 100%;
  padding: 0.45rem 0.6rem;
  font-family: var(--mono);
  font-size: var(--fs-nota);
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: #fff;
  margin-bottom: 1.2rem;
}
#indice-nav .nav-parte {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento-2);
  margin: 1.2rem 0 0.4rem;
}
#indice-nav ul { list-style: none; margin: 0 0 0.2rem; padding: 0; }
#indice-nav li { margin: 0; }
#indice-nav a {
  display: block;
  padding: 0.28rem 0.5rem;
  font-family: var(--serif);
  font-size: var(--fs-cuerpo);
  color: var(--tinta-2);
  text-decoration: none;
  border-radius: 5px;
  line-height: 1.35;
}
#indice-nav a:hover { background: #fff; color: var(--tinta); }
#indice-nav li.activo a { background: var(--acento); color: #fff; }

/* ---------- Main ---------- */
main {
  margin-left: 0;
  padding: 3.8rem 1.5rem 6rem;   /* hueco para el header fijo */
}
main.ancho-completo { margin-left: 0; padding-top: 1rem; }   /* portada: sin header */
article { max-width: var(--col-lectura); margin: 0 auto; }

/* Cabecera de capítulo */
.cap-head { margin-bottom: var(--aire-parte); }
.cap-parte {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acento-2);
  margin: 0 0 0.5rem;
}
.cap-head h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
}
.cap-meta {
  font-family: var(--mono);
  font-size: var(--fs-nota);
  color: var(--tinta-2);
  margin: 0.7rem 0 0;
}

/* Portadilla de parte: divisoria que presenta los capítulos siguientes */
.portadilla-head {
  text-align: center;
  margin: var(--aire-parte) 0 var(--aire-parte);
  padding-bottom: var(--aire-bloque);
  border-bottom: 1px solid var(--linea);
}
.portadilla-eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento-2);
  margin: 0 0 0.8rem;
}
.portadilla-head h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
}
.portadilla-intro {
  max-width: var(--col-lectura);
  margin: var(--aire-parte) auto 0;
}
/* nota de autoría del apartado: línea aparte, en otro color (no globo) */
.portadilla-credito {
  margin-top: var(--aire-bloque);
  font-size: var(--fs-nota);
  color: var(--acento-2);
}
/* Portadillas con fondo menta: el color marca el inicio de cada sección */
body.portadilla-page { background: var(--menta); }
body.portadilla-page .portadilla-head { border-bottom-color: rgba(44, 42, 43, 0.2); }
body.portadilla-page .portadilla-credito { color: #2f574f; }
/* Rótulo de parte enlazado a su portadilla: conserva aspecto de rótulo */
#indice-nav .nav-parte a { display: inline; padding: 0; font: inherit; color: inherit; border-radius: 0; }
#indice-nav .nav-parte a:hover { background: none; color: var(--tinta); text-decoration: underline; }
.idx-parte a { display: inline; padding: 0; font: inherit; color: inherit; border-bottom: none; }
.idx-parte a:hover { text-decoration: underline; }

/* Encabezados internos */
article h1 { font-size: var(--fs-h1); }
article h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin: var(--aire-parte) 0 var(--aire-bloque);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--linea);
  line-height: 1.2;
}
article h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--acento-2);
  margin: 2.2rem 0 0.6rem;
}
article p { margin: 0 0 var(--aire-bloque); text-align: justify; hyphens: auto; }

/* Verbatim: transcripciones de entrevistas. Compacto, con sangría, sin viñetas */
.verbatim {
  margin: var(--aire-bloque) 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--linea);
}
.verbatim .vl {
  margin: 0 0 0.45rem;
  text-align: left;
  hyphens: none;
  font-size: var(--fs-cuerpo);
  line-height: 1.5;
  color: var(--tinta);          /* entrevistado: voz principal, carbón */
}
.verbatim .hablante { font-weight: 600; color: var(--tinta); }
/* entrevistador: se aparta, en cursiva y teal apagado */
.verbatim .vl.entrevistador {
  font-style: italic;
  color: var(--acento-2);
  margin-top: 0.8rem;
}
.verbatim .vl.entrevistador:first-child { margin-top: 0; }
/* fuente de la cita en línea aparte y en negrita (prueba) */
.verbatim .vl.cita-fuente { font-weight: 700; margin-top: 0.2rem; }
article ul, article ol { margin: 0 0 var(--aire-bloque); padding-left: 1.4rem; }
article li { margin-bottom: 0.35rem; }
article em { font-style: italic; }
article a { color: var(--acento-2); }

/* Figuras (foto + pie): leve presencia (44rem) pero CAPADAS en alto (70vh)
   para que ninguna llene la pantalla. Aparición suave y clic para ampliar. */
article figure {
  width: 100vw;                  /* banda de color a todo el ancho */
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 2.8rem;
  margin-bottom: 2.8rem;
  padding: clamp(1.6rem, 4vw, 3rem) 1rem;
  background: var(--crema);      /* fondo cálido tras la foto */
  text-align: center;
  cursor: zoom-in;
}
article figure img {
  display: block;
  margin: 0 auto;
  max-width: min(44rem, 92vw);
  max-height: 70vh;
  width: auto;
  height: auto;
  border-radius: 4px;
}
article figcaption {
  font-family: var(--mono);
  font-size: var(--fs-nota);
  color: var(--acento);          /* pie en rojo corporativo (coral) */
  margin: 0.7rem auto 0;
  line-height: 1.45;
  max-width: min(44rem, 92vw);
}
/* aparición al entrar en pantalla (solo fade; el centrado vive en transform) */
.con-reveal article figure { opacity: 0; transition: opacity 0.7s ease; }
.con-reveal article figure.in { opacity: 1; }
/* lightbox: clic en una foto para verla grande */
#lb {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 22, 20, 0.9);
  display: none; align-items: center; justify-content: center;
  cursor: zoom-out; padding: 2rem;
}
#lb.on { display: flex; }
#lb img { max-width: 100%; max-height: 100%; border-radius: 4px; }

/* Notas al pie: se despliegan en línea al tocar el número (sin globo flotante) */
.nota { cursor: pointer; }
.nota > sup { color: var(--acento); font-weight: 700; font-size: 0.74em; padding: 0 0.2em; }
.nota.abierta > sup { background: var(--acento); color: var(--crema); border-radius: 3px; }
.nota-pop { display: none; }
.nota.abierta .nota-pop {
  display: block;
  margin: 0.7rem 0;
  padding: 0.6rem 0.9rem 0.65rem;
  border-left: 3px solid var(--acento-2);
  background: var(--papel-2);
  border-radius: 0 6px 6px 0;
  font-family: var(--serif);
  font-size: var(--fs-nota);
  font-weight: 400; font-style: normal;
  line-height: 1.55; text-align: left; hyphens: none;
  color: var(--tinta);
}
.nota-n { font-family: var(--mono); color: var(--acento-2); font-weight: 700; margin-right: 0.45rem; }
.nota-pop a { color: var(--acento); }
article > img, article p img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.4rem auto;
  border-radius: 4px;
}

/* Tablas: limpias, solo líneas horizontales (sin caja ni verticales) */
.tabla-wrap { overflow-x: auto; margin: var(--aire-bloque) 0; }
article table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--serif);
  font-size: calc(var(--fs-cuerpo) - 2px);
}
article th, article td {
  padding: 0.5rem 0.7rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linea);
}
article th {
  font-weight: 600;
  border-bottom: 2px solid var(--tinta);
}
/* segunda columna (Nº var.): no parte línea */
article th:nth-child(2), article td:nth-child(2) { white-space: nowrap; }
/* tablas usadas solo para colocar una imagen + pie: sin rejilla pesada */
article td img { margin: 0.2rem auto; }

/* Paginación */
.paginacion {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: var(--aire-parte);
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: var(--fs-nota);
}
.paginacion a { color: var(--acento); text-decoration: none; }
.paginacion a:hover { color: var(--acento-2); }
.paginacion .next { margin-left: auto; text-align: right; }

/* ---------- Portada (campo menta, como la cubierta) ---------- */
.portada-body { background: var(--papel); color: var(--tinta); overflow-x: hidden; }
.portada-body main { padding: 1rem 0 0; }   /* sin relleno inferior: el footer llega al fondo */
.portada-body article p { text-align: center; }   /* anula el justify global */

/* ojo, título y subtítulo comparten ancho: van siempre juntos y encajados */
.portada-hero { text-align: center; padding: 2.8rem 1rem 1.6rem; --w-portada: min(38rem, 88vw); }
.ojo {
  width: var(--w-portada);
  height: auto;
  display: block;
  margin: 0 auto 1.4rem;
}
.portada-titulo { margin: 0 0 0.9rem; }
.titulo-svg {
  display: block;
  width: var(--w-portada);
  height: auto;
  margin: 0 auto;
}
.titulo-svg .ts1,
.titulo-svg .ts2 {
  font-family: var(--sans);
  font-weight: 800;
}
.titulo-svg .ts1 { font-size: 78px; fill: var(--tinta); }
.titulo-svg .ts2 { font-size: 50px; fill: var(--acento); }
/* solo para lectores de pantalla / buscadores */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.portada-sub {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--tinta);
  max-width: var(--w-portada);
  margin: 0 auto 1.6rem;
  line-height: 1.35;
}
.portada-hero .eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2c2a2b;
  opacity: 0.65;
  margin: 0;
}

.portada-meta { text-align: center; max-width: 38rem; margin: 0 auto 3.2rem; }
.portada-meta .autoria { font-weight: 600; font-size: var(--fs-cuerpo); margin-bottom: 0.2rem; }
.portada-meta .director { font-size: var(--fs-nota); color: #345f5a; margin: 0 0 0.4rem; }
.portada-meta .credito {
  font-family: var(--serif);
  font-size: var(--fs-nota);
  color: #345f5a;
  line-height: 1.6;
}
.portada-meta .credito + .credito { margin-top: 0.9rem; }
.portada-meta .credito a { color: var(--acento); text-decoration: underline; }
.portada-meta .credito a:hover { color: var(--acento-2); }

/* Índice (vista blog): banda de papel con secciones; cada sección, rejilla reglada */
.indice-blog {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  background: var(--papel);
  border-top: 1px solid var(--linea);
  padding: clamp(2rem, 5vw, 3.6rem) clamp(1.2rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
  text-align: left;
}
.ib-wrap { max-width: 1180px; margin: 0 auto; }

/* enlace para volver a la cubierta */
.indice-blog .ib-portada {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--acento-2);
  padding: 0; margin-bottom: 1.2rem;
}
.indice-blog .ib-portada:hover { color: var(--acento); }

/* filtros: navegación entre secciones, fija al hacer scroll */
.indice-blog .filtros {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  background: var(--papel);
  padding: 1rem 0;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--linea);
}
.indice-blog .f {
  font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: 0.1em;
  text-transform: uppercase; background: none; border: 1px solid var(--linea);
  color: var(--tinta-2); padding: 0.45rem 0.8rem; border-radius: 999px;
  cursor: pointer; transition: all 0.15s;
}
.indice-blog .f:hover { border-color: var(--acento-2); color: var(--tinta); }
.indice-blog .f.activo { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }

/* secciones: cada una arranca en línea nueva, con su cabecera */
.indice-blog .seccion { margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.indice-blog .sec-head { max-width: 50rem; margin: 0 0 2rem; border-bottom: 2px solid var(--tinta); padding-bottom: 1rem; }
.indice-blog .sec-eyebrow {
  font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--acento-2); margin: 0 0 0.6rem;
}
.indice-blog .sec-titulo { font-size: var(--fs-h1); font-weight: 700; line-height: 1.05; margin: 0; border-bottom: none; padding-bottom: 0; }
.indice-blog .sec-intro { font-size: var(--fs-cuerpo); line-height: 1.55; color: var(--tinta-2); margin: 1rem 0 0; text-align: left; }
.indice-blog .sec-link {
  display: inline-block; font-family: var(--mono); font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em; color: var(--acento); margin-top: 1rem;
}
.indice-blog .sec-link:hover { color: var(--acento-2); }

/* nota de presentación de la edición digital (bajo los filtros, antes de Introducción) */
.indice-blog .edicion-nota {
  max-width: 50rem;
  margin: 0 0 var(--aire-parte);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--linea);
  text-align: left;
}
.indice-blog .edicion-nota .eyebrow {
  font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--acento-2); margin: 0 0 1rem; text-align: left;
}
.indice-blog .edicion-nota p { font-size: var(--fs-nota); line-height: 1.7; color: var(--tinta); margin: 0 0 1rem; text-align: left; }
.indice-blog .edicion-nota p:last-child { margin-bottom: 0; }
.indice-blog .edicion-nota .firma {
  font-style: italic; color: var(--tinta-2); margin-top: 1.4rem;
}

/* rejilla reglada: las finas líneas son el gap de 1px sobre fondo línea (sin cajas) */
.indice-blog .grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--linea); border: 1px solid var(--linea);
}
.indice-blog .card { position: relative; background: var(--papel); display: flex; flex-direction: column; transition: background 0.15s ease; }
.indice-blog .card-img {
  position: relative; overflow: hidden; display: block; aspect-ratio: 4/3;
  background: var(--crema) center/cover no-repeat;
}
.indice-blog .card-img::after {
  content: ""; position: absolute; inset: 0; background: var(--acento);
  opacity: 0; transition: opacity 0.15s ease; mix-blend-mode: multiply;
}
.indice-blog .card-img.sin-foto {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--papel-2); padding: 1.2rem;
}
.indice-blog .card-img.sin-foto span { position: relative; z-index: 1; font-size: var(--fs-h3); color: var(--acento-2); }
.indice-blog .card-body { padding: 1rem 1.2rem 1.5rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.indice-blog .card.solo-texto .card-body { padding-top: 1.4rem; }
.indice-blog .card-title { font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; margin: 0; border-bottom: none; padding-bottom: 0; }
.indice-blog .card-title a { color: var(--tinta); text-decoration: none; }
/* enlace estirado: clic en cualquier parte de la tarjeta */
.indice-blog .card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.indice-blog .card-exc {
  font-size: var(--fs-nota); line-height: 1.5; color: var(--tinta-2); margin: 0; flex: 1; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.indice-blog .card-meta {
  font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tinta-2); margin: 0.2rem 0 0; text-align: left;
}
/* hover: la entrada entera vira a rojo corporativo, texto crema, foto teñida */
.indice-blog .card:hover { background: var(--acento); }
.indice-blog .card:hover .card-img::after { opacity: 0.55; }
.indice-blog .card:hover .card-img.sin-foto span,
.indice-blog .card:hover .card-title a,
.indice-blog .card:hover .card-exc,
.indice-blog .card:hover .card-meta { color: var(--crema); }

@media (max-width: 900px) { .indice-blog .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .indice-blog .grid { grid-template-columns: 1fr; } }

/* Copyright (antes del índice) */
.portada-copy {
  font-family: var(--serif);
  font-size: var(--fs-nota);
  color: #345f5a;
  line-height: 1.55;
  max-width: 34rem;
  margin: 0 auto 2.6rem;
}

/* Cubierta a pantalla completa al entrar (se cierra con la ×) */
body.cubierta-abierta { overflow: hidden; }
.cubierta {
  position: fixed; inset: 0; z-index: 100;
  background: var(--menta);
  overflow-y: auto;
  display: flex;
  padding: 3rem 1.2rem;
  transition: opacity 0.42s ease;
}
.cubierta.cerrada { opacity: 0; pointer-events: none; }
.cubierta-in { max-width: 44rem; margin: auto; text-align: center; }
.cubierta .portada-hero { --w-portada: min(26rem, 46vh); padding: 0 0 0.6rem; }
.cubierta .portada-sub { margin-bottom: 1rem; }
.cubierta .portada-meta { margin-bottom: 0.8rem; }
/* parte inferior de créditos (de "Primera edición…") más compacta */
.cubierta .portada-meta .credito + .credito,
.cubierta .portada-copy {
  font-size: var(--fs-eyebrow);
  line-height: 1.45;
  margin-top: 0.6rem;
}
.cubierta .portada-copy { margin-bottom: 0; }
.cubierta-x {
  position: fixed; top: 1rem; right: 1.2rem; z-index: 101;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: none; border: 1px solid var(--tinta); color: var(--tinta);
  font-family: var(--mono); font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.cubierta-x:hover { background: var(--tinta); color: var(--crema); }
.cubierta-entrar {
  margin-top: 2rem; background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--acento-2);
}
.cubierta-entrar:hover { color: var(--acento); }

/* Footer de créditos: banda oscura propia, separada del índice */
.pie-libro {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  background: var(--tinta);
  color: var(--crema);
  text-align: center;
  padding: clamp(2rem, 5vw, 3rem) 1.2rem;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.04em;
  line-height: 1.7;
}
.pie-libro p { margin: 0 0 0.4rem; text-align: center; color: var(--crema); }
.pie-libro p:last-child { margin-bottom: 0; }
.pie-libro a { color: var(--menta); text-decoration: none; }
.pie-libro a:hover { color: #fff; text-decoration: underline; }

/* ---------- Header fijo de lectura (libro · posición · progreso) ---------- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 45;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 1.2rem;
  background: rgba(245, 248, 246, 0.93);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: var(--fs-nota);
  font-weight: 400;
}
.tb-libro {
  color: var(--tinta-2);
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-libro:hover { color: var(--tinta); }
.tb-izq { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.tb-buscar { color: var(--acento-2); text-decoration: none; white-space: nowrap; }
.tb-buscar:hover { color: var(--acento); }
.tb-indice-m { display: none; color: var(--acento-2); text-decoration: none; white-space: nowrap; }
.tb-indice-m:hover { color: var(--acento); }
/* posición del lector: SECCIÓN · CAPÍTULO · % */
.tb-pos {
  display: flex; align-items: center; gap: 0.5rem;
  min-width: 0; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.tb-sec { color: var(--acento-2); overflow: hidden; text-overflow: ellipsis; }
.tb-capn { color: var(--tinta); overflow: hidden; text-overflow: ellipsis; }
.tb-sep { color: var(--linea); }
.tb-pct {
  background: var(--acento); color: var(--crema);
  border-radius: 999px; padding: 0.1rem 0.55rem;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.tb-prog {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  background: var(--acento); width: 0;
}
@media (max-width: 620px) {
  .tb-libro { display: none; }
  .tb-indice-m { display: inline; }         /* el título largo se va, pero queda la vuelta al índice */
  .tb-sec, .tb-sep-sec { display: none; }   /* en móvil: ‹ Índice  +  CAPÍTULO · % */
}

@media (max-width: 760px) {
  main { padding: 4.2rem 1.2rem 5rem; }
  article p { text-align: left; }
}

/* Tarjeta de acceso al buscador y a la obra en PDF (en el índice) */
.indice-blog .card-busca,
.indice-blog .card-pdf { background: var(--papel-2); }

/* Tarjeta de acceso a la galería: rojo corporativo, para diferenciarla */
.indice-blog .card-galeria { background: var(--acento); }
.indice-blog .card-galeria .card-title a,
.indice-blog .card-galeria .card-exc,
.indice-blog .card-galeria .card-meta { color: var(--crema); }
.indice-blog .card-galeria:hover { background: var(--tinta); }   /* reacciona a carbón (el rojo ya es su base) */

/* chip de acceso a la galería en la barra de filtros */
.indice-blog .gal-chip {
  font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--acento);
  border: 1px solid var(--acento); border-radius: 999px;
  padding: 0.45rem 0.8rem; text-decoration: none; white-space: nowrap;
}
.indice-blog .gal-chip:hover { background: var(--acento); color: var(--crema); }

/* ---------- Página del buscador ---------- */
.buscador-body { background: var(--papel); }
.buscador-main { max-width: 62rem; margin: 0 auto; padding: 4.6rem 1.2rem 2rem; }
.bus-titulo { font-size: var(--fs-h1); font-weight: 700; margin: 0 0 0.6rem; }
.bus-intro { color: var(--tinta-2); max-width: 46rem; margin: 0 0 1.6rem; }
.bus-input {
  width: 100%; box-sizing: border-box;
  font-family: var(--serif); font-size: 1.2rem;
  padding: 0.85rem 1rem; border: 1px solid var(--linea); border-radius: 8px;
  background: #fff; color: var(--tinta);
}
.bus-facetas {
  display: flex; flex-wrap: wrap; gap: 0.7rem 1.3rem; align-items: center;
  font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-2); margin: 1.2rem 0 0;
}
.bus-facetas select {
  font-family: var(--mono); font-size: var(--fs-nota); color: var(--tinta);
  margin-left: 0.35rem; border: 1px solid var(--linea); border-radius: 5px;
  padding: 0.2rem 0.3rem; background: #fff;
}
.bus-check { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.bus-conteo {
  font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tinta-2);
  margin: 1.6rem 0 0.4rem; border-top: 1px solid var(--linea); padding-top: 1.2rem;
}
.bus-item {
  display: block; padding: 1.1rem 0; border-bottom: 1px solid var(--linea);
  text-decoration: none; color: var(--tinta);
}
.bus-item:hover { background: var(--papel-2); }
.bus-bc {
  font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--acento-2); margin: 0 0 0.4rem;
}
.bus-item.es-voz .bus-bc { color: var(--acento); }
.bus-snip { font-family: var(--serif); font-size: var(--fs-cuerpo); line-height: 1.55; margin: 0; }
.bus-item.es-voz .bus-snip { font-style: italic; }
.bus-snip mark { background: rgba(214, 77, 87, 0.2); color: inherit; border-radius: 2px; padding: 0 0.1em; }
.bus-mas {
  display: block; margin: 1.8rem auto 0; cursor: pointer;
  font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tinta);
  background: none; border: 1px solid var(--linea); border-radius: 999px;
  padding: 0.55rem 1.2rem;
}
.bus-mas:hover { border-color: var(--acento-2); color: var(--acento); }

/* ---------- Galería de imágenes ---------- */
.galeria-body { background: var(--papel); }
.galeria-main { max-width: 1180px; margin: 0 auto; padding: 4.6rem 1.2rem 2rem; }
.galeria-main .bus-facetas {
  position: sticky; top: 0; z-index: 30;
  background: var(--papel); padding: 1rem 0; margin: 1rem 0 0;
  border-bottom: 1px solid var(--linea);
}
.gal-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--linea); border: 1px solid var(--linea); margin-top: 1.4rem;
}
@media (max-width: 900px) { .gal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } }
.gal-item {
  position: relative; display: block; padding: 0; border: 0; cursor: zoom-in;
  background: var(--crema); aspect-ratio: 1 / 1; overflow: hidden;
}
.gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-item::after {
  content: ""; position: absolute; inset: 0; background: var(--acento);
  opacity: 0; transition: opacity 0.15s ease; mix-blend-mode: multiply;
}
.gal-item:hover::after { opacity: 0.45; }
/* etiqueta al hover: cultivo + pie */
.gal-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0.55rem 0.6rem; text-align: left; color: #fff;
  font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1.3;
  opacity: 0; transition: opacity 0.15s ease;
  background: linear-gradient(to top, rgba(20,20,20,0.55), rgba(20,20,20,0));
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.gal-item:hover .gal-cap { opacity: 1; }
.gal-cap small { display: block; text-transform: none; letter-spacing: 0; font-size: 0.92em; opacity: 0.92; margin-top: 0.15rem; }

/* lightbox de la galería */
.gal-lb {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; padding: 2rem;
  background: rgba(15, 22, 20, 0.92); cursor: zoom-out;
}
.gal-lb.on { display: flex; }
.gal-lb-in { max-width: 1000px; text-align: center; }
.gal-lb-in img { max-width: 100%; max-height: 76vh; border-radius: 4px; }
.gal-lb-pie { color: var(--crema); font-family: var(--mono); font-size: var(--fs-nota); margin: 0.9rem 0 0.5rem; }
.gal-lb-cap {
  color: var(--menta); font-family: var(--mono); font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; cursor: pointer;
}
.gal-lb-cap:hover { color: #fff; }