/* ============================================================
   BLOG (UX-76) — CSS del blog de producción, aislado bajo .bl
   (tokens --bl-*). Botones, hero y buscador usan los componentes
   del rediseño (.btn, .td-hero, .faqp-search).
   ============================================================ */
.bl *::before,
.bl *::after { box-sizing: border-box; margin: 0; padding: 0; }
.bl {
  --bl-color-red:          #ed0100;
  --bl-color-red-dark:     #c50000;
  --bl-color-red-light:    #ff3333;
  --bl-color-red-bg:       #fff5f5;
  --bl-color-black:        #000000;
  --bl-color-gray-900:     #000000;
  --bl-color-gray-800:     #000000;
  --bl-color-gray-700:     #444444;
  --bl-color-gray-600:     #999999;
  --bl-color-gray-500:     #999999;
  --bl-color-gray-400:     #999999;
  --bl-color-gray-300:     #e4e4e4;
  --bl-color-gray-200:     #e4e4e4;
  --bl-color-gray-100:     #eeeeee;
  --bl-color-bg:           #f6f6f6;
  --bl-color-white:        #ffffff;
  --bl-font-display:       var(--font-family-primary);
  --bl-font-body:          var(--font-family-primary);
  --bl-text-xs:    0.75rem;
  --bl-text-sm:    0.875rem;
  --bl-text-base:  1rem;
  --bl-text-md:    1.125rem;
  --bl-text-lg:    1.25rem;
  --bl-text-xl:    1.5rem;
  --bl-text-2xl:   1.875rem;
  --bl-text-3xl:   2.25rem;
  --bl-text-4xl:   3rem;
  --bl-space-1:  0.25rem;
  --bl-space-2:  0.5rem;
  --bl-space-3:  0.75rem;
  --bl-space-4:  1rem;
  --bl-space-5:  1.25rem;
  --bl-space-6:  1.5rem;
  --bl-space-8:  2rem;
  --bl-space-10: 2.5rem;
  --bl-space-12: 3rem;
  --bl-space-16: 4rem;
  --bl-space-20: 5rem;
  --bl-container-max:  1280px;
  --bl-container-pad:  1rem;
  --bl-sidebar-width:  300px;
  --bl-gap-grid:       1.5rem;
  --bl-radius-sm:   4px;
  --bl-radius-md:   8px;
  --bl-radius-lg:   12px;
  --bl-radius-xl:   16px;
  --bl-radius-pill: 999px;
  --bl-shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --bl-shadow-md:  0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --bl-shadow-lg:  0 8px 24px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.07);
  --bl-shadow-red: 0 4px 16px rgba(237,1,0,.25);
  --bl-transition-fast: 150ms ease;
  --bl-transition-base: 250ms ease;
  --bl-transition-slow: 400ms ease;
  --bl-img-aspect-card: 56.67%;
  --bl-img-aspect-hero: 55.55%;
}
.bl {
  font-family: var(--bl-font-body);
  font-size: var(--bl-text-base);
  line-height: 1.65;
  color: var(--bl-color-gray-900);
  background-color: var(--bl-color-bg);
  -webkit-font-smoothing: antialiased;
}
.bl ul,
.bl ol { list-style: none; }
.bl .breadcrumb {
  background: var(--bl-color-white);
  border-bottom: 1px solid var(--bl-color-gray-200);
  padding: var(--bl-space-5) 0 var(--bl-space-4);
  margin-bottom: 0;
}
.bl--article .breadcrumb { padding-top: var(--bl-space-8); }
.bl .breadcrumb__list {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--bl-space-1); font-size: var(--bl-text-sm); color: var(--bl-color-gray-500);
  padding: 0; list-style: none; margin: 0;
}
.bl .breadcrumb__link { color: var(--bl-color-gray-600); transition: color var(--bl-transition-fast); }
.bl .breadcrumb__link:hover { color: var(--bl-color-red); }
.bl .breadcrumb__separator { color: var(--bl-color-gray-300); font-size: var(--bl-text-xs); user-select: none; margin: 0 2px; }
.bl .breadcrumb__item--current { color: var(--bl-color-gray-900); font-weight: 500; }
.bl .category-section {
  background: var(--bl-color-white); padding: var(--bl-space-4) 0;
  border-bottom: 1px solid var(--bl-color-gray-200);
  position: sticky; top: 60px; z-index: 50;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1), box-shadow var(--bl-transition-base);
}
.bl .category-section.is-stuck { box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.bl .category-section.is-hidden { transform: translateY(-100%); }
.bl .category-chips {
  display: flex; gap: var(--bl-space-2);
  overflow-x: auto; padding-bottom: var(--bl-space-1);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.bl .category-chips::-webkit-scrollbar { display: none; }
.bl .category-chip {
  display: inline-flex; align-items: center;
  font-family: var(--bl-font-display); font-weight: 600; font-size: var(--bl-text-sm);
  letter-spacing: .03em; white-space: nowrap; padding: var(--bl-space-2) var(--bl-space-4);
  border-radius: var(--bl-radius-pill); border: 2px solid var(--bl-color-gray-200);
  background: var(--bl-color-white); color: var(--bl-color-gray-600); cursor: pointer;
  transition: background-color var(--bl-transition-fast), color var(--bl-transition-fast),
              border-color var(--bl-transition-fast), transform var(--bl-transition-fast);
  min-height: 36px;
}
.bl .category-chip:hover { border-color: var(--bl-color-red); color: var(--bl-color-red); }
.bl .category-chip--active { background-color: var(--bl-color-red); border-color: var(--bl-color-red); color: var(--bl-color-white); transform: scale(1.02); }
.bl .category-chip--active:hover { background-color: var(--bl-color-red); border-color: var(--bl-color-red); color: var(--bl-color-white); opacity: .88; }
.blog-content-area { padding: var(--bl-space-8) 0 var(--bl-space-12); }
.blog-layout { display: flex; flex-direction: column; gap: var(--bl-space-10); }
.blog-main-col { min-width: 0; }
.blog-sidebar { display: flex; flex-direction: column; gap: var(--bl-space-6); }
.bl .featured-article {
  background: var(--bl-color-white); border-radius: var(--bl-radius-xl);
  overflow: hidden; box-shadow: var(--bl-shadow-md); margin-bottom: var(--bl-space-10);
  transition: box-shadow var(--bl-transition-base), transform var(--bl-transition-base);
  will-change: transform;
}
.bl .featured-article:hover { box-shadow: 0 12px 32px rgba(237,1,0,.10), 0 4px 12px rgba(0,0,0,.08); transform: translateY(-2px); }
.bl .featured-article__media-link { display: block; }
.bl .featured-article__image-wrap { position: relative; overflow: hidden; padding-top: var(--bl-img-aspect-hero); }
.bl .featured-article__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--bl-transition-slow); }
.bl .featured-article__media-link:hover .featured-article__image { transform: scale(1.03); }
.bl .featured-article__badge {
  position: absolute; top: var(--bl-space-4); left: var(--bl-space-4);
  background: var(--bl-color-red); color: var(--bl-color-white);
  font-family: var(--bl-font-display); font-size: var(--bl-text-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: var(--bl-space-1) var(--bl-space-3); border-radius: var(--bl-radius-sm);
}
.bl .featured-article__body { padding: var(--bl-space-6); }
.bl .featured-article__title {
  font-family: var(--bl-font-display); font-size: var(--bl-text-lg); font-weight: 800;
  line-height: 1.25; color: var(--bl-color-gray-900); margin: var(--bl-space-3) 0; letter-spacing: -.01em;
}
.bl .featured-article__title a { transition: color var(--bl-transition-fast); }
.bl .featured-article__title a:hover { color: var(--bl-color-red); }
.bl .featured-article__excerpt { font-size: var(--bl-text-base); color: #666666; line-height: 1.6; margin-bottom: var(--bl-space-5); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bl .article-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--bl-space-2) var(--bl-space-4); font-size: var(--bl-text-sm); color: var(--bl-color-gray-500); row-gap: var(--bl-space-2);
}
.bl .article-meta--sm { font-size: var(--bl-text-xs); gap: var(--bl-space-2); margin-bottom: var(--bl-space-2); }
.bl .article-meta__category {
  font-family: var(--bl-font-display); font-size: var(--bl-text-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bl-color-red);
  background: none; padding: 0; border-radius: 0; transition: color var(--bl-transition-fast);
}
.bl .article-meta__category:hover { color: #000000; }
.bl .article-meta__date,
.bl .article-meta__read-time { display: inline-flex; align-items: center; gap: 4px; color: #666666; font-size: 15px; }
.bl .article-meta__read-time svg { flex-shrink: 0; }
.bl .article-grid { display: grid; grid-template-columns: 1fr; gap: var(--bl-space-6); }
.bl .article-card {
  background: var(--bl-color-white); border-radius: var(--bl-radius-lg);
  overflow: hidden; box-shadow: var(--bl-shadow-sm);
  transition: box-shadow var(--bl-transition-base), transform var(--bl-transition-base);
  display: flex; flex-direction: column; position: relative; will-change: transform;
  animation: fadeInUp 0.4s ease both;
}
.bl .article-card:hover { box-shadow: var(--bl-shadow-md); transform: translateY(-3px); }
.bl .article-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--bl-color-red); border-radius: var(--bl-radius-lg) var(--bl-radius-lg) 0 0;
  transform: scaleX(0); transform-origin: left; transition: transform var(--bl-transition-base);
}
.bl .article-card:hover::before { transform: scaleX(1); }
.bl .article-card:nth-child(1) { animation-delay: 0ms; }
.bl .article-card:nth-child(2) { animation-delay: 60ms; }
.bl .article-card:nth-child(3) { animation-delay: 120ms; }
.bl .article-card:nth-child(4) { animation-delay: 180ms; }
.bl .article-card:nth-child(5) { animation-delay: 240ms; }
.bl .article-card:nth-child(6) { animation-delay: 300ms; }
.bl .article-card:nth-child(7) { animation-delay: 360ms; }
.bl .article-card__media-link { display: block; overflow: hidden; }
.bl .article-card__image-wrap { position: relative; overflow: hidden; aspect-ratio: 16 / 9; }
.bl .article-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bl-transition-slow); display: block; }
.bl .article-card:hover .article-card__image { transform: scale(1.035); }
.bl .article-card__body { padding: var(--bl-space-5); display: flex; flex-direction: column; flex: 1; }
.bl .article-card__title {
  font-family: var(--bl-font-display); font-size: var(--bl-text-lg); font-weight: 700;
  line-height: 1.25; color: var(--bl-color-gray-900); margin-bottom: var(--bl-space-2); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bl .article-card__title a,
.bl .featured-article__title a {
  color: inherit;
  background-image: linear-gradient(var(--bl-color-red), var(--bl-color-red));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
  transition: background-size var(--bl-transition-base), color var(--bl-transition-fast);
  text-decoration: none;
}
.bl .article-card__title a:hover,
.bl .featured-article__title a:hover { background-size: 100% 2px; }
.bl .article-card__title a:hover { color: var(--bl-color-red); }
.bl .article-card__excerpt {
  font-size: var(--bl-text-sm); color: #666666; line-height: 1.5; margin-bottom: var(--bl-space-4);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bl .article-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: var(--bl-space-4); border-top: 1px solid var(--bl-color-gray-100);
}
.bl .articles-section__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--bl-space-6); gap: var(--bl-space-4);
}
.bl .articles-section__title { font-family: var(--bl-font-display); font-size: var(--bl-text-xl); font-weight: 800; color: var(--bl-color-gray-900); }
.bl .articles-section__count { font-size: var(--bl-text-sm); color: var(--bl-color-gray-500); white-space: nowrap; }
.bl .empty-state {
  text-align: center; padding: var(--bl-space-16) var(--bl-space-8);
  color: var(--bl-color-gray-500); background: var(--bl-color-white);
  border-radius: var(--bl-radius-xl); border: 2px dashed var(--bl-color-gray-200);
}
.bl .empty-state__icon { display: flex; justify-content: center; margin-bottom: var(--bl-space-4); color: var(--bl-color-gray-300); }
.bl .empty-state__title { font-family: var(--bl-font-display); font-size: var(--bl-text-xl); font-weight: 700; color: var(--bl-color-gray-700); margin-bottom: var(--bl-space-2); }
.bl .empty-state__desc { font-size: 14px; color: var(--bl-color-gray-500); margin-bottom: var(--bl-space-6); max-width: 400px; margin-inline: auto; line-height: 1.6; }
.bl .pagination { display: flex; justify-content: center; margin-top: var(--bl-space-10); }
.bl .sidebar-widget { background: var(--bl-color-white); border-radius: var(--bl-radius-lg); padding: var(--bl-space-6); box-shadow: var(--bl-shadow-sm); }
.bl .sidebar-widget__title {
  font-family: var(--bl-font-display); font-size: var(--bl-text-sm); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bl-color-gray-700);
  margin-bottom: var(--bl-space-5); display: flex; align-items: center; gap: var(--bl-space-2);
  padding-bottom: var(--bl-space-3); border-bottom: 2px solid var(--bl-color-gray-100);
}
.bl .sidebar-cta {
  background: var(--bl-color-gray-900); border-radius: var(--bl-radius-lg);
  padding: var(--bl-space-6); color: var(--bl-color-white); border-top: 3px solid var(--bl-color-red);
}
.bl .sidebar-cta__eyebrow { font-family: var(--bl-font-display); font-size: var(--bl-text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bl-color-red-light); margin-bottom: var(--bl-space-2); }
.bl .sidebar-cta__title { font-family: var(--bl-font-display); font-size: 22px; font-weight: 800; color: var(--bl-color-white); margin-bottom: var(--bl-space-2); line-height: 1.2; }
.bl .sidebar-cta__desc { font-size: var(--bl-text-sm); color: var(--bl-color-gray-400); margin-bottom: var(--bl-space-5); line-height: 1.5; }
.bl .popular-list { display: flex; flex-direction: column; gap: 0; }
.bl .popular-list__item { border-bottom: 1px solid var(--bl-color-gray-100); }
.bl .popular-list__item:last-child { border-bottom: none; }
.bl .popular-list__link { display: flex; align-items: flex-start; gap: var(--bl-space-3); padding: var(--bl-space-3) 0; transition: color var(--bl-transition-fast); }
.bl .popular-list__link:hover .popular-list__text { color: var(--bl-color-red); }
.bl .popular-list__link:hover .popular-list__num { color: var(--bl-color-red); }
.bl .popular-list__num { font-family: var(--bl-font-display); font-size: var(--bl-text-xl); font-weight: 800; color: #666666; line-height: 1; flex-shrink: 0; width: 2rem; }
.bl .popular-list__text { font-size: var(--bl-text-sm); color: var(--bl-color-gray-700); line-height: 1.4; transition: color var(--bl-transition-fast); }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.bl .article-card,
.bl .featured-article__image,
.bl .article-card__image { animation: none; transition: none; }
}
@media (min-width: 640px) {
.bl { --bl-container-pad: 1.5rem; }
.bl .article-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.bl { --bl-container-pad: 2rem; }
.blog-layout { flex-direction: row; align-items: flex-start; gap: var(--bl-space-10); }
.blog-main-col { flex: 1; min-width: 0; }
.blog-sidebar {
    width: var(--bl-sidebar-width); flex-shrink: 0;
    position: sticky;
    top: calc(var(--bl-header-height, 90px) + 72px + 24px);
    max-height: calc(100vh - var(--bl-header-height, 90px) - 110px);
    overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bl-color-gray-200) transparent;
    padding-bottom: var(--bl-space-8);
  }
.blog-sidebar::-webkit-scrollbar { width: 4px; }
.blog-sidebar::-webkit-scrollbar-thumb { background: var(--bl-color-gray-200); border-radius: var(--bl-radius-pill); }
.bl .article-grid { grid-template-columns: repeat(2, 1fr); }
.bl .featured-article { display: flex; flex-direction: row; }
.bl .featured-article__media-link { flex: 0 0 55%; overflow: hidden; }
.bl .featured-article__image-wrap { padding-top: 0; height: 100%; min-height: 300px; }
.bl .featured-article__body { flex: 1; padding: var(--bl-space-8); display: flex; flex-direction: column; justify-content: center; }
.bl .featured-article__title { font-size: var(--bl-text-xl); }
}
@media (min-width: 1200px) {
.bl .category-section { top: var(--bl-header-height, 90px); }
}
@media (min-width: 1280px) {
.bl { --bl-sidebar-width: 320px; }
}
@media print {
.bl .category-section,
.blog-sidebar,
.blog-cta-strip { display: none !important; }
}
.bl--article .blog-main { background: var(--bl-color-bg); min-height: 60vh; }
.bl .article-layout { padding: var(--bl-space-8) 0 var(--bl-space-16); }
.bl .article-wrapper { display: flex; flex-direction: column; gap: var(--bl-space-8); }
.bl .article-detail {
  min-width: 0; background: var(--bl-color-white);
  border-radius: var(--bl-radius-lg); overflow: hidden; box-shadow: var(--bl-shadow-sm);
}
.bl .article-detail__hero-figure {
  margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bl-color-gray-100);
}
.bl .article-detail__hero-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl .article-detail__header { padding: var(--bl-space-6); padding-bottom: 0; }
.bl .article-meta--detail { margin-bottom: var(--bl-space-3); }
.bl .article-detail__title {
  font-family: var(--bl-font-display); font-size: var(--bl-text-2xl); font-weight: 800;
  line-height: 1.15; color: var(--bl-color-gray-900);
  margin-bottom: var(--bl-space-4); letter-spacing: -0.02em;
}
.bl .article-detail__divider {
  border: none; border-top: 1px solid var(--bl-color-gray-200); margin: 0 0 var(--bl-space-4);
}
.bl .article-meta--secondary {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--bl-space-1) var(--bl-space-3); font-size: var(--bl-text-sm); color: #666666;
  margin-bottom: var(--bl-space-5);
}
.bl .article-meta__sep { color: var(--bl-color-gray-300); user-select: none; }
.bl .article-meta__author { display: inline-flex; align-items: center; gap: 4px; }
.bl .article-detail__excerpt {
  font-size: var(--bl-text-md); color: #555555; line-height: 1.6;
  margin-bottom: var(--bl-space-5);
}
.bl .share-block { display: flex; align-items: center; gap: var(--bl-space-3); margin-bottom: var(--bl-space-5); }
.bl .share-block__label {
  font-family: var(--bl-font-display); font-size: var(--bl-text-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bl-color-gray-600);
}
.bl .share-block__actions { display: flex; align-items: center; gap: var(--bl-space-2); }
.bl .share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  transition: transform var(--bl-transition-fast), opacity var(--bl-transition-fast);
  text-decoration: none; flex-shrink: 0; padding: 0; background: transparent;
}
.bl .share-btn:hover { transform: scale(1.1); }
.bl .share-btn--facebook { color: #E31837 !important; }
.bl .share-btn--facebook svg path:first-child { fill: #E31837; }
.bl .share-btn--facebook:hover { color: #000 !important; }
.bl .share-btn--facebook:hover svg path:first-child { fill: #000; }
.bl .share-btn--whatsapp { color: #E31837 !important; }
.bl .share-btn--whatsapp svg { fill: #E31837; }
.bl .share-btn--whatsapp:hover { color: #000 !important; }
.bl .share-btn--whatsapp:hover svg { fill: #000; }
.bl .share-btn--copy { background: transparent; color: #E31837 !important; }
.bl .share-btn--copy svg { fill: #E31837; }
.bl .share-btn--copy:hover { background: transparent; color: #000 !important; transform: scale(1.1); }
.bl .share-btn--copy:hover svg { fill: #000; }
.bl .share-btn__text { display: none; }
.bl .toc {
  margin: 0 var(--bl-space-6) var(--bl-space-6);
  border: 1px solid var(--bl-color-gray-200); border-radius: var(--bl-radius-md); overflow: hidden;
}
.bl .toc__toggle {
  width: 100%; display: flex; align-items: center; gap: var(--bl-space-2);
  padding: var(--bl-space-4) var(--bl-space-5); background: var(--bl-color-gray-100); border: none;
  font-family: var(--bl-font-display); font-size: var(--bl-text-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bl-color-gray-700);
  cursor: pointer; text-align: left;
}
.bl .toc__chevron { margin-left: auto; transition: transform var(--bl-transition-fast); }
.bl .toc__toggle[aria-expanded="false"] .toc__chevron { transform: rotate(-90deg); }
.bl .toc__list { padding: var(--bl-space-3) var(--bl-space-5); list-style: none; }
.bl .toc__link {
  display: block; padding: var(--bl-space-2) 0; font-size: var(--bl-text-sm); color: #555555;
  border-bottom: 1px solid var(--bl-color-gray-100); transition: color var(--bl-transition-fast); text-decoration: none;
}
.bl .toc__list li:last-child .toc__link { border-bottom: none; }
.bl .toc__link:hover { color: var(--bl-color-red); }
.bl .article-body {
  padding: var(--bl-space-6) var(--bl-space-6) var(--bl-space-8);
  color: var(--bl-color-gray-900); font-size: var(--bl-text-base); line-height: 1.75;
}
.bl .article-body > *:first-child { margin-top: 0 !important; }
.bl .article-body h2 {
  font-family: var(--bl-font-display); font-size: var(--bl-text-xl); font-weight: 700;
  color: var(--bl-color-gray-900);
  margin-top: var(--bl-space-10); margin-bottom: var(--bl-space-4);
  padding-bottom: var(--bl-space-2); border-bottom: 1px solid var(--bl-color-gray-200);
  scroll-margin-top: 120px;
}
.bl .article-body h3 {
  font-family: var(--bl-font-display); font-size: var(--bl-text-lg); font-weight: 700;
  color: var(--bl-color-gray-900);
  margin-top: var(--bl-space-8); margin-bottom: var(--bl-space-3); scroll-margin-top: 120px;
}
.bl .article-body h4 {
  font-family: var(--bl-font-display); font-size: var(--bl-text-md); font-weight: 700;
  margin-top: var(--bl-space-6); margin-bottom: var(--bl-space-2);
}
.bl .article-body p { margin-bottom: var(--bl-space-4); }
.bl .article-body ul { padding-left: var(--bl-space-6); margin-bottom: var(--bl-space-4); list-style: disc; }
.bl .article-body ol { padding-left: var(--bl-space-6); margin-bottom: var(--bl-space-4); list-style: decimal; }
.bl .article-body li { margin-bottom: var(--bl-space-2); line-height: 1.65; }
.bl .article-body a { color: var(--bl-color-red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--bl-transition-fast); }
.bl .article-body a:hover { color: var(--bl-color-red-dark); }
.bl .article-body strong,
.bl .article-body b { font-weight: 700; }
.bl .article-body em,
.bl .article-body i { font-style: italic; }
.bl .article-body blockquote {
  margin: var(--bl-space-4) 0;
}
.bl .article-body table { width: 100%; border-collapse: collapse; margin-bottom: var(--bl-space-6); font-size: var(--bl-text-sm); }
.bl .article-body th { background: var(--bl-color-gray-100); font-weight: 700; text-align: left; padding: var(--bl-space-3) var(--bl-space-4); border: 1px solid var(--bl-color-gray-200); }
.bl .article-body td { padding: var(--bl-space-3) var(--bl-space-4); border: 1px solid var(--bl-color-gray-200); }
.bl .article-body tr:nth-child(even) { background: var(--bl-color-gray-100); }
.bl .article-figure { margin: var(--bl-space-6) 0; }
.bl .article-figure__image { width: 100%; height: auto; border-radius: var(--bl-radius-md); display: block; }
.bl .article-blockquote {
  border-left: 3px solid var(--bl-color-red);
  background: rgba(198, 12, 48, 0.06);
  padding: var(--bl-space-3) var(--bl-space-5);
  margin: var(--bl-space-6) 0;
  font-style: italic;
  color: var(--bl-color-gray-700);
  font-size: var(--bl-text-md);
  line-height: 1.7;
}
.bl .inline-cta {
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--bl-space-4); border-radius: var(--bl-radius-md);
  padding: var(--bl-space-5) var(--bl-space-6); margin: var(--bl-space-6) 0;
}
.bl .inline-cta__icon { flex-shrink: 0; line-height: 0; }
.bl .inline-cta__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--bl-space-1); }
.bl .inline-cta__title { font-family: var(--bl-font-display); font-size: var(--bl-text-md); font-weight: 700; line-height: 1.3; }
.bl .inline-cta__desc { font-size: var(--bl-text-sm); line-height: 1.5; opacity: .9; }
.bl .inline-cta--test-drive { background: var(--bl-color-red); color: var(--bl-color-white); }
.bl .inline-cta--service { background: #111111; color: var(--bl-color-white); border-left: 4px solid var(--bl-color-red); }
.bl .inline-cta--service .inline-cta__icon { color: var(--bl-color-red); }
.bl .inline-cta--cotizar { background: var(--bl-color-white); border: 1px solid var(--bl-color-gray-200); border-left: 4px solid var(--bl-color-red); color: var(--bl-color-gray-900); box-shadow: var(--bl-shadow-sm); }
.bl .inline-cta--cotizar .inline-cta__icon { color: var(--bl-color-red); }
.bl .inline-cta--modelos { background: #111111; color: var(--bl-color-white); border-left: 4px solid var(--bl-color-red); }
.bl .inline-cta--modelos .inline-cta__icon { color: var(--bl-color-red); }
.bl .inline-cta--default { background: var(--bl-color-gray-100); border-left: 4px solid var(--bl-color-red); color: var(--bl-color-gray-900); }
.bl .inline-cta--default .inline-cta__icon { color: var(--bl-color-red); }
.bl .article-sidebar { display: flex; flex-direction: column; gap: var(--bl-space-4); }
.bl .sidebar-toc { display: none; }
.bl .sidebar-toc-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 var(--bl-space-3); background: none; border: none;
  border-bottom: 2px solid var(--bl-color-gray-100); margin-bottom: var(--bl-space-3);
  font-family: var(--bl-font-display); font-size: var(--bl-text-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bl-color-gray-700); cursor: pointer;
}
.bl .sidebar-toc-toggle svg { transition: transform var(--bl-transition-fast); flex-shrink: 0; }
.bl .sidebar-toc-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.bl .toc-sidebar-list { list-style: none; padding: 0; counter-reset: toc-counter; }
.bl .toc-sidebar-list > li { counter-increment: toc-counter; border-bottom: 1px solid var(--bl-color-gray-100); }
.bl .toc-sidebar-list > li:last-child { border-bottom: none; }
.bl .toc-sidebar-link {
  display: flex; align-items: baseline; gap: var(--bl-space-3);
  padding: var(--bl-space-3) 0; font-size: var(--bl-text-sm); color: #555555;
  transition: color var(--bl-transition-fast); text-decoration: none; line-height: 1.4;
}
.bl .toc-sidebar-link::before {
  content: counter(toc-counter, decimal-leading-zero);
  font-family: var(--bl-font-display); font-size: var(--bl-text-lg); font-weight: 700;
  color: #aaaaaa; flex-shrink: 0; min-width: 2.4rem;
  transition: color var(--bl-transition-fast);
}
.bl .toc-sidebar-link:hover { color: var(--bl-color-red); }
.bl .toc-sidebar-link:hover::before { color: var(--bl-color-red); }
.bl .toc-sidebar-link.is-active { color: var(--bl-color-red); font-weight: 600; }
.bl .toc-sidebar-link.is-active::before { color: var(--bl-color-red); }
.bl .sidebar-share__label {
  display: block; font-family: var(--bl-font-display); font-size: var(--bl-text-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bl-color-gray-600); margin-bottom: var(--bl-space-4);
}
.bl .sidebar-share__btns { display: flex; align-items: center; gap: var(--bl-space-3); }
.bl .related-articles {
  background: var(--bl-color-white); border-top: 1px solid var(--bl-color-gray-200);
  padding: var(--bl-space-10) 0 var(--bl-space-12);
}
.bl .related-articles__header { margin-bottom: var(--bl-space-8); }
.bl .related-articles__title {
  font-family: var(--bl-font-display); font-size: var(--bl-text-2xl); font-weight: 800; color: var(--bl-color-gray-900);
}
.bl .related-carousel { display: grid; grid-template-columns: 1fr; gap: var(--bl-space-6); }
.bl .carousel-dots {
  display: flex; justify-content: center; align-items: center; gap: var(--bl-space-2); margin-top: var(--bl-space-6);
}
.bl .carousel-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--bl-color-gray-200);
  border: none; cursor: pointer; padding: 0;
  transition: background-color var(--bl-transition-fast), transform var(--bl-transition-fast);
}
.bl .carousel-dot--active { background: var(--bl-color-red); transform: scale(1.3); }
@media (min-width: 640px) {
.bl .article-detail__title { font-size: var(--bl-text-3xl); }
.bl .related-carousel { grid-template-columns: repeat(2, 1fr); }
.bl .inline-cta { flex-direction: row; align-items: center; }
}
@media (min-width: 1024px) {
.bl .article-wrapper { flex-direction: row; align-items: flex-start; gap: var(--bl-space-8); }
.bl .article-detail { flex: 1; min-width: 0; }
.bl .article-sidebar {
    width: var(--bl-sidebar-width); flex-shrink: 0;
    position: sticky; top: calc(var(--bl-header-height, 90px) + 24px);
    max-height: calc(100vh - var(--bl-header-height, 90px) - 48px);
    overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bl-color-gray-200) transparent;
    padding-bottom: var(--bl-space-6);
  }
.bl .article-sidebar::-webkit-scrollbar { width: 4px; }
.bl .article-sidebar::-webkit-scrollbar-thumb { background: var(--bl-color-gray-200); border-radius: var(--bl-radius-pill); }
.bl .toc { display: none; }
.bl .sidebar-toc { display: block; }
.bl .share-block--header { display: none; }
.bl .article-detail__title { font-size: var(--bl-text-2xl); }
.bl .related-carousel { grid-template-columns: repeat(3, 1fr); }
.bl .carousel-dots { display: none; }
}
@media (min-width: 1280px) {
.bl .article-sidebar { width: 320px; }
.bl .article-detail__title { font-size: var(--bl-text-3xl); }
}

/* ── Ajustes de integración con el rediseño ── */


/* Buscador (faqp-search): el tache se muestra/oculta con [hidden] desde blog.js */
.bl-finder .faqp-search__clear[hidden] { display: none; }
.bl-finder .faqp-search { margin: 0; }

/* CTAs del sidebar a todo lo ancho, con el botón del rediseño */
.bl .sidebar-cta__btn,
.bl .sidebar-cta__btn-sec { width: 100%; }
.bl .sidebar-cta__btn + .sidebar-cta__btn-sec { margin-top: var(--space-2); }

/* CTA dentro de la nota: botón del rediseño, sin encogerse */
.bl .inline-cta__btn { flex-shrink: 0; white-space: nowrap; }

/* El fondo gris de .bl no debe tapar la imagen del td-hero (z-index:-1) */
main.bl { isolation: isolate; }

/* Categorías: sin franja blanca ni sticky; viven sobre el gris del blog */
.bl .category-section,
.bl .category-section.is-stuck,
.bl .category-section.is-hidden {
  position: static;
  transform: none;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  padding: 20px 0 0;              /* 20px bajo el buscador */
}
.bl .category-chips { padding-bottom: 0; }
/* Sin línea divisoria bajo el buscador; 40px de los tabs a las notas */
.bl .bl-finder { border-bottom: 0; padding-bottom: 0; }
.bl .blog-content-area { padding-top: 40px; }
.bl .category-chip {
  padding: 6px 14px;
  font-size: 13px;
  border-width: 1px;
}

/* Notas: el contenido arranca debajo del header fijo */
main.bl--article { padding-top: var(--header-height-mobile); }
@media (min-width: 1200px) {
  main.bl--article { padding-top: var(--header-height-desktop); }
}

/* Los enlaces del cuerpo son rojos/subrayados: el botón conserva su estilo */
.bl .article-body a.btn { text-decoration: none; }
.bl .article-body a.btn--primary,
.bl .article-body a.btn--primary:hover { color: #fff; }

/* Tablas comparativas: en mobile se desplazan a lo ancho en vez de cortarse */
@media (max-width: 767px) {
  .bl .article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bl .article-body th, .bl .article-body td { min-width: 120px; }
}

/* Fondo oscuro (como en el resto del sitio): el CTA principal hace hover a blanco + texto negro */
.bl .sidebar-cta .btn--primary::before,
.bl .inline-cta--service .btn--primary::before,
.bl .inline-cta--modelos .btn--primary::before { background: #FFFFFF; }
@media (hover: hover) {
  .bl .sidebar-cta .btn--primary:hover,
  .bl .inline-cta--service .btn--primary:hover,
  .bl .inline-cta--modelos .btn--primary:hover {
    background-color: transparent; border-color: #FFFFFF; color: #000000; box-shadow: none;
  }
}

/* El chip activo no se escala: dentro del carril con scroll se cortaban sus orillas */
.bl .category-chip--active,
.bl .category-chip--active:hover { transform: none; }

/* Breadcrumb de la nota: el separador ya viene en el HTML; anula el "/" global de layout.css */
.bl .breadcrumb__item::after { content: none; }

/* Mobile: CTA del artículo destacado a todo lo ancho */
@media (max-width: 767px) {
  .bl .featured-article__body .btn { width: 100%; }
}

/* Artículos relacionados: carrusel con swipe hasta tablet (en producción salían apilados).
   Pager con el mismo componente del sitio (10px, gris → rojo, como .mdl-specs-pager) */
@media (max-width: 1023px) {
  .bl .related-carousel {
    display: flex; gap: var(--space-4);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: 0; padding: 4px 0 8px;   /* alineado al contenido; la siguiente card asoma */
  }
  .bl .related-carousel::-webkit-scrollbar { display: none; }
  .bl .related-card { flex: 0 0 85%; scroll-snap-align: start; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .bl .related-card { flex-basis: calc(50% - var(--space-2)); }
}
.bl .carousel-dots { gap: 8px; margin-top: var(--space-5, 20px); }
.bl .carousel-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--border-subtle); transform: none;
  transition: background var(--duration-base) var(--ease-default);
}
.bl .carousel-dot--active { background: var(--color-red); transform: none; }