/*
 * Blog LOBE - pagina publica de una categoria (blog_categorias_pruebas.php) y de una etiqueta (blog_etiquetas_pruebas.php).
 * Se carga despues de blog_home.css: reutiliza sus colores (--bh-*), .bh-home, .bh-wrap y las tarjetas .bh-ult. Todo lo nuevo cuelga de .bc-*
 */

.bc-cat { padding-bottom: 70px; }

/* ================= CABECERA ================= */
.bc-cabecera { background: linear-gradient(#efefef 0, #fff 100%); padding: 40px 0 34px; }

.bc-migas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--bh-gris); margin-bottom: 22px; }
.bc-migas a { color: var(--bh-gris); text-decoration: none; }
.bc-migas a:hover { color: var(--bh-rojo); text-decoration: underline; }
.bc-migas [aria-current] { color: var(--bh-texto); font-weight: 500; }
.bc-flecha { opacity: .6; }

.bc-titulo { font-size: 48px; font-weight: 600; line-height: 1.12; letter-spacing: -.01em; color: #000; margin: 0 0 12px; }
.bc-kicker { margin: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--bh-rojo); }
.bc-cuenta { margin: 0 0 4px; font-size: 14px; font-weight: 300; font-style: italic; color: var(--bh-gris); }

/* subcategorias: mismas "pildoras" rojas que las categorias del post */
.bc-subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.bc-subcats a { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1;
	color: var(--bh-rojo); border: 1px solid var(--bh-rojo); border-radius: 999px; padding: 9px 15px 8px; text-decoration: none; transition: background .2s, color .2s; }
.bc-subcats a:hover, .bc-subcats a:focus { background: var(--bh-rojo); color: #fff; text-decoration: none; }

/* indice de etiquetas (blog_etiquetas_pruebas.php sin parametros) */
.bc-nube { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.bc-nube a { display: inline-block; font-size: 15px; font-weight: 400; line-height: 1; color: var(--bh-texto); border: 1px solid #cfcfcf; border-radius: 999px; padding: 10px 16px 9px; text-decoration: none; transition: border-color .2s, color .2s; }
.bc-nube a span { margin-left: 4px; font-size: 12px; font-weight: 300; opacity: .65; }
.bc-nube a:hover, .bc-nube a:focus { color: var(--bh-rojo); border-color: var(--bh-rojo); text-decoration: none; }

/* ================= LISTADO ================= */
.bc-listado { padding-top: 30px; }
.bc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 54px 28px; }
.bc-card .bh-ult-img { aspect-ratio: 4 / 3; }
.bc-card .bh-ult-img .bh-chip { left: 20px; bottom: 16px; font-size: 13px; }
.bc-card .bh-t { font-size: 21px; margin: 22px 0 10px; }
.bc-card .bh-resumen { font-size: 16px; line-height: 1.3; }

.bc-vacio { font-size: 18px; line-height: 1.6; margin: 30px 0 10px; }

/* ================= PAGINACION ================= */
.bc-pag { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 64px; }
.bc-pag a, .bc-pag-act, .bc-pag-pts { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 999px; font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; }
.bc-pag a { color: var(--bh-texto); border: 1px solid #cfcfcf; transition: border-color .2s, color .2s; }
.bc-pag a:hover, .bc-pag a:focus { color: var(--bh-rojo); border-color: var(--bh-rojo); text-decoration: none; }
.bc-pag-act { background: var(--bh-rojo); color: #fff; border: 1px solid var(--bh-rojo); }
.bc-pag-pts { color: var(--bh-gris); min-width: 24px; padding: 0; }
.bc-pag-flecha { font-size: 24px !important; padding-bottom: 3px !important; }

.bc-volver { margin: 48px 0 0; text-align: center; }
.bc-volver a { display: inline-block; font-size: 15px; font-weight: 500; color: var(--bh-rojo); text-decoration: none; border-bottom: 1px solid transparent; }
.bc-volver a:hover { border-bottom-color: var(--bh-rojo); text-decoration: none; }

/* ================= RESPONSIVE ================= */
@media (max-width: 991px) {
	.bc-titulo { font-size: 38px; }
	.bc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 24px; }
}
@media (max-width: 767px) {
	.bc-cabecera { padding: 24px 0 24px; }
	.bc-migas { margin-bottom: 16px; }
	.bc-titulo { font-size: 30px; }
	.bc-pag { margin-top: 48px; gap: 6px; }
	.bc-pag a, .bc-pag-act { min-width: 38px; height: 38px; padding: 0 9px; }
}
@media (max-width: 575px) {
	.bc-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.bc-subcats a, .bc-pag a, .bc-nube a { transition: none; }
}