/* Blog y noticias: usa tokens globales definidos en tokens.css. */

.page-news,
.page-news-category,
.blog-post-page,
.home-news {
  color: var(--color-accent-contrast);
}

.home-news,
.page-news .news-editorial,
.page-news-category .news-editorial,
.blog-post-page .page-news--article,
.blog-post,
.blog-post__related {
  background: transparent;
}

.home-news .container,
.page-news .container,
.page-news-category .container,
.blog-post-page .container {
  max-inline-size: 76rem;
}

.page-news .page-hero,
.page-news-category .page-hero,
.blog-post-page .page-hero {
  background: transparent;
  border-block-end: 0;
}

.page-news .page-hero__inner,
.page-news-category .page-hero__inner,
.blog-post-page .page-hero__inner {
  align-content: center;
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  margin-inline: auto;
  max-inline-size: 58rem;
  text-align: center;
}

.news-shell,
.blog-post__inner,
.blog-post__layout {
  margin-inline: auto;
  max-inline-size: 76rem;
}

.news-editorial,
.news-section,
.news-featured {
  display: grid;
  gap: var(--space-5);
}

.news-section__header {
  display: grid;
  gap: var(--space-2);
}

.news-section__header,
.news-featured__content,
.news-card__content,
.news-archive-row,
.news-essential-list li,
.blog-post__content,
.blog-post__aside,
.blog-post__related-header {
  color: var(--color-accent-contrast);
}

.news-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.news-card,
.news-archive-row,
.news-essential-list li,
.blog-post__aside,
.blog-post__tips,
.blog-post__faq details,
.blog-post__related .news-card {
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

.news-featured,
.blog-post__content {
  background: var(--surface-glass-strong);
  border: 1px solid var(--border-glass-strong);
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

.news-card__content,
.news-featured__content,
.blog-post__aside,
.blog-post__tips,
.blog-post__faq details {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
}

.news-featured {
  padding: var(--space-5);
}

.news-featured h2,
.news-featured h3,
.news-card h3,
.news-archive-row h3,
.blog-post__content h2,
.blog-post__aside h2,
.blog-post__tips h2,
.blog-post__faq h2,
.blog-post__related h2 {
  color: var(--color-accent-contrast);
  line-height: var(--line-height-tight);
}

.news-featured h2,
.news-featured h3 {
  font-size: clamp(var(--font-size-4), 7vw, var(--font-size-5));
  max-inline-size: 18ch;
}

.news-section__header .lead,
.news-card p,
.news-featured p,
.news-archive-row p,
.news-essential-list li,
.blog-post__content p,
.blog-post__aside li,
.blog-post__tips li,
.blog-post__faq p,
.blog-post__related p,
.blog-post__source {
  color: color-mix(in srgb, var(--color-accent-contrast) 82%, transparent);
}

.news-card__content > p:not(.news-card__meta):not(.news-card__tag),
.news-featured__content > p:not(.eyebrow):not(.news-featured__category),
.news-archive-row > p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.news-card__tag,
.news-card__meta,
.news-featured__category,
.news-article__meta,
.blog-post__source,
.eyebrow {
  color: var(--color-accent);
}

.news-card a,
.news-featured a,
.news-archive-row a,
.news-essential-list a,
.blog-post__aside a,
.blog-post__related a,
.blog-post__source a {
  color: var(--color-accent-contrast);
  text-decoration: none;
}

.news-card a:hover,
.news-featured a:hover,
.news-archive-row a:hover,
.news-essential-list a:hover,
.blog-post__aside a:hover,
.blog-post__related a:hover,
.blog-post__source a:hover {
  border-block-end: 0;
  color: var(--color-accent);
}

.news-featured .button {
  inline-size: 100%;
}

.news-essential-list,
.news-archive-list,
.blog-post__aside ol,
.blog-post__tips ul {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-essential-list li {
  padding: var(--space-3) var(--space-4);
}

.news-archive-row {
  align-items: start;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.blog-post__layout {
  display: grid;
  gap: var(--space-5);
}

.blog-post__content {
  display: grid;
  gap: var(--space-5);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.blog-post__section {
  display: grid;
  gap: var(--space-3);
}

.blog-post__content p {
  font-size: 1.0625rem;
  line-height: 1.8;
}

.blog-post__content h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.blog-post__aside {
  align-self: start;
}

.blog-post__aside ol {
  counter-reset: toc;
}

.blog-post__aside li {
  counter-increment: toc;
}

.blog-post__aside li::before {
  color: var(--color-accent);
  content: counter(toc, decimal-leading-zero) ". ";
  font-weight: 700;
}

.blog-post__tips,
.blog-post__faq {
  display: grid;
  gap: var(--space-3);
}

.blog-post__faq details summary {
  color: var(--color-accent-contrast);
  cursor: pointer;
  font-weight: 700;
}

.blog-post__notice {
  background: color-mix(in srgb, var(--color-surface-strong) 46%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 48%, transparent);
  border-radius: var(--radius-sm);
  color: var(--color-accent-contrast);
  padding: var(--space-4);
}

.blog-post__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block-start: var(--space-2);
}

.blog-post__source {
  font-size: var(--font-size-0);
  margin: 0;
}

@media (hover: hover) {
  .news-card:hover,
  .news-featured:hover,
  .news-archive-row:hover,
  .news-essential-list li:hover,
  .blog-post__aside:hover,
  .blog-post__tips:hover,
  .blog-post__faq details:hover,
  .blog-post__related .news-card:hover {
    border-color: color-mix(in srgb, var(--color-accent) 72%, transparent);
  }
}

.news-card:focus-within,
.news-featured:focus-within,
.news-archive-row:focus-within,
.news-essential-list li:focus-within,
.blog-post__aside:focus-within,
.blog-post__tips:focus-within,
.blog-post__faq details:focus-within,
.blog-post__related .news-card:focus-within {
  border-color: color-mix(in srgb, var(--color-accent) 78%, transparent);
}

@media (min-width: 640px) {
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .news-grid--categories,
  .news-grid--archive,
  .news-grid--home-latest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .news-archive-row {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

@media (min-width: 1000px) {
  .news-grid,
  .news-grid--categories,
  .news-grid--archive,
  .news-grid--home-latest {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .blog-post__layout {
    align-items: start;
    grid-template-columns: minmax(14rem, 0.32fr) minmax(0, 1fr);
  }

  .blog-post__aside {
    position: sticky;
    top: 7rem;
  }
}

@media (max-width: 767px) {
  .news-shell,
  .blog-post__inner,
  .blog-post__layout {
    max-inline-size: calc(100% - 2rem);
  }

  .blog-post__content,
  .news-card__content,
  .news-featured__content,
  .blog-post__aside,
  .blog-post__tips,
  .blog-post__faq details {
    padding: var(--space-5);
  }
}


/* Reparación frontend blog/home: colores, alineación y fallback visual */
.home-news .news-shell {
  max-inline-size: var(--container-inline);
}

.home-news .news-section__header,
.page-news .news-section__header,
.page-news-category .news-section__header,
.blog-post__related-header {
  color: var(--color-accent-contrast);
}

.home-news .news-section__header h2,
.page-news .news-section__header h2,
.page-news-category .news-section__header h2,
.blog-post__related-header h2,
.news-section__header h2 {
  color: var(--color-accent-contrast);
}

.home-news .news-section__header .lead,
.page-news .news-section__header .lead,
.page-news-category .news-section__header .lead {
  color: color-mix(in srgb, var(--color-accent-contrast) 82%, transparent);
}

.home-news .eyebrow,
.page-news .eyebrow,
.page-news-category .eyebrow,
.blog-post-page .eyebrow {
  color: var(--color-accent);
}

.home-news .cluster {
  justify-content: flex-start;
}

@media (min-width: 900px) {
  .home-news .news-featured__content {
    max-inline-size: 58rem;
  }
}