/* Blog redesign · Summum Marketing · 2026-07-17 */
/* Rediseno del blog (portada /articulos/ + single de post). Adaptado del
   prototipo aprobado. Prefijo .bs-  ·  tokens como variables  ·  media queries
   reales.  SCOPE: todas las reglas de base se acotan bajo el contenedor
   .bs-blog (lo pone la plantilla en el <main>) y ninguna toca el header ni el
   footer ni el wordmark del tema, que se CONSERVAN intactos (header.php,
   footer.php). Por eso aqui NO va nada de .bs-header/.bs-burger/.bs-mobile-menu/
   .bs-wordmark/.bs-footer del prototipo: eran el chrome de la maqueta y en
   produccion los sirve el tema.  Las fuentes se cargan aparte (blog-fonts.css). */

/* ============================================================
   1 · TOKENS  (variables: no aplican estilo hasta referenciarse)
   ============================================================ */
:root{
  --bs-papel:            #FAF8F4;
  --bs-tarjeta:          #FFFFFF;
  --bs-tinta:            #181310;
  --bs-texto-cuerpo:     #2A241E;
  --bs-gris-1:           #57504A;
  --bs-gris-2:           #6F675E;
  --bs-gris-3:           #9A9082;
  --bs-linea:            #E4DED4;
  --bs-linea-suave:      #EFEAE1;
  --bs-oscuro:           #161210;
  --bs-crema:            #F4EEE4;
  --bs-crema-2:          #B5AB9D;
  --bs-crema-3:          #8F857A;
  --bs-naranja:          #FF5E1A;
  --bs-naranja-oscuro:   #FF7A42;
  --bs-dorado:           #FFB800;
  --bs-nav-link:         #3A332C;

  --bs-serif:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --bs-sans:     'Archivo', system-ui, -apple-system, sans-serif;
  --bs-mono:     'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --bs-radio:      2px;
  --bs-container:  1320px;
  --bs-pad:        40px;

  --bs-sombra-hover: 0 14px 28px -18px rgba(24,19,16,.3);
  --bs-textura: repeating-linear-gradient(-45deg, rgba(244,238,228,.04) 0 1px, transparent 1px 14px);
}

/* ============================================================
   2 · BASE ACOTADA  (solo dentro de .bs-blog; jamas toca header/footer)
   ============================================================ */
.bs-blog *,.bs-blog *::before,.bs-blog *::after{ box-sizing:border-box; }
.bs-blog{
  color:var(--bs-tinta);
  font-family:var(--bs-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Fondo papel SOLO en las paginas del blog (lo marca la clase de body que pone
   inc/blog-redesign.php). No redefine el <body> global del tema. */
body.bs-blog-page{ background:var(--bs-papel); }
.bs-blog a{ color:var(--bs-tinta); text-decoration:none; }
.bs-blog a:hover{ color:var(--bs-naranja); }
.bs-blog img{ max-width:100%; }
.bs-blog table{ border-collapse:collapse; }
.bs-blog button{ font-family:inherit; }
.bs-blog ::selection{ background:var(--bs-naranja); color:#fff; }

/* ============================================================
   3 · LAYOUT / CONTENEDOR  (.bs-container = solo el <main> del blog)
   ============================================================ */
.bs-container{
  max-width:var(--bs-container);
  margin:0 auto;
  padding-left:var(--bs-pad);
  padding-right:var(--bs-pad);
}
.bs-main{ padding-top:44px; }

/* Barra de progreso de lectura (feature del rediseno; fija al borde superior
   del viewport, independiente del header del tema). */
.bs-progress{ position:fixed; left:0; top:0; height:2px; background:var(--bs-naranja); width:0; z-index:80; transition:width .1s linear; pointer-events:none; }

/* ============================================================
   4 · UTILIDADES
   ============================================================ */
.bs-mono{ font-family:var(--bs-mono); text-transform:uppercase; }
.bs-kicker{ font-family:var(--bs-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--bs-naranja); font-weight:600; }
.bs-meta{ font-family:var(--bs-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bs-gris-2); }
.bs-caption{ font-family:var(--bs-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--bs-gris-3); }
.bs-accent{ color:var(--bs-naranja); }
.bs-dot{ color:var(--bs-naranja); font-style:italic; }
.bs-hide{ display:none !important; }

.bs-sechead{ display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.bs-sechead--tight{ margin-bottom:8px; }
.bs-sechead__rule{ flex:1; height:1px; background:var(--bs-linea); }
.bs-sechead__note{ font-family:var(--bs-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bs-gris-2); }

.bs-rule-top{ border-top:3px solid var(--bs-tinta); }

.bs-panel-dark{ position:relative; background:var(--bs-oscuro); color:var(--bs-crema); border-radius:var(--bs-radio); overflow:hidden; }
.bs-panel-dark::before{ content:""; position:absolute; inset:0; background:var(--bs-textura); pointer-events:none; }
.bs-panel-dark > *{ position:relative; z-index:1; }

.bs-avatar{ border-radius:50%; background:var(--bs-tinta); color:var(--bs-crema); display:inline-flex; align-items:center; justify-content:center; font-family:var(--bs-mono); flex:none; }
.bs-avatar--34{ width:34px; height:34px; font-size:11px; }
.bs-avatar--44{ width:44px; height:44px; font-size:13px; }
.bs-avatar--64{ width:64px; height:64px; font-size:17px; }

.bs-ratio-16-10{ aspect-ratio:16/10; background:var(--bs-oscuro); border-radius:var(--bs-radio); overflow:hidden; }
.bs-ratio-185{ aspect-ratio:1.85/1; background:var(--bs-oscuro); border-radius:var(--bs-radio); overflow:hidden; position:relative; }
.bs-ratio-16-10 img,.bs-ratio-185 img{ width:100%; height:100%; object-fit:cover; display:block; }

.bs-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--bs-sans); font-weight:700; border-radius:var(--bs-radio); cursor:pointer; border:1px solid transparent; transition:background .18s, color .18s, border-color .18s; text-decoration:none; }
.bs-btn--accent{ background:var(--bs-naranja); color:#fff; }
.bs-btn--accent:hover{ background:var(--bs-tinta); color:#fff; }
.bs-btn--md{ font-size:13px; padding:10px 20px; }
.bs-btn--lg{ font-size:15px; padding:15px 26px; }
.bs-btn--ghost{ background:transparent; border-color:var(--bs-tinta); color:var(--bs-tinta); }
.bs-btn--ghost:hover{ background:var(--bs-tinta); color:var(--bs-crema); }
.bs-btn--ghost-dark{ background:transparent; border-color:rgba(244,238,228,.35); color:var(--bs-crema); }
.bs-btn--ghost-dark:hover{ background:var(--bs-crema); color:var(--bs-oscuro); }
/* En paneles oscuros el hover del boton acento invierte a crema (contraste). */
.bs-panel-dark .bs-btn--accent:hover{ background:var(--bs-crema); color:var(--bs-oscuro); }

/* ============================================================
   5 · FOLIO EDITORIAL  (portada)
   ============================================================ */
.bs-folio{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; border-top:3px solid var(--bs-tinta); border-bottom:1px solid var(--bs-linea); padding:10px 0; margin-top:28px; font-family:var(--bs-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--bs-gris-2); }
.bs-folio__right{ display:flex; gap:24px; flex-wrap:wrap; }
.bs-folio__edition{ color:var(--bs-naranja); }

/* ============================================================
   6 · MASTHEAD  (portada)
   ============================================================ */
.bs-masthead{ display:grid; grid-template-columns:1fr 400px; gap:64px; align-items:end; padding:56px 0 44px; }
.bs-masthead__title{ margin:0; font-family:var(--bs-serif); font-size:clamp(60px,7.4vw,100px); font-weight:700; letter-spacing:-0.02em; line-height:.95; }
.bs-masthead__desc{ margin:0 0 8px; font-family:var(--bs-serif); font-style:italic; font-size:19px; line-height:1.55; color:var(--bs-gris-1); text-wrap:pretty; }

/* ============================================================
   7 · BARRA DE FILTROS  (portada · chips = enlaces a archivos de categoria)
   ============================================================ */
.bs-filters{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:18px 0; border-top:1px solid var(--bs-linea); border-bottom:1px solid var(--bs-linea); }
.bs-chip{ font-family:var(--bs-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:8px 14px; border-radius:var(--bs-radio); cursor:pointer; border:1px solid var(--bs-linea); background:transparent; color:var(--bs-tinta); white-space:nowrap; transition:border-color .18s,background .18s,color .18s; text-decoration:none; }
.bs-chip:hover{ border-color:var(--bs-tinta); color:var(--bs-tinta); }
.bs-chip.is-active{ background:var(--bs-tinta); color:var(--bs-crema); border-color:var(--bs-tinta); }
.bs-chip__count{ opacity:.55; }
.bs-filters__spacer{ flex:1; }
.bs-search{ font-family:var(--bs-mono); font-size:12px; padding:9px 14px; border:1px solid var(--bs-linea); background:#fff; color:var(--bs-tinta); width:250px; max-width:100%; border-radius:var(--bs-radio); outline:none; transition:border-color .18s; }
.bs-search:focus{ border-color:var(--bs-naranja); }

/* ============================================================
   8 · DESTACADO "EN PORTADA"
   ============================================================ */
.bs-sec-feat{ padding:44px 0 0; }
.bs-feat{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:56px; align-items:center; cursor:pointer; }
.bs-feat__body{ display:flex; flex-direction:column; gap:20px; }
.bs-feat__title{ margin:0; font-family:var(--bs-serif); font-size:44px; font-weight:700; letter-spacing:-0.015em; line-height:1.12; text-wrap:pretty; text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:3px; text-underline-offset:6px; transition:text-decoration-color .2s; color:var(--bs-tinta); }
.bs-feat:hover .bs-feat__title{ text-decoration-color:var(--bs-naranja); }
.bs-feat__excerpt{ margin:0; font-family:var(--bs-serif); font-size:18px; line-height:1.65; color:var(--bs-gris-1); text-wrap:pretty; }
.bs-feat__byline{ display:flex; align-items:center; gap:12px; font-family:var(--bs-sans); font-size:13.5px; font-weight:600; }
.bs-feat__cta{ font-family:var(--bs-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--bs-naranja); font-weight:600; }
.bs-feat__media{ margin:0; }
.bs-feat__caption{ margin-top:10px; }
/* Portada tipografica de respaldo cuando el post no tiene imagen destacada. */
.bs-feat__cover{ position:relative; }
.bs-feat__fallback{ display:none; position:absolute; inset:0; flex-direction:column; justify-content:space-between; gap:18px; padding:clamp(24px,7%,52px); background:var(--bs-oscuro); }
.bs-feat__fallback::before{ content:""; position:absolute; inset:0; background:var(--bs-textura); pointer-events:none; }
.bs-feat__cover.is-fallback .bs-feat__fallback{ display:flex; }
.bs-feat__fallback > *{ position:relative; z-index:1; }
.bs-feat__fallback .cover-kick{ font-family:var(--bs-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bs-crema-2); }
.bs-feat__fallback .cover-big{ font-family:var(--bs-serif); font-weight:700; font-size:clamp(40px,5.4vw,74px); line-height:.98; letter-spacing:-0.03em; color:var(--bs-crema); }
.bs-feat__fallback .cover-foot{ display:flex; justify-content:space-between; gap:12px; font-family:var(--bs-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bs-crema-2); }

/* ============================================================
   9 · SPLIT  (Lo ultimo + Guias de fondo)
   ============================================================ */
.bs-split{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:64px; padding:64px 0; }
.bs-latest__row{ display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:16px; padding:18px 8px; border-bottom:1px solid var(--bs-linea); transition:background .18s; text-decoration:none; }
.bs-latest__row:hover{ background:#fff; }
.bs-latest__num{ font-family:var(--bs-mono); font-size:22px; color:var(--bs-naranja); }
.bs-latest__col{ display:flex; flex-direction:column; }
.bs-latest__meta{ display:block; margin-bottom:5px; }
.bs-latest__title{ font-family:var(--bs-serif); font-size:19px; font-weight:600; line-height:1.3; color:var(--bs-tinta); }
.bs-latest__min{ font-family:var(--bs-mono); font-size:11px; color:var(--bs-gris-2); white-space:nowrap; }

.bs-guides{ padding:32px; }
.bs-guides__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.bs-guides__note{ font-family:var(--bs-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--bs-crema-2); }
.bs-guides__cta{ margin-top:20px; width:100%; }
.bs-guide{ display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:18px 0; border-bottom:1px solid rgba(244,238,228,.14); text-decoration:none; }
.bs-guide__idx{ font-family:var(--bs-mono); font-size:11px; letter-spacing:.14em; color:var(--bs-naranja); }
.bs-guide__body{ display:flex; flex-direction:column; gap:5px; }
.bs-guide__title{ font-family:var(--bs-serif); font-size:17.5px; font-weight:600; color:var(--bs-crema); }
.bs-guide__sub{ font-family:var(--bs-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--bs-crema-3); }
.bs-guide__arrow{ color:var(--bs-naranja); }
.bs-guide:hover .bs-guide__title{ color:var(--bs-naranja-oscuro); }

/* ============================================================
   10 · GRID DE TARJETAS  (Archivo reciente / Sigue leyendo)
   ============================================================ */
.bs-sec-grid{ padding:56px 0; }
.bs-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.bs-card{ background:var(--bs-tarjeta); border:1px solid var(--bs-linea); border-radius:var(--bs-radio); padding:26px; display:flex; flex-direction:column; gap:14px; transition:transform .18s, box-shadow .18s, border-color .18s; text-decoration:none; }
.bs-card:hover{ transform:translateY(-3px); box-shadow:var(--bs-sombra-hover); border-color:var(--bs-tinta); }
.bs-card__meta{ display:flex; justify-content:space-between; gap:12px; font-family:var(--bs-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--bs-gris-2); }
.bs-card__title{ font-family:var(--bs-serif); font-size:20.5px; font-weight:600; line-height:1.3; color:var(--bs-tinta); }
.bs-card__excerpt{ font-family:var(--bs-serif); font-size:15px; line-height:1.55; color:var(--bs-gris-1); flex:1; }
.bs-card__foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid var(--bs-linea-suave); font-family:var(--bs-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--bs-gris-2); }

/* ============================================================
   11 · PAGINACION
   ============================================================ */
.bs-pagination{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; font-family:var(--bs-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--bs-gris-2); padding:44px 0; border-top:1px solid var(--bs-linea); margin-top:24px; }
.bs-pagination__nums{ display:flex; gap:6px; align-items:center; }
.bs-pagination__num{ padding:6px 10px; border-radius:var(--bs-radio); text-decoration:none; color:var(--bs-gris-2); }
.bs-pagination__num.is-current{ background:var(--bs-tinta); color:var(--bs-crema); }
.bs-pagination__num:not(.is-current){ border:1px solid var(--bs-linea); transition:border-color .18s; }
.bs-pagination__num:not(.is-current):hover{ border-color:var(--bs-tinta); }
/* Compatibilidad con the_posts_pagination() nativo, por si la plantilla lo usa. */
.bs-pagination .nav-links{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.bs-pagination .page-numbers{ padding:6px 10px; border-radius:var(--bs-radio); border:1px solid var(--bs-linea); color:var(--bs-gris-2); text-decoration:none; transition:border-color .18s; }
.bs-pagination .page-numbers:hover{ border-color:var(--bs-tinta); }
.bs-pagination .page-numbers.current{ background:var(--bs-tinta); color:var(--bs-crema); border-color:var(--bs-tinta); }
.bs-pagination .page-numbers.dots{ border:none; }

/* ============================================================
   12 · NEWSLETTER "Radar Summum"  (enlace a /contacto/; no capta emails)
   ============================================================ */
.bs-newsletter__grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:48px; align-items:center; padding:56px 60px; }
.bs-newsletter__title{ margin:0; font-family:var(--bs-serif); font-size:34px; font-weight:700; line-height:1.15; color:var(--bs-crema); }
.bs-newsletter__text{ margin:14px 0 0; font-family:var(--bs-serif); font-size:16px; line-height:1.6; color:var(--bs-crema-2); }
.bs-newsletter__form{ display:flex; gap:10px; flex-wrap:wrap; }
.bs-newsletter__input{ flex:1; min-width:0; font-family:var(--bs-mono); font-size:13px; padding:14px 16px; background:transparent; color:var(--bs-crema); border:1px solid rgba(244,238,228,.3); border-radius:var(--bs-radio); outline:none; transition:border-color .18s; }
.bs-newsletter__input::placeholder{ color:var(--bs-crema-3); }
.bs-newsletter__input:focus{ border-color:var(--bs-naranja); }
.bs-newsletter__note{ margin:14px 0 0; font-family:var(--bs-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--bs-crema-3); }

/* Estado de resultados (filtro/busqueda si la plantilla los usa en cliente). */
.bs-empty{ padding:64px 0; text-align:center; font-family:var(--bs-serif); font-size:18px; color:var(--bs-gris-1); }

/* ============================================================
   13 · ARTICULO · cabecera
   ============================================================ */
.bs-article-head{ max-width:920px; margin:0 auto; }
.bs-breadcrumb{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-family:var(--bs-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--bs-gris-2); }
.bs-breadcrumb a{ color:var(--bs-gris-2); }
.bs-breadcrumb a:hover{ color:var(--bs-naranja); }
.bs-breadcrumb .bs-accent{ color:var(--bs-naranja); }
.bs-pills{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:30px 0 22px; }
.bs-pill{ display:inline-flex; align-items:center; font-family:var(--bs-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:6px 11px; border-radius:var(--bs-radio); }
.bs-pill--ink{ background:var(--bs-tinta); color:var(--bs-crema); }
.bs-pill--outline{ border:1px solid var(--bs-naranja); color:var(--bs-naranja); }
.bs-pill--muted{ border:1px solid var(--bs-linea); color:var(--bs-gris-2); }
.bs-article__h1{ margin:0 0 22px; font-family:var(--bs-serif); font-size:clamp(40px,4.2vw,56px); font-weight:700; letter-spacing:-0.018em; line-height:1.12; text-wrap:pretty; }
.bs-article__lead{ margin:0 0 30px; font-family:var(--bs-serif); font-size:22px; line-height:1.55; color:var(--bs-gris-1); text-wrap:pretty; }
.bs-byline-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; border-top:1px solid var(--bs-linea); border-bottom:1px solid var(--bs-linea); padding:16px 0; }
.bs-byline__name{ font-family:var(--bs-sans); font-size:14.5px; font-weight:700; }
.bs-byline__sep{ width:1px; height:28px; background:var(--bs-linea); }
.bs-share{ display:flex; gap:8px; margin-left:auto; }
.bs-share button,.bs-share a{ font-family:var(--bs-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--bs-linea); background:transparent; color:var(--bs-tinta); padding:8px 12px; border-radius:var(--bs-radio); cursor:pointer; text-decoration:none; }
.bs-share button:hover,.bs-share a:hover{ border-color:var(--bs-tinta); }

/* Portada tipografica del articulo (post sin foto destacada). */
.bs-feat-figure{ max-width:920px; margin:36px auto 0; }
.bs-cover-typo{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; gap:18px; padding:clamp(28px,6%,56px); z-index:1; }
.bs-cover-typo__k{ font-family:var(--bs-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--bs-naranja); font-weight:600; }
.bs-cover-typo__big{ font-family:var(--bs-serif); font-weight:700; font-size:clamp(34px,6.4vw,76px); line-height:1.02; letter-spacing:-0.02em; color:var(--bs-crema); text-wrap:balance; }
.bs-cover-typo__big i{ font-style:italic; }
.bs-cover-typo__foot{ font-family:var(--bs-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--bs-crema-3); }

/* ============================================================
   14 · ARTICULO · rejilla de lectura (TOC | cuerpo | aside)
   ============================================================ */
.bs-article-grid{ display:grid; grid-template-columns:210px minmax(0,1fr) 300px; gap:56px; padding:56px 0 0; align-items:start; }
.bs-article__col-main{ min-width:0; max-width:680px; }

.bs-toc{ position:sticky; top:110px; align-self:start; display:flex; flex-direction:column; }
.bs-toc__title{ font-family:var(--bs-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--bs-gris-2); margin-bottom:16px; }
.bs-toc__item{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:baseline; padding:9px 0 9px 12px; border-left:2px solid transparent; cursor:pointer; text-align:left; background:transparent; border-top:none; border-right:none; border-bottom:none; width:100%; }
.bs-toc__item.is-active{ border-left-color:var(--bs-naranja); }
.bs-toc__num{ font-family:var(--bs-mono); font-size:11px; color:var(--bs-gris-3); }
.bs-toc__label{ font-family:var(--bs-sans); font-size:12.5px; font-weight:600; color:var(--bs-gris-2); line-height:1.35; }
.bs-toc__item.is-active .bs-toc__num{ color:var(--bs-naranja); }
.bs-toc__item.is-active .bs-toc__label{ color:var(--bs-tinta); }
.bs-toc__read{ margin-top:16px; padding-top:16px; border-top:1px solid var(--bs-linea); font-family:var(--bs-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--bs-gris-3); }

/* ---- cuerpo del articulo ---- */
.bs-prose{ font-family:var(--bs-serif); font-size:18.5px; line-height:1.78; color:var(--bs-texto-cuerpo); }
.bs-prose p{ margin:0 0 1.35em; }
.bs-prose a{ color:var(--bs-tinta); text-decoration:underline; text-decoration-color:var(--bs-naranja); text-decoration-thickness:2px; text-underline-offset:4px; }
.bs-prose a:hover{ color:var(--bs-naranja); }
.bs-dropcap::first-letter{ font-family:var(--bs-serif); font-weight:700; font-size:64px; line-height:.8; color:var(--bs-naranja); float:left; padding:6px 10px 0 0; }

.bs-h2{ font-family:var(--bs-serif); font-size:29px; font-weight:700; line-height:1.18; border-top:2px solid var(--bs-tinta); padding-top:14px; margin:56px 0 20px; scroll-margin-top:104px; }
.bs-h2__idx{ font-family:var(--bs-mono); font-size:13px; color:var(--bs-naranja); display:block; margin-bottom:8px; }
/* the_content() emite <h2> planos: el TOC les asigna id en cliente y el ancla
   debe librar el header sticky del tema al saltar. */
.bs-article-body h2{ scroll-margin-top:104px; }

.bs-tldr{ padding:26px 28px; margin:0 0 36px; }
.bs-tldr__label{ font-family:var(--bs-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bs-naranja); font-weight:600; }
.bs-tldr__meta{ font-family:var(--bs-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--bs-crema-3); }
.bs-tldr__body{ font-family:var(--bs-serif); font-size:16.5px; line-height:1.6; color:var(--bs-crema); margin-top:12px; }
.bs-tldr__body b,.bs-tldr__body strong{ color:var(--bs-naranja-oscuro); }

.bs-quote{ margin:36px 0; padding:24px 0; border-top:1px solid var(--bs-linea); border-bottom:1px solid var(--bs-linea); }
.bs-quote p{ margin:0; font-family:var(--bs-serif); font-style:italic; font-size:28px; line-height:1.42; color:var(--bs-tinta); }
.bs-quote cite{ display:block; margin-top:14px; font-family:var(--bs-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--bs-naranja); font-style:normal; }

.bs-stats{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--bs-linea); border-radius:var(--bs-radio); margin:36px 0; background:#fff; }
.bs-stats__cell{ padding:22px 20px; border-right:1px solid var(--bs-linea); }
.bs-stats__cell:last-child{ border-right:none; }
.bs-stats__fig{ font-family:var(--bs-serif); font-size:29px; font-weight:700; line-height:1.1; letter-spacing:-0.015em; }
.bs-stats__label{ font-family:var(--bs-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--bs-gris-2); margin-top:8px; }

.bs-table-wrap{ overflow-x:auto; margin:28px 0; border:1px solid var(--bs-linea); border-radius:var(--bs-radio); background:#fff; }
.bs-table{ width:100%; min-width:560px; }
.bs-table th{ font-family:var(--bs-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--bs-gris-2); text-align:left; border-bottom:2px solid var(--bs-tinta); padding:14px 16px; font-weight:500; }
.bs-table td{ font-family:var(--bs-serif); font-size:15px; line-height:1.5; border-bottom:1px solid var(--bs-linea-suave); padding:14px 16px; vertical-align:top; }
.bs-table tr:last-child td{ border-bottom:none; }
.bs-table td:first-child{ font-weight:600; }
.bs-table__num{ font-family:var(--bs-mono); font-size:12.5px; color:var(--bs-naranja); text-align:right; white-space:nowrap; }

.bs-step{ display:grid; grid-template-columns:70px 1fr; gap:20px; padding:22px 0; border-top:1px solid var(--bs-linea); }
.bs-step__num{ font-family:var(--bs-mono); font-size:20px; color:var(--bs-naranja); }
.bs-step__week{ font-family:var(--bs-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--bs-gris-3); margin-top:4px; }
.bs-step__title{ font-family:var(--bs-serif); font-size:18px; font-weight:600; margin:0 0 6px; }
.bs-step__desc{ font-family:var(--bs-serif); font-size:15.5px; line-height:1.6; color:var(--bs-gris-1); margin:0; }

.bs-cases{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:28px 0; }
.bs-case{ border:1px solid var(--bs-linea); border-radius:var(--bs-radio); padding:24px; }
.bs-case__k{ font-family:var(--bs-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--bs-naranja); }
.bs-case__title{ font-family:var(--bs-serif); font-size:19px; font-weight:600; margin:8px 0; }
.bs-case__desc{ font-family:var(--bs-serif); font-size:15px; line-height:1.55; color:var(--bs-gris-1); margin:0; }

.bs-checklist{ display:grid; grid-template-columns:1fr 1fr; gap:18px 32px; margin:28px 0; }
.bs-check{ display:grid; grid-template-columns:auto 1fr; gap:12px; }
.bs-check__num{ font-family:var(--bs-mono); font-size:12px; color:var(--bs-naranja); }
.bs-check__text{ font-family:var(--bs-serif); font-size:15.5px; line-height:1.5; }

.bs-myths{ margin:8px 0 40px; }
.bs-myth{ display:flex; align-items:flex-start; gap:14px; padding:16px 0; border-top:1px solid var(--bs-linea); }
.bs-myths .bs-myth:first-child{ border-top:none; }
.bs-myth .bs-pill{ white-space:nowrap; flex:none; }
.bs-myth__text{ font-family:var(--bs-serif); font-size:16px; line-height:1.55; }

.bs-faq__item{ border-top:1px solid var(--bs-linea); }
.bs-faq__q{ display:flex; justify-content:space-between; align-items:center; gap:16px; width:100%; text-align:left; background:transparent; border:none; cursor:pointer; padding:18px 0; font-family:var(--bs-serif); font-size:17.5px; font-weight:600; color:var(--bs-tinta); }
.bs-faq__sign{ font-family:var(--bs-mono); font-size:18px; color:var(--bs-naranja); flex:none; }
.bs-faq__a{ font-family:var(--bs-serif); font-size:16px; line-height:1.6; color:var(--bs-gris-1); padding:0 40px 20px 0; margin:0; }
/* Acordeon: por defecto ABIERTO (mejora progresiva). El JS marca cada item con
   .is-js y solo entonces se colapsa y se hace exclusivo. Si el JS no corre
   (WP Rocket delay o error), las respuestas quedan VISIBLES -> el contenido
   nunca se oculta sin JS. */
.bs-faq__item.is-js .bs-faq__a{ display:none; }
.bs-faq__item.is-js.is-open .bs-faq__a{ display:block; }

.bs-cta-panel{ padding:36px 40px; margin:44px 0; }
.bs-cta-panel h3{ margin:14px 0 12px; font-family:var(--bs-serif); font-size:27px; font-weight:700; line-height:1.2; color:var(--bs-crema); }
.bs-cta-panel p{ margin:0 0 24px; font-family:var(--bs-serif); font-size:16px; line-height:1.65; color:var(--bs-crema-2); }

.bs-author{ display:grid; grid-template-columns:auto 1fr; gap:20px; border-top:2px solid var(--bs-tinta); padding-top:28px; margin-top:44px; }
.bs-author__name{ font-family:var(--bs-serif); font-size:19px; font-weight:700; margin:0 0 6px; }
.bs-author__bio{ font-family:var(--bs-serif); font-size:15.5px; line-height:1.6; color:var(--bs-gris-1); margin:0 0 10px; }
.bs-author__links a{ font-family:var(--bs-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--bs-naranja); margin-right:18px; }

/* ============================================================
   15 · ARTICULO · aside derecha (panel de agencia por variante + tarjetas)
   ============================================================ */
.bs-aside{ position:sticky; top:110px; align-self:start; display:flex; flex-direction:column; gap:20px; }
.bs-aside-agency{ padding:26px 24px; }
.bs-aside-agency__title{ font-family:var(--bs-serif); font-size:20px; font-weight:600; line-height:1.35; color:var(--bs-crema); margin:12px 0 16px; }
.bs-aside-agency__rows{ margin-bottom:20px; }
.bs-aside-agency__row{ display:flex; gap:10px; align-items:flex-start; padding:12px 0; border-bottom:1px solid rgba(244,238,228,.14); font-family:var(--bs-serif); font-size:13.5px; line-height:1.5; color:#D8CFC2; }
.bs-aside-agency__row .bs-accent{ color:var(--bs-naranja); }
.bs-aside-agency__cta{ width:100%; }

/* Selector de variante de la tarjeta de agencia POR CLASE DE CATEGORIA DEL BODY.
   inc/blog-redesign.php marca el <body> con bs-cat-kit | bs-cat-tecnologica |
   bs-cat-marketing (segun summum_aside_variant). Funciona SIN JS (resiliente al
   delay_js de WP Rocket). El JS solo aporta el override ?panel= de previsualiz. */
.bs-aside-agency-switch [data-panel]{ display:none; }
body.bs-cat-kit          .bs-aside-agency-switch [data-panel="kit"],
body.bs-cat-tecnologica  .bs-aside-agency-switch [data-panel="tecnologica"],
body.bs-cat-marketing    .bs-aside-agency-switch [data-panel="marketing"],
body.bs-cat-marketplaces .bs-aside-agency-switch [data-panel="marketplaces"]{ display:block; }
/* Respaldo: si el body no trae clase de categoria, muestra la variante marketing. */
body:not(.bs-cat-kit):not(.bs-cat-tecnologica):not(.bs-cat-marketing):not(.bs-cat-marketplaces) .bs-aside-agency-switch [data-panel="marketing"]{ display:block; }
/* El JS puede forzar una variante concreta con [hidden] (override ?panel=). */
.bs-aside-agency-switch [data-panel][hidden]{ display:none; }

.bs-aside-card{ background:var(--bs-tarjeta); border:1px solid var(--bs-linea); border-radius:var(--bs-radio); padding:22px; }
.bs-aside-card__h{ font-family:var(--bs-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--bs-gris-2); margin-bottom:14px; }
.bs-aside-card a{ display:flex; justify-content:space-between; gap:12px; font-family:var(--bs-sans); font-size:14px; font-weight:600; padding:10px 0; border-top:1px solid var(--bs-linea-suave); text-decoration:none; }
.bs-aside-card a:first-of-type{ border-top:none; }
.bs-aside-card--radar{ background:var(--bs-papel); }
.bs-aside-card--radar .bs-aside-card__h{ color:var(--bs-naranja); }
.bs-aside-card__text{ margin:0 0 14px; font-family:var(--bs-serif); font-size:14px; line-height:1.6; color:var(--bs-gris-1); }

/* ============================================================
   16 · ARTICULO · Sigue leyendo + CTA final
   ============================================================ */
.bs-seealso{ margin-top:24px; padding:36px 0 8px; }
.bs-seealso__head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.bs-seealso__head h2{ margin:0; font-family:var(--bs-serif); font-size:29px; font-weight:700; letter-spacing:-0.015em; }

.bs-final-cta{ text-align:center; padding:88px 0 72px; }
.bs-final-cta__kicker{ font-family:var(--bs-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bs-gris-2); }
.bs-final-cta__title{ margin:18px auto 28px; font-family:var(--bs-serif); font-size:clamp(36px,4vw,52px); font-weight:700; letter-spacing:-0.015em; line-height:1.08; max-width:720px; }

/* ============================================================
   17 · MEDIA QUERIES  (solo componentes del blog; nunca header/footer/wordmark)
   ============================================================ */
@media (max-width:1279px){
  .bs-article-grid{ grid-template-columns:minmax(0,1fr) 300px; }
  .bs-toc{ display:none; }
}
@media (max-width:1119px){
  .bs-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bs-search{ width:100%; }
}
@media (max-width:1039px){ .bs-split{ grid-template-columns:1fr; } }
@media (max-width:1019px){
  .bs-article-grid{ grid-template-columns:minmax(0,1fr); }
  .bs-aside{ position:static; }
  .bs-article__col-main{ max-width:720px; }
}
@media (max-width:979px){
  .bs-masthead{ grid-template-columns:1fr; }
  .bs-newsletter__grid{ grid-template-columns:1fr; }
}
@media (max-width:939px){
  .bs-feat{ grid-template-columns:1fr; }
  .bs-feat__title{ font-size:36px; }
}
@media (max-width:759px){
  .bs-container{ padding-left:20px; padding-right:20px; }
  .bs-newsletter__grid{ padding:32px 24px; }
}
@media (max-width:719px){
  .bs-cases{ grid-template-columns:1fr; }
  .bs-checklist{ grid-template-columns:1fr; }
  .bs-cards{ grid-template-columns:1fr; }
}
@media (max-width:679px){
  .bs-stats{ grid-template-columns:repeat(2,1fr); }
  .bs-stats__cell:nth-child(2n){ border-right:none; }
  .bs-stats__cell:nth-child(-n+2){ border-bottom:1px solid var(--bs-linea); }
}
@media (max-width:559px){
  .bs-feat__title{ font-size:30px; }
  .bs-prose{ font-size:16px; }
  .bs-article__lead{ font-size:19px; }
}

/* Respeta la preferencia de movimiento reducido para el scroll suave del TOC. */
@media (prefers-reduced-motion:reduce){
  .bs-progress{ transition:none; }
}