/* Blog: hereda los tokens de site.css (papel/tinta, Newsreader, Bricolage, Inter).
   Solo añade lo que la web no tenía: vídeo vertical, citas de poema, tarjetas y
   botones de compartir. Sin colores propios. */
.blog-vista { position: fixed; z-index: 90; inset: auto 0 0 0; margin: 0; padding: .7rem 1.5rem;
  text-align: center; font-size: .82rem; background: var(--tinta); color: var(--negro) }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: 0 0 1.2rem;
  font-family: var(--ui); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue) }
.blog-tag { padding: .2rem .65rem; border: 1px solid var(--linea2); border-radius: 99px; color: var(--gris) }
a.blog-tag:hover { border-color: var(--ambar); color: var(--ambar) }

/* Entrada: vídeo a la izquierda en escritorio, arriba en móvil */
.blog-cuerpo { width: var(--angosto); margin-inline: auto }
.blog-video { margin: 0 auto 2.2rem; width: min(100%, 380px) }
.blog-video video { width: 100%; aspect-ratio: 9 / 16; height: auto; background: var(--tinta);
  border-radius: var(--radio); box-shadow: 0 18px 50px rgba(22,21,15,.22) }
.blog-video figcaption { margin-top: .8rem; font-size: .82rem; line-height: 1.55; color: var(--gris) }
.blog-ia { margin: 0 0 .7rem; padding: .45rem .8rem; font-size: .82rem; font-weight: 600; line-height: 1.4;
  color: var(--tinta); background: color-mix(in srgb, var(--ambar) 10%, transparent); border-left: 2px solid var(--ambar) }
@media (min-width: 960px) {
  .blog-cab { width: min(1080px, 100% - 3rem) }
  .blog-cuerpo--video { width: min(1080px, 100% - 3rem); display: grid;
    grid-template-columns: 380px minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start }
  .blog-cuerpo--video .blog-video { position: sticky; top: 6.5rem; margin: 0 }
}
.blog-texto .prosa p { font-family: var(--lectura); font-weight: 300; font-size: 1.2rem; line-height: 1.75;
  margin: 0 0 1.2rem; color: var(--tinta) }
.blog-poema { margin: 2.4rem 0 1rem; padding: .4rem 0 .4rem 1.5rem; border-left: 2px solid var(--ambar) }
.blog-poema .poema { margin: 0 0 1.6rem }
.blog-poema .poema:last-of-type { margin-bottom: 1.2rem }
.blog-elipsis { margin: -.4rem 0 1.2rem; font-family: var(--lectura); font-size: 1.15rem; color: var(--tenue) }
.blog-poema footer { font-family: var(--ui); font-size: .78rem; letter-spacing: .08em; color: var(--tenue) }
.blog-poema cite { font-style: italic }
.blog-resto { margin: 0 0 2.4rem; font-size: .92rem; color: var(--gris) }

/* Compartir */
.blog-compartir { margin: 2.4rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--linea) }
.blog-compartir__t { margin: 0 0 .8rem; font-family: var(--ui); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tenue) }
.blog-compartir__fila { display: flex; flex-wrap: wrap; gap: .6rem }
.blog-btn { appearance: none; cursor: pointer; padding: .6rem 1.05rem; min-height: 44px; display: inline-flex;
  align-items: center; font: inherit; font-size: .88rem; color: var(--tinta); background: var(--plano);
  border: 1px solid var(--linea2); border-radius: var(--radio); transition: border-color .25s }
.blog-btn:hover { border-color: var(--ambar); color: var(--ambar) }
.blog-btn[hidden] { display: none }
.blog-compartir__ok { min-height: 1.4rem; margin: .6rem 0 0; font-size: .85rem; color: var(--gris) }
.blog-nav { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.2rem;
  padding-top: 1.6rem; border-top: 1px solid var(--linea) }

/* Listado */
.blog-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem }
.blog-chip { padding: .5rem 1rem; min-height: 40px; display: inline-flex; align-items: center; font-size: .88rem;
  border: 1px solid var(--linea2); border-radius: 99px; color: var(--gris) }
.blog-chip:hover { border-color: var(--ambar); color: var(--ambar) }
.blog-chip[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: var(--negro) }
.blog-lista { display: grid; gap: 1px; background: var(--linea); border-block: 1px solid var(--linea) }
.blog-card { display: grid; grid-template-columns: 96px 1fr; gap: 1.2rem; align-items: start; padding: 1.3rem .4rem;
  background: var(--negro); transition: background .3s }
.blog-card:hover { background: var(--hondo) }
.blog-card__img { width: 96px; aspect-ratio: 9 / 16; height: auto; object-fit: cover; border-radius: 3px; background: var(--tinta) }
.blog-card__img--texto { display: grid; place-items: center; font-family: var(--display); font-weight: 700;
  font-size: .8rem; letter-spacing: .08em; color: var(--tenue); background: var(--hondo); border: 1px solid var(--linea2) }
.blog-card__txt { display: grid; gap: .45rem; align-content: start; min-width: 0 }
.blog-card__txt .blog-meta { margin: 0 }
.blog-card__t { font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.2 }
.blog-card__r { font-size: .95rem; color: var(--gris); line-height: 1.6 }
.blog-card:hover .blog-card__t { color: var(--ambar) }
.blog-rss { margin-top: 1.6rem; font-size: .88rem }
@media (min-width: 700px) { .blog-card { grid-template-columns: 140px 1fr; gap: 1.8rem; padding: 1.6rem .6rem } .blog-card__img { width: 140px } }