/* =============================================
   LIFESTRATEGICS V9 — pages/blog.css
   Estilos compartidos por blog.html y blog-post-template.html.
   Mismo criterio que pages/service-page.css: sin capa (gana
   siempre), tokens de config.css, sin bordes redondeados en
   tarjetas de contenido, divisores de línea fina en vez de
   sombras. Radios pequeños se conservan solo en controles de
   UI (tabs, paginación, badges) igual que en el resto del sitio.
   Verde reservado solo para indicadores de crecimiento/delta —
   nunca como color de categoría o sección (ver config.css).
   ============================================= */

:root { --line: rgba(240,236,228,.17); }

/* Blog no carga pages/service-page.css (es su propia familia de
   página, no una página de servicio) — estas utilidades se
   replican aquí porque el resto del sitio las da por sentadas. */
.site { position: relative; z-index: 10; }
.ui {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.kicker { color: var(--yellow); margin-bottom: 20px; display: inline-block; }

/* section-head: mismo patrón que pages/service-page.css, para
   introducir la grid de "todos los artículos" con el mismo
   lenguaje tipográfico que el resto del sitio (eyebrow + h2). */
.section-head {
  display: block;
  max-width: 860px;
  padding: 0 var(--pad) clamp(24px, 3.5vw, 40px);
}
.section-head h2 {
  margin: 8px 0 0;
  font-size: var(--fs-h2);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 600;
}

/* =============================================
   HERO DE ÍNDICE (blog.html)
   Columna única, ancha, con aire — sin gráfico decorativo (se
   probó un SVG de marca en una ronda anterior y no aportaba;
   el destacado real vive más abajo en .blog-latest, así que el
   hero no necesita "llenar" nada, solo respirar).
   ============================================= */
.blog-hero {
  padding: clamp(140px, 16vw, 176px) var(--pad) clamp(48px, 6vw, 72px);
}
.blog-hero-copy { max-width: 860px; }
.blog-hero-copy h1 {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: .91;
  letter-spacing: -.055em;
}
.blog-hero-copy h1 .line { display: block; animation: rise .8s both; }
.blog-hero-copy h1 .line:nth-child(2) { animation-delay: .1s; }
.blog-hero-copy p {
  max-width: 560px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.blog-hero-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 26px;
  color: var(--muted);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  transition: color .2s, gap .2s;
}
.blog-hero-more:hover { color: var(--text); gap: 11px; }
.blog-hero-more svg { flex-shrink: 0; animation: blog-arrow-bounce 1.8s ease-in-out infinite; }
@keyframes blog-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* =============================================
   LO MÁS RECIENTE — cluster asimétrico: un destacado grande
   + 2-3 piezas chicas apiladas al lado, siempre los posts más
   nuevos en general (no depende del filtro de categoría de la
   grid de abajo). Da la señal de "hay más" sin que el
   destacado quede solo/huérfano junto al hero.
   ============================================= */
/* Cluster "lo más reciente": 1 destacado + 3 mini-posts.
   Footer del destacado y "Ver todos" son hermanos en la misma
   fila del grid, con separador, padding y línea base idénticos. */
.blog-latest {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  grid-template-areas:
    "featured side"
    "featured-footer more";
  column-gap: clamp(1.5rem, 3.5vw, 2.5rem);
  padding: 8px var(--pad) var(--space-section);
  align-items: stretch;
}
.blog-latest.is-single {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "featured";
}
.blog-latest.is-single .featured-post { max-width: 980px; }

.featured-post {
  grid-area: featured;
  color: inherit;
  border-top: 2px solid var(--accent, var(--blue));
}
.featured-post-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.featured-post-img-wrap {
  width: 100%;
  aspect-ratio: 128 / 65; /* hero visual: 1280×650, webp */
  overflow: hidden;
}
.featured-post-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-post-body { padding: 1rem 0 0; }
.featured-title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--text);
  margin: .75rem 0 .625rem;
}
.featured-excerpt {
  max-width: 72ch;
  min-height: calc(2 * 1.55em);
  margin: 0;
  font-size: var(--fs-body);
  color: var(--muted);
  line-height: var(--lh-body);
}
.featured-footer {
  grid-area: featured-footer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  min-height: 2.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.featured-meta { font-size: var(--fs-helper); color: var(--muted2); }
.featured-cta {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--muted);
  transition: color .2s, transform .2s;
  display: inline-block;
}
.featured-footer:hover .featured-cta { color: var(--yellow); transform: translateX(4px); }

/* El bloque superior de cada mini-post conserva thumb + texto
   en horizontal. Excerpt y footer ocupan después todo el ancho,
   para admitir títulos de 65 caracteres y descripciones de 135
   sin reducir la tipografía a tamaños ilegibles. */
.blog-latest-side {
  grid-area: side;
  display: grid;
  align-content: start;
}
.mini-post {
  display: block;
  min-width: 0;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.mini-post:first-child { border-top: none; padding-top: 2px; }
.mini-post-top {
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
  gap: clamp(.75rem, 1.4vw, 1rem);
  align-items: start;
}
.mini-post-thumb-wrap {
  width: 100%;
  aspect-ratio: 30 / 23; /* thumbnail: 1200×920, webp */
  border-top: 2px solid var(--accent, var(--border2));
  overflow: hidden;
}
.mini-post-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-post-heading { min-width: 0; }
.mini-post:hover .mini-post-title { color: var(--blue); }
.mini-post-badge-row { margin-bottom: .5rem; }
.mini-post-title {
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--text);
  transition: color .2s;
}
.mini-post-excerpt {
  min-height: calc(2 * 1.5em);
  margin: .75rem 0 0;
  font-size: var(--fs-body-sm);
  color: var(--muted);
  line-height: var(--lh-body);
}
.mini-post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .75rem;
}
.mini-post-meta { font-size: var(--fs-helper); color: var(--muted2); white-space: nowrap; }
.mini-post-cta {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  transition: color .2s, transform .2s;
  display: inline-block;
}
.mini-post:hover .mini-post-cta { color: var(--yellow); transform: translateX(3px); }
.blog-latest-more {
  grid-area: more;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 2.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  transition: color .2s, gap .2s;
}
.blog-latest-more:hover { color: var(--blue); gap: 10px; }

/* =============================================
   FILTRO DE CATEGORÍAS — control de UI, conserva forma de
   pill (igual que badges/botones del resto del sitio; el
   criterio "sin radio" aplica a tarjetas de contenido, no a
   controles pequeños).
   ============================================= */
.cat-filter-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 var(--pad);
}
.cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  letter-spacing: .01em;
}
.cat-tab:hover { border-color: var(--border2); color: var(--text); }
.cat-tab.active { border-color: var(--blue); color: var(--text); background: var(--blue-dim); }
.cat-tab-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
@keyframes dot-brand-cycle {
  0%   { background-color: var(--blue);   box-shadow: 0 0 5px var(--blue); }
  33%  { background-color: var(--yellow); box-shadow: 0 0 5px var(--yellow); }
  66%  { background-color: var(--red);    box-shadow: 0 0 5px var(--red); }
  100% { background-color: var(--blue);   box-shadow: 0 0 5px var(--blue); }
}
.cat-tab-dot--live { animation: dot-brand-cycle 4s ease-in-out infinite; }

/* =============================================
   GRID DE POSTS
   ============================================= */
.posts-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  margin: 22px 0 18px;
}
.posts-row-title {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted2);
}
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  margin: 0 var(--pad);
  min-height: 160px;
}
.catalog-post {
  width: 100%;
  padding: 1rem;
  border-top: 0;
  background: var(--bg);
}
.catalog-post:first-child {
  padding-top: 1rem;
}
.catalog-post .mini-post-top,
.catalog-post .mini-post-heading {
  height: 100%;
}
.catalog-post-media {
  min-width: 0;
}
.catalog-post-media .mini-post-badge-row {
  margin: 0 0 10px;
}
.catalog-post-media .badge,
.catalog-post .mini-post-title {
  align-self: flex-start;
}
.catalog-post .mini-post-heading {
  display: flex;
  flex-direction: column;
}
.catalog-post .mini-post-footer {
  margin-top: auto;
  padding-top: .75rem;
}
.posts-empty {
  grid-column: 1 / -1;
  padding: 40px 0;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-body-sm);
  background: var(--bg);
}

/* =============================================
   POST CARD — pieza base reutilizada en el grid principal,
   bloques por categoría y "relacionados" del template.
   Minimalista, mismo criterio que .fit-card de service-page.css:
   sin radio, sin sombra, acento de color superior, mucho aire
   interno. El thumb es un ícono cuadrado chico (no una banda de
   imagen a todo el ancho) para que la card no se sienta saturada
   — la imagen acompaña, no domina.
   ============================================= */
.post-card {
  background: var(--bg);
  border: 0;
  border-top: 2px solid var(--accent, var(--border2));
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 32px) clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 26px);
  transition: background .2s;
}
.post-card:hover {
  background: var(--surface);
  border-top-color: var(--accent, var(--border2));
  transform: none;
  box-shadow: none;
}
.post-card-thumb-wrap {
  width: clamp(76px, 7vw, 100px);
  aspect-ratio: 30 / 23; /* thumbnail: 1200×920, webp */
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 18px;
}
.post-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-card-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-card-badge-row {
  display: flex;
  align-items: center;
  margin-bottom: .5rem;
}
.post-card-title {
  font-size: clamp(0.92rem, 1.3vw, 1.05rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: -.005em;
  margin-bottom: 8px;
}
.post-card-divider { border: none; border-top: 1px solid var(--line); margin: 0 0 8px; }
.post-card-excerpt {
  min-height: calc(2 * 1.55em);
  font-size: var(--fs-body-sm);
  color: var(--muted);
  line-height: var(--lh-body);
  flex: 1;
  margin-bottom: 10px;
}
.post-card-foot,
.post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.post-card-date { font-size: var(--fs-helper); color: var(--muted2); }
.post-card-arrow {
  font-size: var(--fs-body-sm);
  color: var(--blue);
  font-weight: 700;
  transition: transform .2s;
}
.post-card:hover .post-card-arrow { transform: translateX(3px); }

/* =============================================
   PAGINACIÓN — control de UI, radio chico conservado.
   ============================================= */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px var(--pad) 0;
  margin-bottom: var(--space-section);
}
.pg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-body-sm);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  font-family: inherit;
  font-weight: 600;
}
.pg-btn:hover:not(:disabled) { border-color: var(--border2); color: var(--text); background: var(--surface); }
.pg-btn.on { border-color: var(--blue); color: var(--blue); background: var(--blue-dim); }
.pg-btn:disabled { opacity: .25; cursor: default; }

/* =============================================
   BLOQUES POR CATEGORÍA (WordPress-style, opcional / futuro)
   ============================================= */
.cat-block { padding: 0 var(--pad); margin-bottom: var(--space-section); }
.cat-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.cat-block-link {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--muted2);
  text-decoration: none;
  transition: color .15s;
}
.cat-block-link:hover { color: var(--blue); }
.cat-block-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }

/* =============================================
   BLOQUE NEWSLETTER — reemplaza el .explore-card redondeado.
   Mismo lenguaje que .blog-bridge de service-page.css: hairline
   arriba/abajo, sin caja ni radio.
   ============================================= */
.blog-newsletter {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(36px, 5vw, 56px) var(--pad);
  margin-bottom: var(--space-section);
  text-align: center;
}
.blog-newsletter-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 18px;
}
.blog-newsletter a.explore-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.blog-newsletter .explore-name { font-size: 1.4rem; font-weight: 400; letter-spacing: .04em; }
.blog-newsletter .explore-sub { font-size: var(--fs-body-sm); color: var(--muted2); }

/* =============================================
   ARTÍCULO INDIVIDUAL (blog-post-template.html)
   ============================================= */
.int-layout {
  display: block;
  max-width: var(--ls-page-wide);
  margin: 0 auto;
  padding: 128px var(--pad) 0;
}

.itoc {
  position: sticky;
  top: 88px;
  padding: 0 20px 28px 0;
  border-right: 1px solid var(--line);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
}
.itoc::-webkit-scrollbar { display: none; }
.itoc-lbl {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 12px;
}
#itoclist { list-style: none; display: flex; flex-direction: column; margin: 0 0 16px; gap: 1px; padding: 0; }
.itli {
  padding: 6px 10px 6px 12px;
  margin-left: -12px;
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: all .18s;
}
.itli.on { border-left-color: var(--yellow); }
.itli.on .itt { color: var(--text); }
.itli:hover .itt { color: var(--muted); }
.itt {
  font-size: var(--fs-helper);
  color: var(--muted2);
  line-height: 1.4;
  transition: color .18s;
  display: block;
  text-decoration: none;
}
.itoc-sep { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
.itoc-meta { font-size: var(--fs-helper); color: var(--muted2); line-height: 1.5; }
.itoc-meta strong { display: block; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.itoc-prog { margin-top: 12px; }
.itoc-prow {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--muted2);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.itoc-bar { height: 1px; background: var(--border2); }
.itoc-barf { height: 100%; background: var(--yellow); width: 0%; transition: width .18s; }

/* Columna de artículo — sin caja, editorial: el contenido fluye
   directo sobre el fondo de la página, separado por hairlines. */
.iac { padding: 0 0 80px; min-width: 0; }

.article-intro-layout {
  display: block;
  min-width: 0;
}
.article-breadcrumbs { min-width: 0; margin-bottom: 22px; }
.article-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.article-breadcrumbs li {
  display: inline;
  color: var(--muted2);
  font-size: var(--fs-helper);
  line-height: 1.45;
}
.article-breadcrumbs li + li::before {
  content: '/';
  margin-right: 8px;
  color: var(--border2);
}
.article-breadcrumbs li[aria-current="page"] { color: var(--blue); }
.article-breadcrumbs a {
  color: inherit;
  text-decoration: none;
  transition: color .18s;
}
.article-breadcrumbs a:hover { color: var(--text); }
.article-tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.article-tag-row .badge,
.article-time-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 11px;
  border-radius: 5px;
  box-sizing: border-box;
  line-height: 1;
}
.article-tag-row .badge { text-decoration: none; }
.article-time-tag {
  background: rgba(255,255,255,.06);
  color: var(--muted2);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.reading-label-compact { display: none; }

.article-body-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: start;
  padding-top: 32px;
}

.article-hero-wrap {
  position: relative;
  width: 100%;
  margin: 36px 0 0;
  aspect-ratio: 128 / 65;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.article-hero-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.article-hero-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(24,24,24,.94) 0%, rgba(24,24,24,.25) 55%, transparent 100%);
}

.article-header {
  max-width: 980px;
  margin: 0;
  padding: 0;
}
.article-header h1 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 12px 0 0;
}
.article-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 20px; }
.article-meta-item { display: flex; align-items: center; gap: 5px; font-size: var(--fs-helper); color: var(--muted2); letter-spacing: .01em; }
.article-author-link { text-decoration: none; transition: color .18s; }
.article-author-link:hover { color: var(--text); }

.article-prose {
  grid-column: 2;
  box-sizing: border-box;
  max-width: 740px;
  padding: 0 0 0 40px;
}
.article-prose p { font-size: .875rem; margin-bottom: 18px; color: var(--muted); line-height: 1.7; }
.article-prose p:last-child { margin-bottom: 0; }
.article-prose p.lead { font-size: .9375rem; color: var(--text); line-height: 1.7; font-weight: 500; margin-bottom: 26px; }
.article-prose strong { color: var(--text); font-weight: 700; }
.article-prose em { font-style: italic; }
.article-prose a { color: var(--muted2); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; transition: color .18s; }
.article-prose a:hover { color: var(--text); }
.article-prose h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  font-weight: 700;
  color: var(--text);
  margin: 46px 0 16px;
  line-height: 1.22;
  letter-spacing: -.015em;
  scroll-margin-top: 100px;
}
.article-prose h3 {
  font-size: clamp(1.08rem, 1.5vw, 1.2rem);
  font-weight: 700;
  color: var(--text);
  margin: 30px 0 11px;
  line-height: 1.3;
  letter-spacing: -.01em;
  scroll-margin-top: 100px;
}
.article-prose ul, .article-prose ol { padding-left: 22px; margin-bottom: 18px; }
.article-prose li { font-size: .875rem; line-height: 1.7; color: var(--muted); margin-bottom: 6px; }

.article-visual {
  width: 100%;
  margin: 30px 0 34px;
}
.article-visual img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
.article-visual figcaption {
  margin-top: 8px;
  color: var(--muted2);
  font-size: var(--fs-helper);
  line-height: 1.45;
}

.article-summary ul { margin: 12px 0 0; }
.article-summary li { color: inherit; }

.article-table-wrap {
  width: 100%;
  max-width: 100%;
  margin: 24px 0 34px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.article-table-wrap table {
  width: 100%;
  min-width: 620px;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: left;
}
.article-table-wrap th,
.article-table-wrap td {
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-helper);
  line-height: 1.5;
  vertical-align: top;
}
.article-table-wrap th {
  color: var(--text);
  font-weight: 700;
}
.article-table-wrap tbody tr:last-child td { border-bottom: 0; }

.descanso {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 26px 0;
  padding: 10px 0 10px 18px;
  border-left: 3px solid var(--border2);
  color: var(--text);
  font-style: normal;
}
.descanso.c-azul     { border-left-color: var(--blue);   color: var(--blue); }
.descanso.c-amarillo { border-left-color: var(--yellow); color: var(--yellow); }
.descanso.c-rojo     { border-left-color: var(--red);    color: var(--red); }
.descanso p { margin: 0; color: inherit; font-size: var(--fs-body); line-height: var(--lh-body); }
.article-prose .descanso,
.article-prose .descanso p { font-size: .875rem; line-height: 1.7; }

.article-divider { border: none; border-top: 1px solid var(--line); margin: 36px 0; }

.related-posts { padding: 40px 0 0; border-top: 1px solid var(--line); margin-top: 48px; }
.related-posts-title {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 20px;
}
.related-posts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; background: transparent; }
.related-post-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.article-prose .related-post-card { text-decoration: none; }
.related-post-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 920;
  object-fit: cover;
  border-top: 2px solid var(--line);
}
.related-post-card.badge-b img { border-top-color: var(--blue); }
.related-post-card.badge-y img { border-top-color: var(--yellow); }
.related-post-card.badge-r img { border-top-color: var(--red); }
.related-post-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-top: 12px;
}
.related-post-copy .badge { margin-bottom: 10px; }
.related-post-copy h3 {
  margin: 0;
  color: var(--text);
  font-size: .9375rem;
  line-height: 1.3;
  letter-spacing: -.015em;
}
.related-post-card:hover h3 { color: var(--yellow); }
.article-prose .related-post-excerpt {
  flex: 1;
  margin: 10px 0 14px;
  color: var(--muted);
  font-size: var(--fs-helper);
  line-height: 1.5;
}
.related-post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted2);
  font-size: var(--fs-helper);
  line-height: 1.35;
}
.related-post-footer span:last-child { text-align: right; }
.related-post-card:hover .related-post-footer span:last-child { color: var(--yellow); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1080px) {
  .blog-latest {
    grid-template-columns: 1fr;
    grid-template-areas:
      "featured"
      "featured-footer"
      "side"
      "more";
  }
}
@media (max-width: 960px) {
  .posts-grid { grid-template-columns: 1fr; }
  .cat-block-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .int-layout { padding-top: 100px; }
  .article-breadcrumbs { margin-bottom: 16px; }
  .article-tag-row { flex-wrap: nowrap; gap: 8px; margin-bottom: 14px; }
  .reading-label-full { display: none; }
  .reading-label-compact { display: inline; }
  .article-header h1 { font-size: clamp(1.75rem, 7.6vw, 2rem); line-height: 1.1; }
  .article-header,
  .article-hero-wrap {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
  .article-header { padding-bottom: 0; }
  .article-hero-wrap { margin-top: 16px; }
  .article-body-layout { display: block; padding-top: 24px; }
  .itoc { display: none; }
  .iac { padding: 0 0 60px 0; }
  .article-prose { max-width: 700px; padding: 0; }
  .article-table-wrap { width: 100%; }
}
@media (max-width: 640px) {
  .blog-hero { padding-top: 96px; }
  .blog-hero-copy h1 { font-size: var(--fs-display); }
  .posts-grid, .cat-block-grid, .related-posts-grid { grid-template-columns: 1fr; }
  .article-table-wrap table { min-width: 620px; }
  .mini-post-footer { align-items: flex-start; flex-direction: column; }
  .mini-post-meta, .mini-post-cta { white-space: normal; }
}