/**
 * article.css — Interna de noticias (single post).
 *
 * El texto del sitio es crema (para secciones oscuras); aquí el artículo va
 * sobre fondo claro, así que forzamos color oscuro y damos tipografía de
 * lectura al cuerpo. Cabecera tipo banda con el accent de la sección (rojo),
 * igual que el hero de programa, y columna de lectura única (sin sidebar).
 */

.article { color: var(--nexo-dark); }
.article a { color: inherit; }

/* ── Cabecera: banda con el accent de noticias ────────────────────────────── */
.article__header {
  position:      relative;
  overflow:      hidden;
  background:    var(--section-accent, var(--nexo-red));
  color:         var(--nexo-dark);
  padding-block: calc(var(--nav-height, 72px) + clamp(2.5rem, 6vh, 4rem)) clamp(5rem, 10vh, 7.5rem);
}
.article__header .container { position: relative; z-index: 1; max-width: 56rem; }

/* Migas */
.article .breadcrumb {
  font-family: var(--font-heading);
  font-size:   var(--fs-xs);
  font-weight: var(--fw-semibold);
  color:       var(--nexo-dark);
  opacity:     1 !important;
  margin-block-end: var(--space-6) !important;
}
.article .breadcrumb a { color: var(--nexo-dark); text-decoration: none; opacity: .65; transition: opacity .15s; }
.article .breadcrumb a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* Categoría (chip) */
.article .section-label {
  display:        inline-block;
  margin-block-end: var(--space-5);
  padding:        .35rem .8rem;
  background:     var(--nexo-dark);
  color:          var(--nexo-cream);
  font-family:    var(--font-heading);
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity:        1;
}

/* Título */
.article .section-title {
  max-width:      22ch;
  margin:         0;
  color:          var(--nexo-dark);
  font-family:    var(--font-heading);
  font-size:      clamp(2.2rem, 5.2vw, 3.8rem);
  font-weight:    var(--fw-bold);
  line-height:    var(--lh-tight);
  letter-spacing: -0.015em;
}

/* Meta (fecha · lectura) */
.article__meta {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-3);
  margin-block-start: var(--space-6);
  font-family: var(--font-heading);
  font-size:   var(--fs-sm);
  font-weight: var(--fw-medium);
  color:       var(--nexo-dark);
}
.article__meta .dot { opacity: .45; }

/* ── Imagen destacada (se solapa con la banda) ────────────────────────────── */
.article__hero {
  max-width:     56rem;
  margin:        clamp(-4rem, -6vh, -2.5rem) auto 0;
  padding-inline: var(--container-pad);
  position:      relative;
  z-index:       2;
}
.article__hero-inner {
  aspect-ratio: 16 / 8;
  overflow:     hidden;
  background:   var(--nexo-dark);
  outline:      4px solid var(--nexo-bg);
}
.article__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Logos como imagen destacada (nexo_media_logo_attrs): completos, sin recorte. */
.article__hero-inner.media--logo { background: var(--media-logo-bg, var(--nexo-dark)); }
.article__hero-inner.media--logo img { object-fit: contain; padding: clamp(1rem, 5%, 2.5rem); }

/* ── Cuerpo de lectura ────────────────────────────────────────────────────── */
.article__body { padding-block: clamp(2.5rem, 6vh, 4rem) clamp(3rem, 7vh, 5rem); }
.article__body .container { max-width: 44rem; }

.entry-content {
  color:       var(--nexo-dark);
  font-size:   var(--fs-md);
  line-height: var(--lh-relaxed);
}
.entry-content > * + * { margin-block-start: 1.4em; }
.entry-content p { margin: 0; }
.entry-content > h2,
.entry-content > h3,
.entry-content > h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color:       var(--nexo-dark);
  margin-block-start: 1.8em;
}
.entry-content h2 { font-size: var(--fs-2xl); }
.entry-content h3 { font-size: var(--fs-xl); }
.entry-content h4 { font-size: var(--fs-lg); }
.entry-content a {
  color: var(--nexo-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.entry-content a:hover { color: var(--nexo-dark); }
.entry-content strong { font-weight: var(--fw-bold); }
.entry-content ul { margin: 0; padding-inline-start: 1.4em; list-style: disc; }
.entry-content ol { margin: 0; padding-inline-start: 1.4em; list-style: decimal; }
.entry-content li + li { margin-block-start: .5em; }
.entry-content li::marker { color: var(--nexo-red); }
.entry-content blockquote {
  margin: 0;
  padding-inline-start: 1.4rem;
  border-inline-start: 4px solid var(--nexo-red);
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: var(--lh-snug);
}
.entry-content img,
.entry-content figure { max-width: 100%; height: auto; }
.entry-content figure { margin: 0; }
.entry-content figcaption { margin-block-start: .6rem; font-size: var(--fs-sm); opacity: .6; }
.entry-content hr { border: 0; border-block-start: 2px solid color-mix(in srgb, var(--nexo-dark) 15%, transparent); margin-block: 2.5em; }

/* Etiquetas */
.article__tags {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid color-mix(in srgb, var(--nexo-dark) 14%, transparent);
}
.article__tags a {
  display: inline-block;
  padding: .4rem .9rem;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--nexo-dark);
  color: var(--nexo-dark);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.article__tags a:hover { background: var(--nexo-dark); color: var(--nexo-cream); }

/* ── Relacionadas ─────────────────────────────────────────────────────────── */
.article-related { padding-block: clamp(3rem, 6vh, 4.5rem); border-block-start: 2px solid color-mix(in srgb, var(--nexo-dark) 12%, transparent); }
.article-related__title { color: var(--nexo-dark); font-family: var(--font-heading); font-size: var(--fs-5xl); font-weight: var(--fw-bold); line-height: var(--lh-none); letter-spacing: 0; margin: 0 0 clamp(var(--space-8), 5vh, var(--space-12)); }
.article-related .cards-carousel { padding-inline: 0; }