/* Índice del blog (/blog). Se carga después de la parte cabeza.
   Usa .pag-cab, .filtros, .notas y .nota de paginas.css. */

/* Autores en la cabecera */
.blog-autores { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 28px 0 0; padding: 0; list-style: none; }
.blog-autores a { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; color: var(--texto-osc); }
.blog-autores img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(184, 205, 232, .3); }
.blog-autores b { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.blog-autores a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.blog-autores a:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 3px; border-radius: 8px; }

/* Filtros: los chips de paginas.css llevan 44 px de alto (mínimo táctil) */
.blog-lista .filtros { margin-bottom: 56px; }
.blog-lista .filtros a { min-height: 44px; }
.blog-lista .filtros a:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* Un grupo por categoría */
.blog-grupo { scroll-margin-top: 24px; }
.blog-grupo + .blog-grupo { margin-top: 72px; }
.blog-grupo-cab { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 8px 40px; align-items: end; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--borde); }
.blog-grupo-cab .h-media { color: var(--marino); }
.blog-grupo-cab p { max-width: 680px; font-size: 16px; line-height: 1.6; color: var(--texto-2); }

/* Tarjeta de nota: todo el recuadro abre la nota; el link real es el título */
.nota { position: relative; }
.nota h3 a { color: inherit; }
.nota h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.nota h3 a:focus-visible { outline: none; }
.nota:focus-within { outline: 2px solid var(--azul); outline-offset: 3px; }
.nota:hover h3 a { color: var(--azul); }
.nota-meta { display: flex; align-items: center; gap: 10px; line-height: 1.45; }
.nota-meta img { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.nota-meta b { display: block; font-weight: 600; color: var(--marino); }
/* Autor, fecha y minutos de lectura en tres líneas (el punto separador queda para lectores sin estilos) */
.nota-min { display: block; }
.nota-min .sep { display: none; }

/* Grupos de 4 notas: una fila de 4 en pantallas anchas */
@media (min-width: 1180px) {
  .notas.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .notas.n4 .nota-txt { padding: 18px 18px 22px; }
  .notas.n4 .nota h3 { font-size: 17px; }
}

.blog-aviso { max-width: 760px; margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--borde); font-size: 14px; line-height: 1.6; color: var(--texto-2); }

/* Cierre: canal de YouTube y vinculación */
.blog-cierre-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.blog-canal .h-grande { color: #fff; }
.blog-canal > p:not(.etiqueta) { max-width: 560px; margin-top: 16px; font-size: 18px; color: var(--texto-osc); }
.blog-canal .btn .ico { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.blog-vincular { padding: 32px; }
.blog-vincular h3 { font-size: 22px; font-weight: 700; line-height: 1.3; color: #fff; text-wrap: balance; }
.blog-vincular > p:not(.etiqueta) { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--texto-osc); }
.blog-vincular .btn { margin-top: 24px; }

@media (max-width: 1023px) {
  .blog-cierre-in { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 700px) {
  .blog-lista .filtros { margin-bottom: 44px; }
  .blog-grupo + .blog-grupo { margin-top: 56px; }
  .blog-grupo-cab { grid-template-columns: 1fr; margin-bottom: 22px; padding-bottom: 16px; }
  .blog-grupo-cab p { font-size: 15px; }
  .blog-canal > p:not(.etiqueta) { font-size: 17px; }
  .blog-vincular { padding: 24px; }
  .blog-vincular .btn, .blog-canal .btn { width: 100%; }
}