/* ═══════════════════════════════════════════════════════════════════════════
   BL · BLOG · el índice (/blog) y cada artículo
   ---------------------------------------------------------------------------
   Va encima de bl-secciones.css y usa sus mismas piezas (.sc, .sc-eyebrow,
   .sc-h1, .sc-h2, .sc-cta, .sc-btn) y los tokens de cada página (--ink,
   --gray, --line, --paper, --pad, --hdr-h). Sin verde, como el resto de las
   páginas nuevas.
   Lo generan _blog/generar.js: cambiar el aspecto de TODO el blog es cambiar
   este archivo, no los 65 artículos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── índice: cabecera ──────────────────────────────────────────────────── */
.bg-cab{padding-top:calc(var(--hdr-h,62px) + clamp(28px,6vh,70px));padding-bottom:clamp(22px,3.4vh,36px)}
.bg-cab .sc-lead{margin-top:clamp(16px,2.4vh,24px)}
.bg-lista{padding-bottom:clamp(56px,10vh,110px)}

/* ── filtros por categoría: una fila que se desliza en el móvil ─────────── */
.bg-filtros{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  margin:0 calc(-1 * var(--pad)) clamp(28px,4.4vh,44px);padding:4px var(--pad) 20px;
  border-bottom:1px solid var(--line)}
.bg-filtros::-webkit-scrollbar{display:none}
.bg-filtros button{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:7px;padding:9px 16px;
  border:1px solid var(--line);border-radius:999px;background:transparent;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.2;color:var(--ink);white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s}
.bg-filtros button i{font-style:normal;font-size:12.5px;font-weight:400;color:var(--gray)}
.bg-filtros button:hover{border-color:var(--ink)}
.bg-filtros button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.bg-filtros button.on i{color:rgba(255,255,255,.66)}
.bg-filtros button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── el artículo destacado: el más reciente, en grande ──────────────────── */
.bg-dest{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(22px,3.6vw,56px);
  align-items:center;color:var(--ink);margin-bottom:clamp(44px,7vh,72px)}
.bg-dest[hidden]{display:none}
.bg-dest-img{display:block;overflow:hidden;aspect-ratio:3/2;background:var(--paper-2)}
.bg-dest-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.bg-dest:hover .bg-dest-img img{transform:scale(1.03)}
.bg-dest-txt{display:block}
.bg-dest-tit{display:block;margin-top:12px;font-size:clamp(26px,3vw,42px);font-weight:500;line-height:1.08;letter-spacing:-.022em}
.bg-dest-desc{display:block;margin-top:16px;max-width:46ch;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--gray)}
.bg-dest:hover .bg-dest-tit{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* ── tarjetas ──────────────────────────────────────────────────────────── */
.bg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(34px,5vh,56px) clamp(18px,2.4vw,34px)}
.bg-card{display:flex;flex-direction:column;color:var(--ink)}
.bg-card[hidden]{display:none!important}
.bg-card-img{display:block;overflow:hidden;aspect-ratio:3/2;background:var(--paper-2)}
.bg-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.bg-card:hover .bg-card-img img{transform:scale(1.04)}
.bg-card-cat{display:block;margin-top:16px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.bg-card-tit{display:block;margin-top:8px;font-size:clamp(19px,1.45vw,22px);font-weight:500;line-height:1.26;letter-spacing:-.01em}
.bg-card:hover .bg-card-tit{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.bg-card-meta{display:block;margin-top:10px;font-size:14px;color:var(--gray)}
.bg-card:focus-visible,.bg-dest:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.bg-vacio{padding:40px 0;font-size:17px;color:var(--gray)}
.bg-mas{display:flex;justify-content:center;margin-top:clamp(40px,6vh,60px)}
.bg-mas[hidden]{display:none}
.bg-mas .sc-btn{margin-top:0}

/* ── artículo: cabecera ────────────────────────────────────────────────── */
.art-cab{padding-top:calc(var(--hdr-h,62px) + clamp(28px,6vh,66px))}
.art-cab .wrap{max-width:calc(940px + 2 * var(--pad))}
.art-h1{margin-top:clamp(14px,2.2vh,24px);font-size:clamp(34px,4.6vw,62px);font-weight:500;line-height:1.05;
  letter-spacing:-.026em;color:var(--ink);text-wrap:balance}
.art-entradilla{margin-top:clamp(16px,2.6vh,26px);max-width:60ch;font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--gray)}
.art-meta{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:clamp(18px,2.8vh,28px);font-size:15px;color:var(--gray)}

/* ── portada ───────────────────────────────────────────────────────────── */
.art-portada{margin:clamp(30px,5vh,52px) 0 0;overflow:hidden;background:var(--paper-2)}
.art-portada img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* ── el texto ──────────────────────────────────────────────────────────── */
.art-cuerpo{max-width:720px;margin:clamp(36px,6vh,60px) auto 0;font-size:clamp(17px,1.25vw,19px);line-height:1.75;color:#2a2a2a}
.art-cuerpo>*+*{margin-top:1.05em}
.art-cuerpo p{text-wrap:pretty}
.art-cuerpo h2{margin-top:2.1em;font-size:clamp(25px,2.4vw,32px);font-weight:500;line-height:1.18;letter-spacing:-.016em;color:var(--ink);text-wrap:balance}
.art-cuerpo h3{margin-top:1.8em;font-size:clamp(20px,1.7vw,23px);font-weight:500;line-height:1.3;letter-spacing:-.008em;color:var(--ink)}
.art-cuerpo h2+*,.art-cuerpo h3+*{margin-top:.55em}
.art-cuerpo>h2:first-child,.art-cuerpo>h3:first-child{margin-top:0}
.art-cuerpo strong{font-weight:600;color:var(--ink)}
.art-cuerpo a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(16,16,16,.38);transition:text-decoration-color .2s}
.art-cuerpo a:hover{text-decoration-color:var(--ink)}
.art-cuerpo ul,.art-cuerpo ol{padding-left:1.25em}
.art-cuerpo li{padding-left:.25em}
.art-cuerpo li+li{margin-top:.5em}
.art-cuerpo ul li::marker{color:var(--gray-2,#9e9e9e)}
.art-cuerpo ol li::marker{font-weight:600;color:var(--ink)}
.art-cuerpo blockquote{padding-left:22px;border-left:2px solid var(--ink);color:var(--ink)}

.art-tabla{overflow-x:auto;margin-top:1.6em;-webkit-overflow-scrolling:touch}
.art-tabla table{width:100%;min-width:540px;border-collapse:collapse;font-size:.86em;line-height:1.5}
.art-tabla th,.art-tabla td{padding:12px 16px 12px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.art-tabla th{font-size:.8em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);border-bottom-color:var(--ink)}
.art-tabla td:first-child{font-weight:500;color:var(--ink)}

.art-fig{margin:1.9em 0 0}
.art-fig img{display:block;width:100%;height:auto;background:var(--paper-2)}
.art-fig figcaption{margin-top:9px;font-size:14px;line-height:1.5;color:var(--gray)}
.art-galeria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:1.9em}
.art-galeria .art-fig{margin:0}

/* ── fuentes ───────────────────────────────────────────────────────────── */
.art-fuentes{max-width:720px;margin:clamp(44px,7vh,68px) auto 0;padding-top:22px;border-top:1px solid var(--line)}
.art-fuentes h2{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.art-fuentes ul{margin-top:12px;padding-left:1.1em;font-size:15px;line-height:1.6;color:var(--gray)}
.art-fuentes li+li{margin-top:6px}

/* ── sigue leyendo ─────────────────────────────────────────────────────── */
.art-rel{margin-top:clamp(64px,11vh,120px);padding:clamp(54px,9vh,96px) 0;border-top:1px solid var(--line)}
.art-rel-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 30px;flex-wrap:wrap;
  margin-bottom:clamp(28px,4.4vh,44px)}
.art-rel .sc-h2{font-size:clamp(28px,3.4vw,44px)}

/* ── el cierre con dos botones ─────────────────────────────────────────── */
.art-cta-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.6vh,36px)}
.art-cta-btns .sc-btn{margin-top:0}

@media(max-width:1000px){
  .bg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bg-dest{grid-template-columns:1fr;gap:18px}
}
@media(max-width:620px){
  .bg-grid{grid-template-columns:1fr}
  .art-galeria{grid-template-columns:1fr}
  .art-portada{margin-inline:calc(-1 * var(--pad))}
  .art-cta-btns{flex-direction:column;align-items:stretch}
  .art-cta-btns .sc-btn{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .bg-card:hover .bg-card-img img,.bg-dest:hover .bg-dest-img img{transform:none}
}