/* =====================================================================
   CIMA Blog — estilos
   Ajusta el diseño con variables en Apariencia > Personalizar > CSS adicional:
   .cima-bl { --bl-radius: 20px; --bl-cat-bg: #194fbc; }
   Es responsivo: la tarjeta destacada pasa de dos columnas a una según el
   ancho del bloque, y la cuadrícula ajusta sus columnas sola.
   Los selectores empiezan por .cima-bl para ganarle a los estilos del tema.
   ===================================================================== */
.cima-bl {
	--bl-radius: 30px; --bl-border: #E2E8F0; --bl-border-w: 3px; --bl-bg: #fff;
	--bl-gap: 20px; --bl-pad: clamp(20px, 2.6cqi, 36px);
	--bl-text: #16264A; --bl-muted: #5b6876; --bl-accent: #123F99; --bl-focus: #123F99;
	--bl-cat-bg: #123F99; --bl-cat-text: #fff;
	--bl-band: #2668cf; --bl-chip-active: #123F99;
	--bl-tag-border: #E2E8F0; --bl-tag-text: #16264A;
	--bl-img-bg: #dbe2fc; --bl-feat-min: 230px;
	--bl-card-ratio: 5 / 2;      /* proporción de la imagen de las tarjetas: más ancho = tarjeta más baja */
	container-type: inline-size; width: 100%;
	font-family: var(--bl-font, inherit); color: var(--bl-text); box-sizing: border-box; line-height: 1.4;
}
.cima-bl *, .cima-bl *::before, .cima-bl *::after { box-sizing: border-box; }
.cima-bl [hidden] { display: none !important; }
.cima-bl :focus-visible { outline: 3px solid var(--bl-focus); outline-offset: 3px; }
.cima-bl button { font-family: inherit; box-shadow: none; text-shadow: none; }
.cima-bl h2, .cima-bl h3, .cima-bl p { margin: 0; padding: 0; text-transform: none; letter-spacing: normal; }

/* Tarjetas (base común) */
.cima-bl .bl-feat, .cima-bl .bl-card { position: relative; overflow: hidden; margin: 0 !important; padding: 0 !important; border: var(--bl-border-w) solid var(--bl-border); border-radius: var(--bl-radius); background: var(--bl-bg); }
.cima-bl .bl-feat-media, .cima-bl .bl-card-media { position: relative; background: var(--bl-img-bg); overflow: hidden; }
.cima-bl .bl-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border: 0; border-radius: 0; }
.cima-bl .bl-link { color: inherit; text-decoration: none; background: none; }
.cima-bl .bl-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.cima-bl .bl-stretch::after { content: ""; position: absolute; inset: 0; z-index: 2; }  /* toda la tarjeta es clicable */
.cima-bl .bl-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cima-bl .bl-cat { display: inline-block; padding: .25em 1em; border-radius: 999px; background: var(--bl-cat-bg); color: var(--bl-cat-text); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; }
.cima-bl .bl-tag { display: inline-block; padding: .18em .9em; border: 2px solid var(--bl-tag-border); border-radius: 999px; background: #fff; color: var(--bl-tag-text); font-size: .8rem; line-height: 1.5; }
.cima-bl .bl-excerpt { color: var(--bl-muted); font-size: .95rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cima-bl .bl-more { display: inline-block; color: var(--bl-accent); font-weight: 600; font-size: .95rem; }

/* Barra de categorías (franja azul con chips) */
.cima-bl .bl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 var(--bl-gap); padding: 14px clamp(14px, 2cqi, 26px); border-radius: var(--bl-radius); background: var(--bl-band); }
.cima-bl-filtros { --bl-text: #16264A; --bl-chip-active: #123F99; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; box-sizing: border-box; font-family: var(--bl-font, inherit); }
.cima-bl-filtros *, .cima-bl-filtros *::before { box-sizing: border-box; }
.cima-bl .bl-chip, .cima-bl-filtros .bl-chip { display: inline-flex; align-items: center; gap: .4em; height: 38px; margin: 0; padding: 0 18px; border: 0; border-radius: 999px; background: #E2E8F0; color: var(--bl-text); font-family: inherit; font-size: .92rem; font-weight: 500; line-height: 1; text-transform: none; letter-spacing: normal; box-shadow: none; text-shadow: none; cursor: pointer; transition: background .15s, color .15s; }
.cima-bl .bl-chip:hover, .cima-bl-filtros .bl-chip:hover { background: #e9f0ff; color: var(--bl-text); }
.cima-bl .bl-chip.is-active, .cima-bl .bl-chip.is-active:hover, .cima-bl-filtros .bl-chip.is-active, .cima-bl-filtros .bl-chip.is-active:hover { background: var(--bl-chip-active); color: #E2E8F0; }
.cima-bl .bl-chip.is-active::before, .cima-bl-filtros .bl-chip.is-active::before { content: "\2713"; }
.cima-bl .bl-chip:focus-visible, .cima-bl-filtros .bl-chip:focus-visible { outline: 3px solid #E2E8F0; outline-offset: 2px; box-shadow: 0 0 0 5px #123F99; }
@media (max-width: 520px) { .cima-bl-filtros .bl-chip { font-size: .85rem; padding: 0 14px; } }
.cima-bl .bl-status { margin: 0 0 var(--bl-gap); color: var(--bl-muted); }

/* Destacado: dos columnas (imagen a la izquierda, ocupando todo el alto) */
.cima-bl .bl-feat { display: grid; grid-template-columns: 1fr; }
.cima-bl .bl-feat-media { aspect-ratio: 21 / 9; }
.cima-bl .bl-feat-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: var(--bl-pad); justify-content: center; }
.cima-bl .bl-eyebrow { color: var(--bl-accent); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cima-bl .bl-feat-title { font-family: inherit; font-size: clamp(1.4rem, 2.8cqi, 2.1rem); font-weight: 600; line-height: 1.15; color: var(--bl-text); }
.cima-bl .bl-feat .bl-more { margin-top: 2px; }
@container (min-width: 600px) {
	.cima-bl .bl-feat { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
	.cima-bl .bl-feat-media { aspect-ratio: auto; min-height: var(--bl-feat-min); }
}

/* Cuadrícula: las columnas se ajustan solas (1, 2 o 3 según el ancho) */
.cima-bl .bl-grid { display: grid; grid-template-columns: 1fr; gap: var(--bl-gap); margin-top: var(--bl-gap); }
@container (min-width: 560px) { .cima-bl .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 900px) { .cima-bl .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cima-bl .bl-card { display: flex; flex-direction: column; }
.cima-bl .bl-card-media { aspect-ratio: var(--bl-card-ratio); flex: 0 0 auto; }
.cima-bl .bl-card-body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 18px 16px; }
.cima-bl .bl-card-title { font-family: inherit; font-size: 1.05rem; font-weight: 600; line-height: 1.25; color: var(--bl-text); }
.cima-bl .bl-card .bl-more { margin-top: auto; padding-top: 2px; font-size: .9rem; }

.cima-bl .bl-morewrap { margin-top: 22px; text-align: center; }
.cima-bl .bl-morebtn { margin: 0; padding: 6px 4px; border: 0; border-bottom: 2px solid currentColor; border-radius: 0; background: none; color: var(--bl-text); font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: normal; cursor: pointer; }
.cima-bl .bl-morebtn:hover, .cima-bl .bl-morebtn:focus { background: none; color: var(--bl-text); }
.cima-bl-empty { color: #5b6876; }

@container (max-width: 520px) {
	.cima-bl .bl-feat, .cima-bl .bl-card { border-radius: 22px; }
	.cima-bl .bl-grid { gap: 16px; margin-top: 16px; }
	.cima-bl .bl-chip { font-size: .85rem; padding: 0 14px; }
	.cima-bl { --bl-card-ratio: 16 / 9; }
}