/* ============================================================
   bitácora — blog (archivo + entrada) · tokens del proyecto
   ============================================================ */

.bitacora {
  width: 100%;
  padding: clamp(8rem, 14vw, 11rem) 0 var(--aire-xl);
}

.bitacora__caja {
  display: flex;
  flex-direction: column;
  gap: var(--aire-m);
}

.bitacora__cab {
  display: flex;
  flex-direction: column;
  gap: var(--aire-s);
}
.bitacora__titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--marfil);
}

.bitacora__reja {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.nota {
  background: linear-gradient(160deg, var(--fieltro-alto), var(--fieltro));
  border: 1px solid var(--linde);
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.nota:hover { border-color: var(--esmeralda); transform: translateY(-3px); }
.nota > a > img {
  width: 100%;
  height: 14rem;
  object-fit: cover;
}
.nota__cuerpo {
  padding: clamp(1.2rem, 2.5vw, 1.7rem);
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.nota__cuerpo h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.2;
}
.nota__cuerpo h2 > a { color: var(--marfil); transition: color .25s ease; }
.nota__cuerpo h2 > a:hover { color: var(--esmeralda-viva); }
.nota__cuerpo p { color: var(--marfil-medio); font-size: var(--t-cuerpo); line-height: 1.55; }

/* ===== entrada (single) ===== */

.pliego { width: 100%; padding: clamp(8rem, 14vw, 11rem) 0 var(--aire-xl); }
.pliego__caja {
  display: flex;
  flex-direction: column;
  gap: var(--aire-m);
}
.pliego__titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--marfil);
}
.pliego__portada {
  width: 100%;
  border-radius: var(--radio);
  object-fit: cover;
  box-shadow: var(--sombra-mesa);
}
.pliego__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  color: var(--marfil-medio);
  line-height: 1.75;
  font-size: var(--t-cuerpo);
}
.pliego__cuerpo > h2,
.pliego__cuerpo > h3,
.pliego__cuerpo > h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--marfil);
  margin-top: 1rem;
  line-height: 1.15;
}
.pliego__cuerpo > h2 { font-size: var(--t-h2); }
.pliego__cuerpo > h3 { font-size: var(--t-h3); }
.pliego__cuerpo > ul,
.pliego__cuerpo > ol {
  padding-left: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.pliego__cuerpo > ul > li::marker { color: var(--esmeralda); }
.pliego__cuerpo > ol > li::marker { color: var(--oro); font-weight: 700; }
.pliego__cuerpo img { border-radius: var(--radio); }
.pliego__volver { margin-top: var(--aire-s); }

/* navegación de páginas WP */
.navigation.posts-navigation .nav-links { display: flex; gap: 1.5rem; }
.navigation.posts-navigation a { color: var(--esmeralda-viva); }

@media (max-width: 1024px) {
  .bitacora__reja { grid-template-columns: 1fr; }
  .nota > a > img { height: 16rem; }
}