/* ==========================================================
   BIBLIOTECA BPO — Newsletter — componentes adicionales
   Extiende style-v3.css (mismas variables de color/tipografía)
   ========================================================== */

/* ---------- Índice: grilla de ediciones ---------- */
.nl-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; align-items:stretch;}
.nl-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; height:100%;
  transition:transform .15s ease, box-shadow .15s ease;
}
.nl-card:hover{transform:translateY(-3px); box-shadow:0 16px 32px rgba(20,30,50,.08);}
.nl-card .nl-head{
  background:linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff; padding:22px 20px; position:relative; overflow:hidden;
  height:172px; display:flex; flex-direction:column; justify-content:flex-start; flex-shrink:0;
}
.nl-card .nl-head::before{
  content:""; position:absolute; top:-40%; right:-20%; width:160px; height:160px;
  background:radial-gradient(circle, rgba(79,195,247,0.20), transparent 70%);
}
.nl-card .nl-num{
  position:relative; display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.08em;
  color:var(--sky); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  padding:5px 12px; border-radius:100px; margin-bottom:14px; flex-shrink:0; width:fit-content;
}
.nl-card .nl-date{position:relative; display:block; font-size:11.5px; color:#aeb9c9; margin-top:auto; padding-top:8px;}
.nl-card h4{
  position:relative; color:#fff; font-size:16.5px; line-height:1.3; font-weight:700; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.nl-card .body{padding:18px 20px; display:flex; flex-direction:column; flex:1;}
.nl-card p.summary{font-size:13px; color:var(--gray); line-height:1.55; margin-bottom:16px; flex:1;}
.nl-card .body a.btn{margin-top:auto; align-self:flex-start;}

/* ---------- Contenido de edición ---------- */
.nl-article{max-width:760px; margin:0 auto;}
.nl-article .eyebrow-block{margin-bottom:6px;}
.nl-article h2{font-size:22px; margin:40px 0 14px;}
.nl-article h2:first-child{margin-top:0;}
.nl-article p{font-size:15.5px; color:var(--ink); margin-bottom:16px; line-height:1.7;}
.nl-article .hook-line{font-size:17px; color:var(--navy); font-weight:600; font-style:italic; margin-bottom:16px; line-height:1.5;}

.nl-pullquote{
  border-left:3px solid var(--gold); background:var(--cream); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:20px 24px; margin:28px 0; font-size:16px; font-style:italic; color:var(--navy); font-weight:600; line-height:1.6;
}
.nl-pullquote cite{display:block; margin-top:10px; font-size:12.5px; font-style:normal; font-weight:600; color:var(--teal);}

.nl-compare{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:24px 0;}
.nl-compare .col{padding:20px 22px;}
.nl-compare .col.neg{background:#fbf6f2;}
.nl-compare .col.pos{background:#eef7f6;}
.nl-compare h5{font-size:13.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px;}
.nl-compare .col.neg h5{color:#a05a2c;}
.nl-compare .col.pos h5{color:var(--teal);}
.nl-compare ul{list-style:none; margin:0; padding:0;}
.nl-compare li{font-size:13.5px; color:var(--ink); padding:7px 0; border-bottom:1px dashed var(--line); line-height:1.5;}
.nl-compare li:last-child{border-bottom:none;}
@media (max-width:700px){.nl-compare{grid-template-columns:1fr;} .nl-compare .col.neg{border-bottom:1px solid var(--line);}}

.nl-testimonial{
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--navy);
  border-radius:0 var(--radius) var(--radius) 0; padding:20px 24px; margin:24px 0;
}
.nl-testimonial .who{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); margin-bottom:10px;}
.nl-testimonial p{font-size:15px; font-style:italic; color:var(--navy); font-weight:600; margin:0; line-height:1.6;}

.nl-qsteps{list-style:none; margin:24px 0; padding:0; display:flex; flex-direction:column; gap:12px;}
.nl-qsteps li{
  display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:16px 18px;
}
.nl-qsteps .n{
  flex-shrink:0; width:32px; height:32px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px;
}
.nl-qsteps .txt b{display:block; font-size:14.5px; color:var(--navy); margin-bottom:4px; line-height:1.4;}
.nl-qsteps .txt span{font-size:13px; color:var(--gray); line-height:1.5;}

.nl-principle{
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color:#fff;
  border-radius:var(--radius); padding:26px 28px; margin:32px 0;
}
.nl-principle .tag{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--sky); margin-bottom:12px;}
.nl-principle p{color:#e4e9f2; font-size:15.5px; margin:0; line-height:1.7;}

.nl-reflect{list-style:none; margin:24px 0; padding:0;}
.nl-reflect li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink); padding:9px 0; border-bottom:1px dashed var(--line); line-height:1.55;}
.nl-reflect li:last-child{border-bottom:none;}
.nl-reflect li .dm{color:var(--gold); font-weight:800; flex-shrink:0;}

.nl-signoff{border-top:1px solid var(--line); margin-top:36px; padding-top:24px;}
.nl-signoff .closing{font-size:15.5px; color:var(--ink); line-height:1.7; margin-bottom:20px;}
.nl-signoff .card{
  background:var(--cream); border-radius:var(--radius); padding:20px 22px; display:flex; flex-direction:column; gap:2px;
}
.nl-signoff .card b{font-size:15px; color:var(--navy);}
.nl-signoff .card span{font-size:12.5px; color:var(--gray);}
.nl-signoff .card em{font-size:13px; color:var(--teal); font-style:italic; margin-top:8px;}

.nl-nav{display:flex; justify-content:space-between; align-items:center; gap:16px; margin:40px 0 0; flex-wrap:wrap;}
.nl-nav a{font-size:13.5px; font-weight:700; color:var(--teal);}
.nl-nav a:hover{text-decoration:underline;}

.nl-book-cta{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--cream); border:1px solid var(--gold); border-radius:var(--radius);
  padding:22px 24px; margin:36px 0 0;
}
.nl-book-cta .txt p.eyebrow{margin-bottom:6px;}
.nl-book-cta .txt h5{font-size:16px; color:var(--navy); margin:0 0 4px; font-weight:800;}
.nl-book-cta .txt span{font-size:13px; color:var(--gray);}
.nl-book-cta .btn{flex-shrink:0;}