/* ===========================
   Estilos propios del sitio
   Minimalismo limpio
   =========================== */

:root{
  --site-max: 860px;
  --text: rgba(0,0,0,0.88);
  --muted: rgba(0,0,0,0.62);
  --line: rgba(127,127,127,0.22);
}

/* Lectura: ancho, ritmo y suavidad */
main, .main, .post-content, .page-content, .container{
  max-width: var(--site-max);
  margin-left: auto;
  margin-right: auto;
}

body{
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
}

/* Enlaces: claros pero discretos */
a{
  text-underline-offset: 3px;
}

/* Separación elegante entre bloques del contenido */
.post-content > * + *,
.page-content > * + *{
  margin-top: 1rem;
}

/* Herramientas del blog: enlaces simples, sin “píldoras” */
.blog-tools{
  margin: 0.2rem 0 1.4rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
}

.blog-tools a{
  margin-right: 14px;
  text-decoration: underline;
  text-decoration-color: rgba(127,127,127,0.35);
}

.blog-tools a:hover{
  text-decoration-color: rgba(127,127,127,0.75);
}

/* Contacto: enlace Mastodon minimal */
.social-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: underline;
  text-decoration-color: rgba(127,127,127,0.35);
  font-weight: 600;
}

.social-link:hover{
  text-decoration-color: rgba(127,127,127,0.75);
}

.social-link img.icon-masto{
  width: 34px !important;   /* ajusta: 30 / 34 / 38 */
  height: 34px !important;
  border-radius: 8px;
}

/* Libros: mantener layout limpio, sin cajas */
.book-card{
  display:flex;
  gap: 18px;
  align-items:flex-start;
  margin: 18px 0 26px;
}

.book-cover{
  width: 120px;
  height:auto;
  border-radius: 12px;
  flex: 0 0 auto;
}

.book-meta p{
  margin: 0 0 0.7rem;
}

@media (max-width: 720px){
  .book-card{ flex-direction: column; }
  .book-cover{ width: 160px; }
}

/* Imágenes dentro de posts: más aire, menos protagonismo */
.post-content img {
  max-width: 66%;
  height: auto;
  display: block;
  margin: 1.4rem auto;
}

/* Pie de foto: centrado y discreto */
.post-content img + em {
  display: block;
  text-align: center;
  font-size: 0.9em;
  color: rgba(0,0,0,0.6);
  margin-top: -0.4rem;
}
/* Títulos dentro de los posts: sobrios, editoriales */
.post-content h2 {
  margin-top: 2.2rem;
  margin-bottom: 0.8rem;
  font-size: 1.4rem;
  font-weight: 600;
}

.post-content h3 {
  margin-top: 1.8rem;
  margin-bottom: 0.6rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.post-content h4 {
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
}