/* Estilos propios de /blog/. La base del sitio está en /assets/sitio.css. */

/* Cabecera del listado y de cada artículo */
.blog-cabecera, .articulo-cabecera { padding-block: 28px 8px; max-width: 70ch; }
.blog-cabecera h1, .articulo-cabecera h1 {
  margin-top: 14px;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.8rem, 5.5vw, 3rem); line-height: 1.06;
}
.blog-cabecera p, .entradilla { margin: 16px 0 0; color: var(--cream-dim); font-size: 1.1rem; line-height: 1.6; }
.articulo-meta {
  margin: 16px 0 0;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--cream-mute);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* Listado de entradas */
.entradas {
  list-style: none; margin: 36px 0 72px; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.entrada {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 24px 22px; background: var(--bg-1);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .2s, transform .2s;
}
.entrada:hover { border-color: rgba(255,77,77,0.45); transform: translateY(-2px); }
.entrada h2 { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; line-height: 1.3; }
/* Toda la tarjeta es clicable, pero en el HTML hay un único enlace por entrada. */
.entrada h2 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.entrada h2 a:hover { color: var(--cream); }
.entrada p { margin: 0; color: var(--cream-dim); line-height: 1.6; }
.entrada-leer { margin-top: auto; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; color: var(--red); }

/* Cuerpo del artículo */
.articulo-cuerpo { margin-top: 36px; max-width: 70ch; color: var(--cream-dim); font-size: 1.05rem; line-height: 1.75; }
.articulo-cuerpo > :first-child { margin-top: 0; }
.articulo-cuerpo h2 {
  margin: 48px 0 14px; color: var(--cream);
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.35rem, 4vw, 1.85rem); line-height: 1.12;
}
.articulo-cuerpo h3 { margin: 28px 0 8px; color: var(--cream); font-size: 1.15rem; line-height: 1.35; }
.articulo-cuerpo p { margin: 0 0 16px; }
.articulo-cuerpo ul, .articulo-cuerpo ol { margin: 0 0 18px; padding-left: 1.3em; }
.articulo-cuerpo li { margin-bottom: 10px; }
.articulo-cuerpo strong { color: var(--cream); }
.articulo-cuerpo a, .cta-blog a {
  color: var(--cream); text-decoration: underline;
  text-decoration-color: var(--red); text-underline-offset: 3px;
}
.articulo-cuerpo a:hover, .cta-blog a:hover { color: var(--red); }

/* Aviso de cifras orientativas */
.nota {
  margin: 4px 0 22px; padding: 16px 18px;
  background: var(--bg-1); border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.95rem; line-height: 1.6;
}
.nota p { margin: 0; }
.nota strong { color: var(--gold-soft); }

/* CTA discreto al final del artículo */
.cta-blog {
  margin: 40px 0 0; max-width: 70ch; padding: 18px 20px;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--cream-dim); line-height: 1.6;
}
.cta-blog p { margin: 0; }
.cta-blog strong { color: var(--cream); }

/* Más artículos */
.relacionados { margin: 56px 0 72px; max-width: 70ch; }
.relacionados h2 {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-dim);
}
.relacionados ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.relacionados a {
  display: block; padding: 14px 18px; line-height: 1.4;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-weight: 600;
}
.relacionados a:hover { color: var(--cream); border-color: rgba(255,77,77,0.45); }
.relacionados a::after { content: ' →'; color: var(--red); }

@media (max-width: 640px) {
  .articulo-cuerpo { font-size: 1rem; }
  .entradas { grid-template-columns: 1fr; }
}