/* ==========================================================================
   New Era — blog (listado, filtro, buscador y artículo)
   Usa la misma paleta, tipografía y componentes que el resto del sitio.
   ========================================================================== */

.ne-blog__body, .ne-article__body, .ne-related {
  --ne-pad: max(12px, calc((100% - 1272px) / 2));
  padding-left: var(--ne-pad);
  padding-right: var(--ne-pad);
}

/* Banner: descripción de la categoría */
.ne-banner__desc { margin: 16px 0 0 !important; font-size: 18px; line-height: 34px; color: rgba(255, 255, 255, .8); }

/* ---------- Filtro por categorías + buscador ---------- */
.ne-blog__body { padding-top: 8px; padding-bottom: 96px; }
.ne-blogbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--ne-line);
}
.ne-blogbar__cats { display: flex; flex-wrap: wrap; gap: 12px; }
.ne-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--ne-sky);
  border-radius: 80px;
  background: #f3fbfe;
  color: var(--ne-teal);
  font: 500 16px/1.2 var(--ne-font);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ne-chip:hover { border-color: var(--ne-blue); color: var(--ne-blue); }
.ne-chip.is-active { border-color: var(--ne-teal); background: var(--ne-teal); color: var(--ne-white); }
.ne-chip--sm { min-height: 28px; padding: 0 12px; font-size: 13px; }

.ne-search { position: relative; display: flex; width: 100%; max-width: 380px; margin: 0; }
.ne-search input[type="search"] {
  width: 100%;
  height: 48px;
  padding: 0 56px 0 20px;
  border: 1px solid #bdbdbd;
  border-radius: 50px;
  background: var(--ne-white);
  color: #4f4f4f;
  font: 14px/21px var(--ne-font);
  -webkit-appearance: none;
  appearance: none;
}
.ne-search input[type="search"]::placeholder { color: #9e9e9e; }
.ne-search input[type="search"]:focus { border-color: var(--ne-blue); outline: 2px solid var(--ne-sky); outline-offset: 1px; }
.ne-search button {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ne-blue);
  color: var(--ne-white);
  cursor: pointer;
  transition: background-color .2s ease;
}
.ne-search button:hover { background: var(--ne-blue-dark); }

.ne-blog__status { margin: 0 0 32px; font-size: 18px; line-height: 34px; color: #828282; }

/* ---------- Tarjetas de artículo ---------- */
.ne-blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
.ne-post-card { display: flex; flex-direction: column; margin: 0; }
.ne-post-card__media { display: block; overflow: hidden; aspect-ratio: 416 / 300; border-radius: 5px; background: var(--ne-mist); }
.ne-post-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ne-post-card:hover .ne-post-card__media img { transform: scale(1.04); }
.ne-post-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 24px 15px 0; }
.ne-post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; font-size: 14px; line-height: 20px; color: #828282; }
.ne-post-card__title { margin: 16px 0 0; font-family: var(--ne-font); font-size: 20px; font-weight: 500; line-height: 28px; color: var(--ne-teal); }
.ne-post-card__title a { color: inherit; text-decoration: none; }
.ne-post-card__title a:hover { color: var(--ne-blue); }
.ne-post-card__excerpt { margin: 12px 0 0; font-size: 16px; line-height: 24px; color: #828282; }
.ne-post-card__more { margin-top: auto; padding-top: 16px; }
.ne-post-card__more .wp-block-button__link { font-size: 18px; line-height: 27px; gap: 14px; }

/* ---------- Paginación ---------- */
.ne-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 64px; }
.ne-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 8px;
  border: 1px solid var(--ne-line);
  border-radius: 46px;
  color: var(--ne-teal);
  font-weight: 500;
  text-decoration: none;
}
.ne-pagination a.page-numbers:hover { border-color: var(--ne-blue); color: var(--ne-blue); }
.ne-pagination .page-numbers.current { border-color: var(--ne-teal); background: var(--ne-teal); color: var(--ne-white); }
.ne-pagination .page-numbers.dots { border: 0; }
.ne-pagination .prev::before, .ne-pagination .next::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--ne-arrow) center / contain no-repeat;
  mask: var(--ne-arrow) center / contain no-repeat;
}
.ne-pagination .prev::before { transform: scaleX(-1); }

.ne-blog__empty { padding: 48px 0; text-align: center; }
.ne-blog__empty .ne-h2 { margin: 0 !important; }
.ne-blog__empty .wp-block-button { margin-top: 32px; }

/* ---------- Artículo ---------- */
.ne-pbanner__eyebrow a { color: inherit; text-decoration: none; }
.ne-pbanner__eyebrow a:hover { text-decoration: underline; }
.ne-article__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; font-size: 16px; line-height: 24px; color: #828282; }

.ne-article__body {
  display: grid;
  grid-template-columns: minmax(0, 746px) minmax(0, 412px);
  justify-content: space-between;
  column-gap: 48px;
  align-items: start;
  padding-top: 24px;
  padding-bottom: 96px;
}
.ne-article__content { min-width: 0; }
.ne-article__content > :first-child { margin-top: 0; }
.ne-article__content p { margin: 0 0 24px; font-size: 18px; line-height: 34px; color: #828282; }
.ne-article__content h2 { margin: 48px 0 24px; font-family: var(--ne-font); font-size: 32px; font-weight: 500; line-height: 35.2px; color: var(--ne-teal); }
.ne-article__content h3 { margin: 40px 0 16px; font-family: var(--ne-font); font-size: 24px; font-weight: 500; line-height: 30px; color: var(--ne-teal); }
.ne-article__content h4 { margin: 32px 0 12px; font-family: var(--ne-font); font-size: 20px; font-weight: 500; line-height: 28px; color: var(--ne-teal); }
.ne-article__content a { color: var(--ne-blue); }
.ne-article__content strong { color: var(--ne-teal); }
.ne-article__content ul, .ne-article__content ol { margin: 0 0 24px; padding: 0; list-style: none; counter-reset: ne-ol; }
.ne-article__content li { position: relative; margin: 10px 0 0; padding-left: 40px; font-size: 18px; line-height: 34px; color: var(--ne-teal); }
.ne-article__content ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(129, 210, 244, .45);
}
.ne-article__content ul > li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 11px;
  width: 12px;
  height: 12px;
  background: var(--ne-teal);
  -webkit-mask: var(--ne-check) center / contain no-repeat;
  mask: var(--ne-check) center / contain no-repeat;
}
.ne-article__content ol > li { counter-increment: ne-ol; }
.ne-article__content ol > li::before { content: counter(ne-ol, decimal-leading-zero); position: absolute; left: 0; top: 0; font-weight: 700; color: var(--ne-blue); }
.ne-article__content blockquote { margin: 40px 0; padding: 24px 32px; border-left: 4px solid var(--ne-sky); border-radius: 0 5px 5px 0; background: #f3fbfe; }
.ne-article__content blockquote p { margin: 0; font-size: 24px; font-style: italic; font-weight: 300; line-height: 34px; color: var(--ne-teal); }
.ne-article__content blockquote cite { display: block; margin-top: 12px; font-size: 14px; font-style: normal; color: #828282; }
.ne-article__content .wp-block-image { margin: 40px 0; }
.ne-article__content .wp-block-image img { width: 100%; height: auto; border-radius: 5px; }
.ne-article__content figcaption { margin-top: 12px; font-size: 14px; line-height: 20px; text-align: center; color: #828282; }

.ne-article__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--ne-line); }
.ne-article__nav-link { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; border: 1px solid var(--ne-line); border-radius: 5px; text-decoration: none; transition: border-color .2s ease; }
.ne-article__nav-link:hover { border-color: var(--ne-sky); }
.ne-article__nav-link--next { grid-column: 2; text-align: right; }
.ne-article__nav-label { font-size: 14px; font-weight: 500; color: var(--ne-blue); }
.ne-article__nav-title { font-size: 18px; font-weight: 500; line-height: 26px; color: var(--ne-teal); }

/* Barra lateral */
.ne-article__aside { position: sticky; top: calc(var(--ne-header-h) + var(--ne-admin-bar) + 24px); display: grid; gap: 24px; }
.ne-aside-box { padding: 24px; border-radius: 5px; background: #f9f9f9; }
.ne-aside-box .ne-search { max-width: none; }
.ne-aside-box__title { margin: 0 0 16px; font-family: var(--ne-font); font-size: 20px; font-weight: 500; line-height: 32px; color: var(--ne-teal); }
.ne-aside-cats, .ne-aside-posts { margin: 0; padding: 0; list-style: none; }
.ne-aside-cats a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ne-line); color: var(--ne-teal); font-size: 16px; text-decoration: none; }
.ne-aside-cats li:last-child a { border-bottom: 0; }
.ne-aside-cats a:hover, .ne-aside-cats a.is-active { color: var(--ne-blue); }
.ne-aside-cats__count { min-width: 28px; padding: 2px 8px; border-radius: 20px; background: var(--ne-white); font-size: 13px; text-align: center; color: #828282; }
.ne-aside-posts li + li { margin-top: 16px; }
.ne-aside-posts a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; text-decoration: none; }
.ne-aside-posts__img { width: 72px; height: 72px; border-radius: 5px; object-fit: cover; }
.ne-aside-posts__title { display: block; font-size: 16px; font-weight: 500; line-height: 22px; color: var(--ne-teal); }
.ne-aside-posts a:hover .ne-aside-posts__title { color: var(--ne-blue); }
.ne-aside-posts time { display: block; margin-top: 4px; font-size: 14px; color: #828282; }

/* Relacionados */
.ne-related { padding-top: 96px; padding-bottom: 96px; background: #f8f8f8; }
.ne-related__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.ne-related__head .ne-h2 { margin: 0 !important; }

/* ==========================================================================
   Tablet y móvil
   ========================================================================== */
@media (max-width: 1199px) {
  .ne-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ne-article__body { grid-template-columns: 1fr; row-gap: 48px; }
  .ne-article__aside { position: static; }
}

@media (max-width: 767px) {
  .ne-blog__body { padding-bottom: 64px; }
  .ne-blogbar { flex-direction: column; align-items: stretch; margin-bottom: 32px; padding-bottom: 24px; }
  .ne-blogbar__cats { flex-wrap: nowrap; margin-right: -12px; padding-right: 12px; overflow-x: auto; scrollbar-width: none; }
  .ne-blogbar__cats::-webkit-scrollbar { display: none; }
  .ne-search { max-width: none; }
  .ne-blog__grid { grid-template-columns: 1fr; gap: 40px; }
  .ne-post-card__body { padding: 20px 0 0; }
  .ne-article__content p, .ne-article__content li { font-size: 16px; line-height: 28px; }
  .ne-article__content h2 { margin-top: 40px; font-size: 24px; line-height: 30px; }
  .ne-article__content blockquote { padding: 20px 24px; }
  .ne-article__content blockquote p { font-size: 20px; line-height: 30px; }
  .ne-article__nav { grid-template-columns: 1fr; }
  .ne-article__nav-link--next { grid-column: auto; }
  .ne-article__body { padding-bottom: 64px; }
  .ne-related { padding-top: 64px; padding-bottom: 64px; }
  .ne-related__head { margin-bottom: 32px; }
}
