.news-list{

  padding:var(--space-8) 0;

}

.news-filters{

  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:var(--space-6);

}

.news-filter{

  padding:8px 18px;

  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:var(--white);

  color:var(--text);
  font-weight:600;
  font-size:.85rem;

  cursor:pointer;

  transition:background var(--transition), color var(--transition), border-color var(--transition);

}

.news-filter:hover{

  border-color:var(--primary);

}

.news-filter.active{

  background:var(--primary);
  border-color:var(--primary);
  color:var(--white);

}

.news-grid{

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  margin-top:var(--space-6);

}

.news-empty{

  grid-column:1 / -1;
  text-align:center;
  color:var(--gray);
  padding:var(--space-6) 0;

}

@media (max-width:992px){

  .news-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

@media (max-width:768px){

  .news-grid{
    grid-template-columns:1fr;
  }

}


/* ===========================
   PAGINACIÓN
=========================== */

.pagination{

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:var(--space-7);

}

.pagination-btn,
.pagination-nav{

  min-width:38px;
  height:38px;
  padding:0 4px;

  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--white);

  font-weight:600;
  font-size:.9rem;
  color:var(--text);

  cursor:pointer;

  transition:background var(--transition), color var(--transition), border-color var(--transition);

}

.pagination-btn:hover,
.pagination-nav:hover:not(:disabled){

  border-color:var(--primary);

}

.pagination-btn.active{

  background:var(--primary);
  border-color:var(--primary);
  color:var(--white);

}

.pagination-nav:disabled{

  opacity:.4;
  cursor:not-allowed;

}

.pagination-ellipsis{

  color:var(--gray);
  padding:0 4px;

}


/* ===========================
   ARTÍCULO INDIVIDUAL
=========================== */

.post-article{

  padding:var(--space-8) 0;

}

.post-article-header{

  max-width:760px;
  margin:0 auto var(--space-6);

}

.post-article-header .post-meta{

  margin-bottom:var(--space-3);

}

.post-article-header h1{

  font-size:clamp(1.8rem,3.5vw,2.6rem);
  line-height:1.25;
  margin-bottom:var(--space-3);

}

.post-article-cover{

  max-width:900px;
  margin:0 auto var(--space-6);

  height:320px;
  border-radius:var(--radius);

  display:flex;
  align-items:flex-end;
  padding:var(--space-5);

}

.post-article-body{

  max-width:760px;
  margin:0 auto;

  color:var(--text);
  line-height:1.9;

}

.post-article-body p{

  margin-bottom:var(--space-4);

}

.post-article-body h3{

  margin:var(--space-6) 0 var(--space-3);

}


/* ===========================
   COMENTARIOS
=========================== */

.comments-section{

  max-width:760px;
  margin:var(--space-7) auto 0;
  padding-top:var(--space-6);
  border-top:1px solid var(--border);

}

.comments-section h3{

  margin-bottom:var(--space-5);

}

.comments-empty{

  color:var(--gray);
  font-size:var(--fs-sm);

}

.comment-form{

  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:var(--space-7);

}

.comment-form input,
.comment-form textarea{

  width:100%;
  padding:var(--space-3);
  border:1px solid var(--border-input);
  border-radius:var(--radius-sm);
  font-family:inherit;
  transition:border-color var(--transition);

}

.comment-form input:focus,
.comment-form textarea:focus{

  border-color:var(--secondary);

}

.comment-form textarea{

  min-height:90px;
  resize:vertical;

}

.comment-form .btn{

  align-self:flex-start;

}

.comment-list{

  display:flex;
  flex-direction:column;
  gap:20px;

}

.comment-item{

  display:flex;
  gap:14px;

}

.comment-avatar{

  width:44px;
  height:44px;
  border-radius:50%;

  background:#eef4ff;
  color:var(--primary);

  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:700;
  flex-shrink:0;

}

.comment-body{

  background:var(--light);
  border-radius:var(--radius-sm);
  padding:var(--space-4);
  flex:1;

}

.comment-body-head{

  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;

}

.comment-body-head strong{

  color:var(--text);

}

.comment-body-head span{

  color:var(--gray);
  font-size:.8rem;

}

.comment-body p{

  color:var(--text);
  line-height:1.6;
  margin:0;

}

.comment-badge{

  display:inline-block;
  padding:2px 10px;
  border-radius:var(--radius-pill);
  background:var(--secondary);
  color:var(--text-on-accent);
  font-size:.7rem;
  font-weight:700;

}


/* ===========================
   LINK "EQUIPO" EN EL FOOTER
=========================== */

.footer-admin-link{

  opacity:.6;
  font-size:.8rem;

}