/* Encabezado del blog. Archivo aparte (sin build) para que funcione aunque
   el servidor no recompile el SCSS. Las imágenes de los artículos ya traen
   título y marca: el texto va siempre fuera de la imagen. */
:root{--bl-ink:#241D36;--bl-ink2:#14101F;--bl-cyan:#00FFE2;--bl-lime:#B0FE04;--bl-muted:#6b6f7b}

/* ============ Encabezado + destacados (bento) ============ */
.bB{padding:9em 0 3em}
.bB__head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3em;align-items:end;margin-bottom:2.2em}
.bB__title{font-size:clamp(4em,11vw,9em);font-weight:900;line-height:.82;letter-spacing:-.06em;color:var(--bl-ink)}
.bB__title span{color:var(--bl-cyan);-webkit-text-stroke:2px var(--bl-ink)}
.bB__right{min-width:0}
.bB__right p{font-size:1.08em;line-height:1.55;color:var(--bl-muted);max-width:520px}
.bB__cats{display:flex;flex-wrap:wrap;gap:.5em;margin-top:1.1em}
.bB__cats a{padding:.55em 1.05em;border-radius:2em;border:1px solid rgba(36,29,54,.14);background:#fff;font-size:.85em;font-weight:700;color:var(--bl-ink);text-decoration:none;transition:all .25s}
.bB__cats a:hover,.bB__cats a.is-on{background:var(--bl-ink);color:#fff;border-color:var(--bl-ink)}
.bB__bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:1.1em}
.bB__tile{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:1.8em;overflow:hidden;border:1px solid rgba(36,29,54,.07);box-shadow:0 20px 50px -30px rgba(36,29,54,.35);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.bB__tile:hover{transform:translateY(-4px);box-shadow:0 30px 60px -28px rgba(36,29,54,.45)}
.bB__tile--1{grid-column:span 2;grid-row:span 2;background:var(--bl-ink);color:#fff}
.bB__tile--2{grid-column:span 2;flex-direction:row}
.bB__media{display:block;aspect-ratio:16/9;overflow:hidden;background:#111}
.bB__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.bB__tile:hover .bB__media img{transform:scale(1.04)}
.bB__tile--2 .bB__media{flex:0 0 50%;aspect-ratio:16/9;align-self:center;margin:1em 0 1em 1em;border-radius:1.1em}
.bB__body{padding:1.2em 1.35em 1.4em;display:flex;flex-direction:column;flex:1}
.bB__tile--1 .bB__body{padding:1.7em 1.9em 2em}
.bB__meta{display:flex;flex-wrap:wrap;gap:.45em .6em;align-items:center;font-size:.76em;font-weight:700;color:var(--bl-muted)}
.bB__tile--1 .bB__meta{color:#a6a9c6}
.bB__chip{background:#EEF0F6;color:var(--bl-ink);padding:.3em .75em;border-radius:2em}
.bB__tile--1 .bB__chip{background:rgba(255,255,255,.1);color:#fff}
.bB__star{background:var(--bl-lime);color:var(--bl-ink);padding:.3em .75em;border-radius:2em}
.bB__h{font-size:1.06em;font-weight:800;line-height:1.25;letter-spacing:-.01em;margin-top:.7em}
.bB__h a{color:inherit;text-decoration:none}
.bB__tile--1 .bB__h{font-size:clamp(1.5em,2.3vw,2.1em);line-height:1.1}
.bB__tile--2 .bB__h{font-size:1.25em}
.bB__ex{margin-top:.6em;font-size:.92em;line-height:1.55;color:var(--bl-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bB__tile--1 .bB__ex{color:#b4b6d0}
.bB__go{position:absolute;right:1em;top:1em;width:2.6em;height:2.6em;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--bl-ink);box-shadow:0 6px 18px rgba(0,0,0,.18);transform:scale(.8);opacity:0;transition:all .3s}
.bB__go i{transform:rotate(-45deg)}
.bB__tile:hover .bB__go{opacity:1;transform:scale(1)}
@media (max-width:1100px){.bB__head{grid-template-columns:1fr;gap:1em}.bB__bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bB__tile--1{grid-row:auto;flex-direction:row}.bB__tile--1 .bB__media{flex:0 0 52%;aspect-ratio:16/9;align-self:center;margin:1.1em 0 1.1em 1.1em;border-radius:1.1em}.bB__tile--1 .bB__body{justify-content:center}}
@media (max-width:640px){.bB{padding:7em 0 2em}.bB__bento{grid-template-columns:1fr}.bB__tile--1,.bB__tile--2{grid-column:auto}.bB__tile--1{flex-direction:column}.bB__tile--1 .bB__media{flex:none;aspect-ratio:16/9;margin:0;border-radius:0;align-self:stretch}.bB__tile--2{flex-direction:column}.bB__tile--2 .bB__media{aspect-ratio:16/9;margin:0;border-radius:0;flex:none;align-self:stretch}
  .bB__tile:nth-child(n+3){flex-direction:row;align-items:center;border-radius:1.2em}.bB__tile:nth-child(n+3) .bB__media{flex:0 0 42%;aspect-ratio:16/9;align-self:center;margin:.7em 0 .7em .7em;border-radius:.8em}.bB__tile:nth-child(n+3) .bB__body{padding:.9em 1em}.bB__tile:nth-child(n+3) .bB__h{font-size:.95em;margin-top:.45em}.bB__cats{flex-wrap:nowrap;overflow-x:auto;margin-right:-1em;padding-right:1em;scrollbar-width:none}.bB__cats a{flex:none}}

/* Encabezado del listado */
.c-BlogList__head{display:flex;align-items:baseline;justify-content:space-between;gap:1em;margin:0 0 2.2em;padding-bottom:1em;border-bottom:1px solid rgba(36,29,54,.1)}
.c-BlogList__head h2{font-size:1.5em;font-weight:800;color:var(--bl-ink);letter-spacing:-.01em}
.c-BlogList__head span{font-size:.88em;color:#7a7e8a;font-weight:600}
.c-BlogList__clear{font-size:.55em;font-weight:700;margin-left:.6em;color:var(--bl-muted);text-decoration:none;vertical-align:middle;border:1px solid rgba(36,29,54,.14);padding:.3em .8em;border-radius:2em}
.c-BlogList__clear:hover{background:var(--bl-ink);color:#fff}
.c-BlogEmpty{padding:3em 0;color:var(--bl-muted)}
