/* =========================================================
   EXCELPBI — Estilos del BLOG (portados de abitic.com)
   Requiere recursos.css (tokens --site-* y filtros/buscador).
   ========================================================= */
.blog-post-container {
  max-width: var(--site-content-width);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.blog-post-bg-light { background: var(--site-gris-claro); padding: 40px 0 32px; }
.blog-post-bg-light h1 { margin: 0; font-size: var(--fs-2xl); }
.blog-breadcrumb { font-size: var(--fs-sm); color: var(--site-gris-texto); margin-bottom: 20px; }
.blog-breadcrumb a { color: var(--site-azul-marino); text-decoration: none; }
.blog-breadcrumb a:hover { text-decoration: underline; }
.blog-post-excerpt {
  border-left: 4px solid var(--site-azul-marino);
  padding-left: 16px;
  margin-top: 12px;
  color: var(--site-gris-texto);
  font-size: var(--fs-base);
  max-width: 760px;
}
.blog-post-body { max-width: 760px; margin: 40px auto; }
.blog-post-body p { margin-bottom: 16px; line-height: 1.6; }
.blog-post-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--site-borde);
}
.blog-post-meta { font-size: var(--fs-sm); color: #888; margin: 0; }
.blog-share-buttons { display: flex; align-items: center; gap: 10px; }
.blog-share-buttons span { font-size: var(--fs-sm); color: var(--site-gris-texto); margin-right: 4px; }
@media (max-width: 700px) {
.blog-post-bg-light { padding: 32px 0 24px; }
.blog-post-body { margin-top: 20px; }
.blog-post-meta-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}
a.blog-share-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--site-blanco) !important;
  transition: opacity 0.2s ease;
}
.blog-share-icon i { color: var(--site-blanco) !important; }
.blog-share-icon:hover { opacity: 0.85; }
.blog-share-linkedin { background: #0a66c2; }
.blog-share-facebook { background: #1877f2; }
.blog-share-whatsapp { background: #25d366; }
.blog-post-body img.blog-featured-image {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 20px;
  border-radius: var(--site-radius);
  display: block;
}
.blog-video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom: 20px;
  border-radius: var(--site-radius);
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.blog-video-embed iframe, .blog-video-embed img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
  object-fit: cover;
}
.blog-video-embed .blog-video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 48px;
  background: rgba(0,0,0,0.75);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  pointer-events: none;
}
.blog-video-embed:hover .blog-video-play-btn { background: #ff0000; }
.blog-video-embed .blog-video-play-btn svg { fill: #fff; width: 24px; height: 24px; }
.blog-tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.blog-tag-list a { text-decoration: none; }
.blog-tag-list span {
  background: var(--site-gris-claro);
  color: var(--site-azul-marino);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: var(--fs-xs);
  font-weight: 600;
  display: inline-block;
  transition: background 0.2s ease, color 0.2s ease;
}
.blog-tag-list a:hover span { background: var(--site-azul-marino); color: var(--site-blanco); }
.blog-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 880px) {
.blog-layout { grid-template-columns: 1fr; }
}
.blog-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 32px; }
.blog-pager-item {
  min-width: 42px;
  height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--site-borde);
  border-radius: 999px;
  background: var(--site-blanco);
  color: var(--site-azul-marino);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
a.blog-pager-item:hover { background: var(--site-azul-marino); border-color: var(--site-azul-marino); color: #fff; }
.blog-pager-item.is-current { background: var(--site-azul-marino); border-color: var(--site-azul-marino); color: #fff; }
.blog-pager-item.is-disabled { opacity: 0.4; }
.blog-pager-item.is-gap { border: none; background: none; min-width: 20px; padding: 0; }
@media (max-width: 480px) {
.blog-pager-item { min-width: 38px; height: 38px; padding: 0 12px; }
}
.blog-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card {display:flex;flex-direction:column;background:#fff;border:1px solid var(--site-borde);border-radius:var(--site-radius);overflow:hidden;transition:box-shadow .25s ease,transform .25s ease}
.blog-card:hover {box-shadow:0 10px 26px rgba(0,51,102,.12);transform:translateY(-2px)}
.blog-card-media {position:relative;display:block}
.blog-card-media img {display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.blog-card-video {position:absolute;left:12px;bottom:12px;padding:4px 10px;border-radius:999px;background:rgba(0,34,68,.82);color:#fff;font-size:var(--fs-xs);font-weight:700}
.blog-card-video i {margin-right:4px}
.blog-card-body {display:flex;flex-direction:column;gap:8px;padding:16px 20px 20px;flex:1}
.blog-card-body h3 {margin:0;font-size:1.05rem;line-height:1.35}
.blog-card-body h3 a {color:var(--site-azul-marino)}
.blog-card-body p {margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--site-gris-texto)}
.blog-card-body .read-more {margin-top:auto;padding-top:4px}
.blog-card[hidden], .blog-tagchip[hidden], .blog-more[hidden] {display:none!important}
.blog-more {text-align:center;margin-top:30px}
.blog-tagchip {display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:6px 8px 6px 14px;border-radius:999px;background:var(--site-azul-marino);color:#fff;font-size:var(--fs-sm)}
.blog-tagchip button {border:0;background:rgba(255,255,255,.2);color:#fff;border-radius:999px;width:24px;height:24px;cursor:pointer}
@media(max-width:900px) {
.blog-grid {grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px) {
.blog-grid {grid-template-columns:1fr}
}
.blog-post-body h2 { font-size: 1.35rem; color: var(--site-azul-marino); margin: 32px 0 12px; line-height: 1.3; text-align: left; }
.blog-post-body h3 { text-align: left; }
.blog-post-body ul { margin: 0 0 18px; padding-left: 22px; }
.blog-post-body li { margin-bottom: 8px; line-height: 1.6; }
.blog-post-body a:not(.blog-share-icon):not([href*="?tag="]) { color: var(--site-azul-acento); text-decoration: underline; }
.res-type--ia { background: #f0ebfb; color: #6b3fb5; }
.blog-post-body .blog-photo-credit { margin: -8px 0 22px; font-size: var(--fs-xs); color: var(--site-gris-texto); text-align: right; }
.blog-post-body .blog-photo-credit a { color: inherit; text-decoration: none; }
.blog-post-body ol { margin: 0 0 18px; padding-left: 22px; }
.blog-post-body figure.blog-inline-figure { margin: 8px 0 24px; }
.blog-post-body figure.blog-inline-figure img { width: 100%; max-width: 620px; display: block; margin: 0 auto; border-radius: var(--site-radius); }
.blog-post-body .blog-table-wrap { margin: 8px 0 24px; overflow-x: auto; }
.blog-post-body .blog-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.blog-post-body .blog-table th { background: var(--site-azul-marino); color: #fff; text-align: left; padding: 10px 14px; font-weight: 600; }
.blog-post-body .blog-table td { padding: 10px 14px; vertical-align: top; border-bottom: 1px solid #e3e8ee; line-height: 1.5; }
.blog-post-body .blog-table tbody tr:nth-child(even) td { background: #f4f6f8; }
@media (max-width: 640px) {
.blog-post-body .blog-table thead { display: none; }
.blog-post-body .blog-table, .blog-post-body .blog-table tbody, .blog-post-body .blog-table tr, .blog-post-body .blog-table td { display: block; width: 100%; }
.blog-post-body .blog-table tr { border: 1px solid #e3e8ee; border-radius: var(--site-radius); margin-bottom: 12px; overflow: hidden; }
.blog-post-body .blog-table td { border-bottom: 0; padding: 8px 14px; }
.blog-post-body .blog-table td::before { content: attr(data-label); display: block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--site-gris-oscuro); }
.blog-post-body .blog-table tbody tr:nth-child(even) td { background: transparent; }
.blog-post-body .blog-table tr td:first-child { background: #f4f6f8; }
}
.blog-post-body .blog-prompt { margin: 4px 0 20px; padding: 14px 18px; background: #eaf3ff; border-left: 4px solid var(--site-azul-acento); border-radius: 0 var(--site-radius) var(--site-radius) 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--site-azul-marino); }

/* Compatibilidad con la hoja base de EXCELPBI (las imágenes llevan width/height en el HTML) */
.blog-post-body img { height: auto; }
.blog-post-body img.blog-featured-image { height: auto; }
.blog-card-body .read-more { color: var(--site-azul-acento); font-weight: 600; font-size: var(--fs-md); }
.blog-card-body .read-more:hover { color: var(--site-azul-marino); }