/* ==========================================================================
   Blog público · Mario G. González Guerra
   Usa la paleta y la tipografía (Trajan) del sitio. Todo acotado a .bl-*.
   ========================================================================== */

:root {
  --bl-navy:   #1E1E2A;
  --bl-accent: #b44e4e;   /* bordó */
  --bl-gold:   #E4CA88;
  --bl-ink:    #3a3a44;
  --bl-muted:  #7b7b86;
  --bl-line:   #e7e5e0;
  --bl-paper:  #faf9f7;
  --bl-card-sh: 0 10px 34px rgba(30, 30, 42, .08);
}

/* ---------- Encabezado de página ---------- */
.bl-hero {
  background: linear-gradient(160deg, #1E1E2A 0%, #2a2a3d 100%);
  color: #fff;
  padding: 48px 0 52px;
}
.bl-hero .container { max-width: 1000px; }
.bl-crumbs { font-size: .8rem; letter-spacing: .04em; color: rgba(255, 255, 255, .6); margin-bottom: 18px; }
.bl-crumbs a { color: var(--bl-gold); text-decoration: none; }
.bl-crumbs a:hover { text-decoration: underline; }
.bl-crumbs span { margin: 0 8px; opacity: .5; }
.bl-hero__eyebrow {
  text-transform: uppercase; letter-spacing: .22em; font-size: .72rem;
  color: var(--bl-gold); margin-bottom: 12px;
}
.bl-hero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.1; margin: 0; }
.bl-hero__lead { margin-top: 16px; max-width: 70ch; color: rgba(255, 255, 255, .82); font-size: 1.05rem; line-height: 1.6; }

/* ---------- Chips de categorías ---------- */
.bl-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.bl-chips a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .85); text-decoration: none;
  font-size: .85rem; transition: .2s;
}
.bl-chips a small { opacity: .6; font-size: .78em; }
.bl-chips a:hover { border-color: var(--bl-gold); color: #fff; }
.bl-chips a.is-current { background: var(--bl-gold); border-color: var(--bl-gold); color: #1E1E2A; font-weight: 600; }
.bl-chips a.is-current small { opacity: .7; }

/* ---------- Listado ---------- */
.bl-list { padding: 56px 0; background: var(--bl-paper); }
.bl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}

/* Portadas */
.bl-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #ececec; }
.bl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.bl-cover--marca {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 20% 0%, #2a2a3d 0%, #1E1E2A 70%);
}
.bl-cover__mono {
  font-family: "trajan-pro-3", serif; font-size: 2.6rem; letter-spacing: .12em;
  color: var(--bl-gold); opacity: .85;
}
.bl-cover__tag {
  position: absolute; left: 14px; bottom: 14px;
  background: var(--bl-accent); color: #fff;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 4px;
}

/* Tarjeta */
.bl-card { background: #fff; border: 1px solid var(--bl-line); border-radius: 12px; overflow: hidden; box-shadow: var(--bl-card-sh); transition: transform .25s, box-shadow .25s; }
.bl-card:hover { transform: translateY(-5px); box-shadow: 0 20px 48px rgba(30, 30, 42, .14); }
.bl-card:hover .bl-cover img { transform: scale(1.05); }
.bl-card__link { display: block; color: inherit; text-decoration: none; }
.bl-card__body { padding: 20px 22px 24px; }
.bl-meta { display: flex; align-items: center; gap: 12px; font-size: .78rem; color: var(--bl-muted); margin-bottom: 10px; }
.bl-meta__cat { color: var(--bl-accent); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.bl-card__title { font-size: 1.18rem; line-height: 1.3; color: var(--bl-navy); margin: 0 0 10px; }
.bl-card__excerpt { font-size: .93rem; line-height: 1.6; color: var(--bl-ink); margin: 0 0 14px; }
.bl-card__more { display: inline-flex; align-items: center; gap: 7px; color: var(--bl-accent); font-weight: 600; font-size: .9rem; }
.bl-card:hover .bl-card__more i { transform: translateX(4px); }
.bl-card__more i { transition: transform .25s; }

/* Destacada (primera, ancha) */
.bl-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; background: #fff; border: 1px solid var(--bl-line); border-radius: 14px; overflow: hidden; box-shadow: var(--bl-card-sh); margin-bottom: 32px; }
.bl-featured .bl-cover { aspect-ratio: auto; height: 100%; min-height: 280px; }
.bl-featured__body { padding: 34px 38px; display: flex; flex-direction: column; justify-content: center; }
.bl-featured__title { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.2; color: var(--bl-navy); margin: 8px 0 14px; }
.bl-featured__title a { color: inherit; text-decoration: none; }
.bl-featured__title a:hover { color: var(--bl-accent); }
.bl-featured__excerpt { color: var(--bl-ink); line-height: 1.65; margin-bottom: 22px; }

/* Paginación */
.bl-pager { display: flex; justify-content: center; gap: 8px; margin-top: 44px; }
.bl-pager a {
  min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bl-line); border-radius: 8px; background: #fff;
  color: var(--bl-navy); text-decoration: none; font-weight: 600; transition: .2s;
}
.bl-pager a:hover { border-color: var(--bl-accent); color: var(--bl-accent); }
.bl-pager a.is-current { background: var(--bl-navy); border-color: var(--bl-navy); color: #fff; }

/* Vacío */
.bl-empty { text-align: center; padding: 70px 20px; color: var(--bl-muted); }
.bl-empty .bl-cover__mono { font-size: 3rem; color: var(--bl-navy); opacity: .25; display: block; margin-bottom: 18px; }
.bl-empty h2 { color: var(--bl-navy); margin-bottom: 8px; }

/* ==========================================================================
   NOTA
   ========================================================================== */

.bl-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1030; background: transparent; }
.bl-progress span { display: block; height: 100%; width: 100%; background: var(--bl-accent); transform: scaleX(0); transform-origin: 0 50%; }

.bl-nota__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; color: rgba(255, 255, 255, .78); font-size: .9rem; }
.bl-nota__autor { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: #fff; }

.bl-nota__cover { max-width: 1000px; margin: -34px auto 0; padding: 0 16px; }
.bl-nota__cover .bl-cover { aspect-ratio: 16 / 8; border-radius: 14px; box-shadow: var(--bl-card-sh); }

.bl-nota__body { padding: 50px 0 10px; }
.bl-nota__body .container { max-width: 1000px; }
.bl-nota__grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 46px; align-items: start; }

/* Índice + compartir */
.bl-toc { position: sticky; top: 130px; }
.bl-toc__label { text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; color: var(--bl-muted); margin-bottom: 12px; }
.bl-toc ol { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: toc; }
.bl-toc li { margin-bottom: 10px; }
.bl-toc a { display: flex; gap: 10px; color: var(--bl-ink); text-decoration: none; font-size: .9rem; line-height: 1.4; transition: color .2s; }
.bl-toc a span { color: var(--bl-accent); font-weight: 700; font-size: .8rem; }
.bl-toc a:hover, .bl-toc a.is-active { color: var(--bl-accent); }
.bl-share a, .bl-share button {
  display: block; width: 100%; text-align: left; margin-bottom: 8px; padding: 0;
  background: none; border: 0; color: var(--bl-ink); font: inherit; font-size: .9rem; cursor: pointer; text-decoration: none;
}
.bl-share a:hover, .bl-share button:hover { color: var(--bl-accent); }

/* Cuerpo de la nota */
.bl-prose { font-size: 1.07rem; line-height: 1.85; color: var(--bl-ink); }
.bl-prose > h2 { font-size: 1.6rem; color: var(--bl-navy); margin: 1.8em 0 .6em; line-height: 1.25; }
.bl-prose > h3 { font-size: 1.25rem; color: var(--bl-navy); margin: 1.5em 0 .5em; }
.bl-prose p { margin: 0 0 1.2em; }
.bl-prose a { color: var(--bl-accent); text-decoration: underline; text-underline-offset: 3px; }
.bl-prose ul, .bl-prose ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.bl-prose li { margin-bottom: .5em; }
.bl-prose li::marker { color: var(--bl-accent); }
.bl-prose img { max-width: 100%; height: auto; border-radius: 10px; margin: 1.6em 0; }
.bl-prose blockquote { margin: 1.6em 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--bl-gold); color: var(--bl-navy); font-size: 1.15rem; font-style: italic; }
.bl-prose hr { border: 0; border-top: 1px solid var(--bl-line); margin: 2.2em 0; }
.bl-prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .96em; }
.bl-prose th, .bl-prose td { border-bottom: 1px solid var(--bl-line); padding: 11px 13px; text-align: left; }

/* Bloque de zonas relacionadas */
.bl-area { margin: 2.4em 0; padding: 24px 26px; background: var(--bl-paper); border: 1px solid var(--bl-line); border-radius: 12px; }
.bl-area__label { font-size: 1.1rem; color: var(--bl-navy); font-weight: 700; margin: 0 0 4px; }
.bl-area__text { color: var(--bl-muted); margin: 0 0 14px; font-size: .95rem; }
.bl-area ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.bl-area a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; background: #fff; border: 1px solid var(--bl-line); border-radius: 999px; color: var(--bl-navy); text-decoration: none; font-size: .9rem; transition: .2s; }
.bl-area a:hover { border-color: var(--bl-accent); color: var(--bl-accent); }

/* Firma */
.bl-firma { display: flex; gap: 18px; align-items: center; margin: 2.6em 0 1.4em; padding: 24px; background: var(--bl-navy); border-radius: 14px; color: #fff; }
.bl-firma img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.bl-firma__nombre { font-family: "trajan-pro-3", serif; font-size: 1.15rem; margin: 0; }
.bl-firma__rol { color: rgba(255, 255, 255, .7); font-size: .88rem; margin: 2px 0 8px; }
.bl-firma__wa { color: var(--bl-gold); text-decoration: none; font-weight: 600; font-size: .92rem; }
.bl-firma__wa:hover { text-decoration: underline; }

.bl-disclaimer { font-size: .85rem; color: var(--bl-muted); font-style: italic; border-top: 1px solid var(--bl-line); padding-top: 16px; }

/* Relacionadas */
.bl-related { background: var(--bl-paper); }
.bl-related__eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: .75rem; color: var(--bl-accent); margin-bottom: 8px; }
.bl-related__title { color: var(--bl-navy); margin-bottom: 30px; }

/* CTA */
.bl-cta__box { background: linear-gradient(160deg, #1E1E2A 0%, #2a2a3d 100%); border-radius: 18px; padding: 48px 40px; text-align: center; color: #fff; }
.bl-cta__box h2 { color: #fff; margin: 0 0 12px; }
.bl-cta__box p { color: rgba(255, 255, 255, .82); max-width: 60ch; margin: 0 auto 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .bl-featured { grid-template-columns: 1fr; }
  .bl-featured .bl-cover { min-height: 220px; }
  .bl-nota__grid { grid-template-columns: 1fr; gap: 0; }
  .bl-toc { position: static; margin-bottom: 30px; }
  .bl-toc ol { display: none; }
}