/* ═══════════════════════════════════════════════
   SPONSOREALO — css/blog.css
   Estilos: blog listado + detalle de nota
   Hereda: fonts/fonts.css + css/styles.css
   Versión: 2026
═══════════════════════════════════════════════ */


/* ─────────────────────────────────────────
   HERO BLOG
───────────────────────────────────────── */
#hero-blog {
  min-height: 70svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 5.5rem 5vw 5rem;
  position: relative;
  overflow: hidden;
}

#hero-blog .h-blob-1 { width:680px; height:680px; background:var(--pink); opacity:.07; top:-200px; right:-80px; }
#hero-blog .h-blob-2 { width:520px; height:520px; background:var(--cyan); opacity:.08; bottom:-100px; left:-60px; }

.blog-breadcrumb {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--fh); font-size: .6rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin-bottom: 2rem;
}
.blog-breadcrumb a       { color: rgba(255,255,255,.35); transition: color .2s; }
.blog-breadcrumb a:hover { color: var(--cyan); }
.blog-breadcrumb .bc-sep { width:14px; height:1px; background:rgba(255,255,255,.2); }
.blog-breadcrumb .bc-cur {
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.blog-eyebrow {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--fh); font-size: .63rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 1.6rem;
}
.blog-eyebrow::before { content:''; width:24px; height:1px; background:var(--grad); flex-shrink:0; }

.blog-h1 {
  position: relative; z-index: 2;
  font-family: var(--fh); font-weight: 800;
  font-size: clamp(3rem, 7vw, 8.5rem);
  line-height: .93; letter-spacing: -.036em;
  max-width: 820px; margin-bottom: 2rem;
}
.blog-h1 .line-solid  { color: var(--white); display: block; }
.blog-h1 .line-grad   { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; display:block; }
.blog-h1 .line-outline{ -webkit-text-stroke:2px rgba(255,255,255,.16); color:transparent; display:block; }

.blog-sub {
  position: relative; z-index: 2;
  font-size: 1.02rem; color: var(--dim);
  line-height: 1.8; max-width: 520px;
}


/* ─────────────────────────────────────────
   ARTÍCULO DESTACADO (featured post)
───────────────────────────────────────── */
#blog-featured {
  padding: 5rem 5vw 0;
}

.feat-post {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--card);
  transition: border-color .3s;
}
.feat-post:hover { border-color: rgba(1,229,254,.2); }

.feat-post-img {
  position: relative;
  overflow: hidden;
  display: block;
  min-height: 420px;
}
.feat-post-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: brightness(.72) saturate(.85);
  transition: transform .7s var(--ease), filter .5s;
}
.feat-post:hover .feat-post-img img {
  transform: scale(1.04);
  filter: brightness(.85) saturate(1);
}

/* badge "DESTACADO" sobre la imagen */
.feat-badge {
  position: absolute; top: 1.4rem; left: 1.4rem;
  font-family: var(--fh); font-size: .58rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  background: var(--grad); color: #000;
  padding: .3rem .8rem; border-radius: var(--r-pill);
}

.feat-post-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: 3rem 3.2rem;
}
.feat-post-cat {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--fh); font-size: .6rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}
.feat-post-cat::before { content:''; width:18px; height:1px; background:var(--grad); }
.feat-post-title {
  font-family: var(--fh); font-weight: 800;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  line-height: 1.15; letter-spacing: -.025em;
  color: var(--white); margin-bottom: 1rem;
}
.feat-post-excerpt {
  font-size: .88rem; color: var(--dim);
  line-height: 1.8; margin-bottom: 1.8rem;
}
.feat-post-meta {
  display: flex; align-items: center; gap: 1.2rem;
  margin-bottom: 2rem;
}
.feat-post-meta .meta-sep { width: 1px; height: 14px; background: var(--border2); }
.feat-post-meta span { font-size: .75rem; color: var(--dim2); font-family: var(--fh); }
.feat-post-meta span strong { color: var(--dim); font-weight: 600; }


/* ─────────────────────────────────────────
   BARRA DE FILTROS — sticky
───────────────────────────────────────── */
#blog-filter-bar {
  position: sticky;
  top: 64px; z-index: 90;
  background: rgba(8,8,16,.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  padding: 0 5vw;
  display: flex; align-items: center; gap: 0;
  overflow-x: auto; scrollbar-width: none;
  margin-top: 3.5rem;
}
#blog-filter-bar::-webkit-scrollbar { display: none; }

/* Reutiliza las clases .filter-label / .filter-btn / .filter-count / .filter-count
   de portfolio.css si está cargado, o se redefinen aquí para independencia */
.blog-filter-label {
  font-family: var(--fh); font-size: .6rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim2); white-space: nowrap;
  padding-right: 1.4rem;
  border-right: 1px solid var(--border);
  margin-right: 1.2rem; flex-shrink: 0;
}
.blog-filter-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--fh); font-size: .72rem; font-weight: 600;
  color: var(--dim); letter-spacing: .04em;
  padding: 1.1rem 1.2rem;
  position: relative; white-space: nowrap; flex-shrink: 0;
  transition: color .2s;
}
.blog-filter-btn::after {
  content: ''; position: absolute;
  bottom: 0; left: 1.2rem; right: 1.2rem; height: 2px;
  background: var(--grad);
  transform: scaleX(0); transform-origin: center;
  transition: transform .28s var(--ease);
}
.blog-filter-btn:hover { color: var(--white); }
.blog-filter-btn.active { color: var(--white); }
.blog-filter-btn.active::after { transform: scaleX(1); }

.blog-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--card-hi); border: 1px solid var(--border2);
  font-size: .52rem; font-weight: 800;
  color: var(--dim2); margin-left: .4rem;
  vertical-align: middle;
  transition: background .2s, color .2s, border-color .2s;
}
.blog-filter-btn.active .blog-filter-count {
  background: var(--grad); color: #000; border-color: transparent;
}


/* ─────────────────────────────────────────
   GRID DE ARTÍCULOS — 3 columnas
───────────────────────────────────────── */
#blog-grid {
  padding: 4rem 5vw 8rem;
}

.blog-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* ── CARD DE ARTÍCULO ── */
.article-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .35s, transform .35s, box-shadow .35s,
              opacity .4s;
  text-decoration: none; color: inherit;
}
.article-card.hidden { display: none; }
.article-card.entering { animation: artIn .4s var(--ease) both; }
@keyframes artIn {
  from { opacity:0; transform:translateY(14px) scale(.98); }
  to   { opacity:1; transform:none; }
}
.article-card:hover {
  border-color: rgba(1,229,254,.2);
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(1,229,254,.06);
}

/* Thumb */
.ac-thumb {
  position: relative; overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--card-hi);
  flex-shrink: 0;
}
.ac-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.72) saturate(.82);
  transition: transform .65s var(--ease), filter .4s;
  display: block;
}
.article-card:hover .ac-thumb img {
  transform: scale(1.05);
  filter: brightness(.88) saturate(1.05);
}

/* Categoría sobre la imagen */
.ac-cat {
  position: absolute; bottom: .9rem; left: .9rem;
  font-family: var(--fh); font-size: .55rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .28rem .75rem; border-radius: var(--r-pill);
  background: rgba(8,8,16,.72);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border2);
  color: var(--white);
  transition: background .25s, border-color .25s;
}
.article-card:hover .ac-cat {
  background: var(--grad);
  border-color: transparent;
  color: #000;
}

/* Tiempo estimado de lectura */
.ac-read {
  position: absolute; top: .9rem; right: .9rem;
  font-family: var(--fh); font-size: .55rem; font-weight: 700;
  color: rgba(255,255,255,.7);
  background: rgba(8,8,16,.55);
  backdrop-filter: blur(6px);
  padding: .25rem .65rem; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.1);
}

/* Cuerpo de la card */
.ac-body {
  padding: 1.5rem 1.6rem 1.8rem;
  display: flex; flex-direction: column; flex: 1;
}
.ac-meta {
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: .85rem;
}
.ac-meta span { font-size: .7rem; color: var(--dim2); font-family: var(--fh); }
.ac-meta .m-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border2); flex-shrink: 0; }

.ac-title {
  font-family: var(--fh); font-weight: 800;
  font-size: 1rem; line-height: 1.3;
  letter-spacing: -.015em; color: var(--white);
  margin-bottom: .7rem;
  transition: color .2s;
}
.article-card:hover .ac-title { color: var(--cyan); }

.ac-excerpt {
  font-size: .8rem; color: var(--dim);
  line-height: 1.78; flex: 1;
  margin-bottom: 1.4rem;

  /* clamp a 3 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer de card */
.ac-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.ac-author {
  display: flex; align-items: center; gap: .65rem;
}
.ac-author-ava {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--grad); overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fh); font-size: .6rem; font-weight: 800; color: #000;
}
.ac-author-ava img { width: 100%; height: 100%; object-fit: cover; }
.ac-author-name { font-family: var(--fh); font-size: .7rem; font-weight: 600; color: var(--dim); }

.ac-arrow {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--card-hi); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, border-color .25s, transform .25s;
  flex-shrink: 0;
}
.article-card:hover .ac-arrow {
  background: var(--grad); border-color: transparent; transform: scale(1.1);
}
.ac-arrow svg { width:12px; height:12px; stroke:#fff; fill:none; stroke-width:2.5; }
.article-card:hover .ac-arrow svg { stroke:#000; }

/* Vacío */
.blog-empty {
  grid-column: span 3; text-align: center;
  padding: 5rem 0; display: none;
}
.blog-empty.visible { display: block; }
.blog-empty p { color: var(--dim2); }


/* ─────────────────────────────────────────
   NEWSLETTER BANNER — entre el grid y footer
───────────────────────────────────────── */
#newsletter {
  margin: 0 5vw 8rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 3.5rem 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw; align-items: center;
  position: relative; overflow: hidden;
}
#newsletter::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 100% 0%, rgba(255,0,164,.07) 0%, transparent 65%);
  pointer-events: none;
}
.nl-copy h2 {
  font-family: var(--fh); font-size: clamp(1.6rem,2.8vw,2.4rem);
  font-weight: 800; letter-spacing: -.025em;
  margin-bottom: .8rem; line-height: 1.1;
}
.nl-copy p { font-size: .88rem; color: var(--dim); line-height: 1.75; }

.nl-form { display: flex; flex-direction: column; gap: .7rem; }
.nl-row   { display: flex; gap: .7rem; }
.nl-input {
  flex: 1; background: var(--card-hi);
  border: 1px solid var(--border2);
  border-radius: var(--r-md); padding: .85rem 1.2rem;
  font-family: var(--fh); font-size: .85rem; color: var(--white);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.nl-input::placeholder { color: var(--dim2); }
.nl-input:focus {
  border-color: rgba(1,229,254,.35);
  box-shadow: 0 0 0 3px rgba(1,229,254,.08);
}
.nl-disclaimer {
  font-size: .65rem; color: var(--dim2); line-height: 1.6;
}


/* ═══════════════════════════════════════════════
   BLOG DETALLE — css/blog.css (continúa)
═══════════════════════════════════════════════ */


/* ─────────────────────────────────────────
   HERO DETALLE DE NOTA
───────────────────────────────────────── */
#hero-nota {
  position: relative;
  height: 85svh; min-height: 600px;
  overflow: hidden;
}
.hn-media {
  position: absolute; inset: 0; z-index: 0;
}
.hn-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.38) saturate(.7);
}
.hn-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,8,16,.25) 0%,
    rgba(8,8,16,.1)  35%,
    rgba(8,8,16,.97) 100%
  );
}
.hn-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(1,229,254,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1,229,254,.04) 1px, transparent 1px);
  background-size: 64px 64px;
}
#hero-nota .blog-breadcrumb {
  position: absolute;
  top: 5.5rem;
  left: 5vw;
  z-index: 3;
  margin-bottom: 0;
}
.hn-content {
  position: absolute;
  top: 8rem;
  left: 0; right: 0;
  z-index: 2;
  padding: 0 5vw;
  max-width: 860px;
}
.hn-cat {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--fh); font-size: .6rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 1.2rem;
}
.hn-cat::before { content:''; width:20px; height:1px; background:var(--grad); }
.hn-title {
  font-family: var(--fh); font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 5rem);
  line-height: .96; letter-spacing: -.035em;
  color: var(--white); margin-bottom: 1.2rem;
}
.hn-meta {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.hn-meta .m-sep { width:1px; height:14px; background:rgba(255,255,255,.2); }
.hn-meta span { font-size: .75rem; color: rgba(255,255,255,.55); font-family: var(--fh); }
.hn-meta span strong { color: rgba(255,255,255,.8); font-weight: 600; }


/* ─────────────────────────────────────────
   LAYOUT NOTA — contenido + sidebar
───────────────────────────────────────── */
#nota-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 5vw;
  padding: 5rem 5vw 8rem;
  align-items: start;
  max-width: 1300px;
  margin: 0 auto;
}

/* ─── CONTENIDO EDITORIAL ─── */
.nota-article {}

/* Intro / lead */
.nota-lead {
  font-family: var(--fh); font-size: 1.18rem; font-weight: 600;
  line-height: 1.7; color: var(--white);
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.4rem;
}

/* Cuerpo de texto */
.nota-content h2 {
  font-family: var(--fh); font-size: clamp(1.3rem,2vw,1.85rem);
  font-weight: 800; letter-spacing: -.025em;
  color: var(--white); margin: 2.8rem 0 1rem;
  line-height: 1.2;
}
.nota-content h2 .grad { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

.nota-content h3 {
  font-family: var(--fh); font-size: 1.08rem; font-weight: 700;
  color: var(--white); margin: 2rem 0 .7rem;
}

.nota-content p {
  font-size: .95rem; color: var(--dim);
  line-height: 1.92; margin-bottom: 1.4rem;
}
.nota-content p strong { color: var(--white); font-weight: 600; }

.nota-content ul, .nota-content ol {
  margin: 0 0 1.4rem 1.2rem;
}
.nota-content li {
  font-size: .95rem; color: var(--dim);
  line-height: 1.85; margin-bottom: .5rem;
}
.nota-content li::marker { color: var(--cyan); }

/* Cita / blockquote */
.nota-content blockquote {
  margin: 2.4rem 0;
  padding: 1.8rem 2rem 1.8rem 2.4rem;
  border-left: 3px solid transparent;
  border-image: var(--grad) 1;
  background: var(--card);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.nota-content blockquote p {
  font-family: var(--fh); font-size: 1.05rem; font-weight: 600;
  color: var(--white); line-height: 1.6; margin-bottom: 0; font-style: italic;
}
.nota-content blockquote cite {
  display: block; margin-top: .7rem;
  font-size: .72rem; color: var(--dim2);
  font-style: normal; font-weight: 600;
  letter-spacing: .06em;
}

/* Highlight box — dato destacado */
.nota-highlight {
  background: var(--card);
  border: 1px solid rgba(1,229,254,.18);
  border-radius: var(--r-lg);
  padding: 1.8rem 2rem;
  margin: 2rem 0;
  display: flex; gap: 1.2rem; align-items: flex-start;
}
.nh-ico {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--r-xs);
  background: rgba(1,229,254,.1);
  border: 1px solid rgba(1,229,254,.2);
  display: flex; align-items: center; justify-content: center;
}
.nh-ico svg { width:18px; height:18px; stroke:var(--cyan); fill:none; stroke-width:1.8; }
.nh-text strong {
  display: block; font-family: var(--fh);
  font-size: .82rem; font-weight: 700; color: var(--white); margin-bottom: .3rem;
}
.nh-text p { font-size: .8rem; color: var(--dim); line-height: 1.7; margin: 0; }

/* Tags de la nota */
.nota-tags {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.nota-tag {
  font-family: var(--fh); font-size: .58rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .85rem; border-radius: var(--r-pill);
  border: 1px solid var(--border2); color: var(--dim);
  transition: border-color .2s, color .2s, background .2s;
}
.nota-tag:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(1,229,254,.05); }

/* Compartir */
.nota-share {
  display: flex; align-items: center; gap: .8rem;
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.nota-share-label {
  font-family: var(--fh); font-size: .62rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--dim2);
}
.share-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--card-hi); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s;
  font-family: var(--fh); font-size: .65rem; font-weight: 700; color: var(--dim);
  text-decoration: none;
}
.share-btn:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(1,229,254,.06); }

/* ─── SIDEBAR NOTA ─── */
.nota-sidebar {
  position: sticky; top: 88px;
  display: flex; flex-direction: column; gap: 1rem;
}

/* Índice / tabla de contenidos */
.toc-box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden;
}
.toc-header {
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--card-hi);
  font-family: var(--fh); font-size: .6rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--dim2);
}
.toc-list {
  padding: 1rem 0; list-style: none;
}
.toc-list li a {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem 1.6rem;
  font-family: var(--fh); font-size: .78rem; font-weight: 600;
  color: var(--dim); line-height: 1.4;
  transition: color .2s, background .2s;
  text-decoration: none;
}
.toc-list li a:hover { color: var(--white); background: var(--card-hi); }
.toc-list li a.active { color: var(--cyan); }
.toc-num {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--card-hi); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: .5rem; font-weight: 800; color: var(--dim2);
}
.toc-list li a.active .toc-num {
  background: var(--grad); border-color: transparent; color: #000;
}

/* Info del autor */
.autor-box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 1.6rem;
  text-align: center;
}
.autor-ava {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--grad); margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fh); font-size: 1.2rem; font-weight: 800; color: #000;
  overflow: hidden;
}
.autor-ava img { width:100%; height:100%; object-fit:cover; }
.autor-name {
  font-family: var(--fh); font-size: .92rem; font-weight: 800;
  color: var(--white); margin-bottom: .2rem;
}
.autor-role { font-size: .72rem; color: var(--dim2); margin-bottom: .9rem; }
.autor-bio  { font-size: .78rem; color: var(--dim); line-height: 1.7; }

/* CTA sidebar nota */
.nota-cta-box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 1.6rem;
  position: relative; overflow: hidden;
}
.nota-cta-box::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 100% 0%, rgba(255,0,164,.07) 0%, transparent 65%);
  pointer-events: none;
}
.nota-cta-box p {
  font-size: .82rem; color: var(--dim); line-height: 1.7;
  margin-bottom: 1rem; position: relative;
}
.nota-cta-box .btn-primary { width:100%; justify-content:center; }


/* ─────────────────────────────────────────
   NOTAS RELACIONADAS (en detalle)
───────────────────────────────────────── */
#notas-relacionadas {
  padding: 0 5vw 8rem;
  border-top: 1px solid var(--border);
  padding-top: 6rem;
}
.rel-articles-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-top: 2.5rem;
}


/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 1100px) {
  .feat-post              { grid-template-columns: 1fr; }
  .feat-post-img          { min-height: 280px; }
  .feat-post-img img      { position: static; }
  .blog-articles-grid     { grid-template-columns: repeat(2, 1fr); }
  .blog-empty             { grid-column: span 2; }
  #newsletter             { grid-template-columns: 1fr; gap: 2rem; }
  #nota-body              { grid-template-columns: 1fr; }
  .nota-sidebar           { position: static; }
  .rel-articles-grid      { grid-template-columns: repeat(2, 1fr); }
  #hero-nota              { height: 60svh; }
}
@media (max-width: 640px) {
  .blog-h1                { font-size: clamp(2.4rem,13vw,4rem); }
  .blog-articles-grid     { grid-template-columns: 1fr; gap: .8rem; }
  .blog-empty             { grid-column: span 1; }
  .rel-articles-grid      { grid-template-columns: 1fr; }
  #newsletter             { padding: 2rem 1.6rem; margin: 0 0 6rem; border-radius: 0; border-left:none; border-right:none; }
  .nl-row                 { flex-direction: column; }
  #blog-filter-bar        { top: 56px; }
  .hn-title               { font-size: clamp(1.8rem,9vw,3rem); }
  #nota-body              { padding: 3rem 5vw 5rem; }
}