/* ============================================================
   KONARTE — Listado del blog (diseño 2026)
   Portada oscura como la de la home, temas, artículo destacado y rejilla de tarjetas.
   La paleta, la cabecera, el pie y la tarjeta de artículo están en sitio.css (se carga antes).
   ============================================================ */

/* ── Portada (componente .portada-interior de sitio.css) ── */
.portada-blog h1 { max-width: 760px; }

/* ── Listado ── */
.listado-blog { padding: 64px 0 var(--seccion); }
.intro-blog { max-width: 860px; font-size: 1.05rem; line-height: 1.75; color: var(--color-texto-suave); margin-bottom: 56px; padding-left: 22px; border-left: 2px solid var(--color-acento); }
.intro-blog a { color: var(--color-enlace); text-underline-offset: 3px; }

.destacado { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center; text-decoration: none; margin-bottom: 72px; }
.destacado .foto { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-imagen-vacia); }
.destacado img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.destacado:hover img { transform: scale(1.03); }
.destacado h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.1; margin-bottom: 16px; }
.destacado:hover h2 { color: var(--color-enlace); }
.destacado .extracto { color: var(--color-texto-suave); margin-bottom: 18px; }
.destacado .enlace { display: inline-block; margin-top: 26px; }

.datos { display: flex; flex-wrap: wrap; font-size: 0.8rem; color: var(--color-texto-suave); }
.datos > * + *::before { content: "·"; color: var(--color-acento); margin: 0 10px; }

.rejilla-articulos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 32px; }
.rejilla-articulos .articulo .extracto { -webkit-line-clamp: 3; }
.rejilla-articulos .articulo .datos { margin-top: 14px; }

/* Tarjeta de cierre (lleva al catálogo): ocupa el hueco de la última fila. cierre-3-N = tarjetas que quedan en la
   última fila con 3 columnas; cierre-2-N, con 2. Con la fila completa se oculta. */
.articulo--cierre {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; padding: 36px 34px;
  background: var(--color-fondo-oscuro); color: var(--color-texto-claro);
}
/* Foto real de fondo con velo oscuro abajo, donde va el texto (el zoom al pasar el ratón viene de .articulo img) */
.articulo--cierre .fondo { position: absolute; inset: 0; z-index: -2; object-position: center 45%; }
.articulo--cierre::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.88) 50%, rgba(10, 10, 10, 0.95) 100%); /* la foto apenas se asoma */
}
.articulo--cierre .cat { margin-top: 0; color: var(--color-acento); }
.articulo--cierre h2 { font-size: clamp(1.7rem, 2.4vw, 2.1rem); }
.articulo--cierre:hover h2 { color: inherit; } /* no es un enlace: el título no cambia de color */
.rejilla-articulos .articulo--cierre .extracto { color: var(--color-texto-claro-suave); font-size: 0.95rem; }
.articulo--cierre .botones { display: flex; flex-wrap: wrap; gap: 10px; max-width: 460px; margin-top: 24px; }
.articulo--cierre .boton { flex: 1 1 auto; padding: 14px 20px; }
.articulo--cierre.cierre-3-0 { display: none; }
.articulo--cierre.cierre-3-1 { grid-column: span 2; }
.sin-articulos { padding: 48px 0; color: var(--color-texto-suave); font-size: 1.1rem; }

.paginacion { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 72px; }
.paginacion a {
  min-width: 46px; height: 46px; display: grid; place-items: center; padding: 0 12px; text-decoration: none; font-size: 0.9rem; font-weight: 500;
  border: 1px solid var(--color-linea); transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.paginacion a:hover { border-color: var(--color-texto); }
.paginacion a[aria-current] { background: var(--color-fondo-oscuro); color: var(--color-texto-claro); border-color: var(--color-fondo-oscuro); }

/* ── Lo más reciente ── */
.lista-recientes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.lista-recientes a { display: flex; gap: 18px; align-items: center; padding: 18px 0; border-top: 1px solid var(--color-linea); text-decoration: none; }
.lista-recientes img { width: 112px; height: 84px; object-fit: cover; flex-shrink: 0; background: var(--color-imagen-vacia); }
.lista-recientes small { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-acento-texto); margin-bottom: 4px; }
.lista-recientes strong { font-family: var(--fuente-titulos); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.lista-recientes a:hover strong { color: var(--color-enlace); }

/* ── Asesoría ── */
.cta-blog .contenedor { display: flex; justify-content: space-between; align-items: center; gap: 48px; flex-wrap: wrap; }
.cta-blog h2 { max-width: 640px; }
.cta-blog .bajada { color: var(--color-texto-claro-suave); max-width: 560px; margin-top: 16px; }
.cta-blog .botones { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Tableta ── */
@media (max-width: 991.98px) {
  .destacado { grid-template-columns: 1fr; gap: 28px; }
  .rejilla-articulos { grid-template-columns: repeat(2, 1fr); }
  .articulo--cierre.cierre-3-0, .articulo--cierre.cierre-3-1 { display: flex; grid-column: auto; }
  .articulo--cierre.cierre-2-0 { grid-column: span 2; min-height: 320px; } /* fila completa: la tarjeta va sola, a lo ancho */
  .lista-recientes { grid-template-columns: 1fr; }
}

/* ── Celular ── */
@media (max-width: 640px) {
  .portada-blog .cifras > span:last-child { display: none; }
  .listado-blog { padding-top: 40px; }
  .intro-blog { font-size: 0.98rem; margin-bottom: 40px; padding-left: 16px; }
  .destacado { margin-bottom: 48px; gap: 20px; }
  .destacado .foto { margin: 0 calc(-1 * var(--margen-lateral)); }
  .destacado .enlace { margin-top: 18px; }
  .rejilla-articulos { grid-template-columns: 1fr; gap: 44px; }
  .articulo--cierre.cierre-2-0 { grid-column: auto; }
  .articulo--cierre, .articulo--cierre.cierre-2-0 { min-height: 400px; padding: 30px 24px; } /* alto para que se vea la foto arriba del texto */
  .rejilla-articulos .articulo h2 { font-size: 1.55rem; }
  .paginacion { margin-top: 52px; }
  .lista-recientes img { width: 92px; height: 70px; }
  .lista-recientes strong { font-size: 1.15rem; }
  .cta-blog .botones, .cta-blog .boton { width: 100%; }
}