@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================
   demo-news-1 · Diario / portal de noticias local
   Derivado de blueprint-diario-local.html (aprobado por el founder).
   Los tokens (--nd-*) los define skin-news-1.css.
   Scope SIEMPRE html.demo-news-1 · NUNCA @if($activeDemo) en blades.

   Estructura del archivo:
     PARTE 1 · Diseño del demo (masthead, portada, bandas, pie)
     PARTE 2 · CAPA B — ensamble de las páginas de módulo
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   PARTE 1 · DISEÑO DEL DEMO
   ───────────────────────────────────────────────────────────── */

html.demo-news-1 { scroll-behavior: smooth; }
html.demo-news-1 body,
html.demo-news-1 .body {
	background: var(--nd-paper, #F7F8F5);
	color: var(--nd-ink, #12171C);
	font-family: var(--nd-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
html.demo-news-1 .main { background: var(--nd-paper, #F7F8F5); overflow-x: hidden; }
html.demo-news-1 a { color: inherit; text-decoration: none; }
html.demo-news-1 a:focus-visible,
html.demo-news-1 button:focus-visible { outline: 2px solid var(--primary, #0F5C4A); outline-offset: 3px; }

html.demo-news-1 .nd-wrap { max-width: var(--nd-maxw, 1180px); margin: 0 auto; padding: 0 20px; }

/* placeholder de imagen: gradiente de marca, NUNCA un stub gris en disco */
html.demo-news-1 .nd-slot {
	position: relative; display: block; overflow: hidden;
	background-color: var(--nd-surface-2, #EFF1EC);
	background-image: linear-gradient(145deg, var(--primary, #0F5C4A) 0%, var(--nd-sec-b, #4A4E7C) 100%);
	background-size: cover; background-position: center;
}
html.demo-news-1 .nd-a16 { aspect-ratio: 16 / 9; }
html.demo-news-1 .nd-a43 { aspect-ratio: 4 / 3; }
html.demo-news-1 .nd-sq  { aspect-ratio: 1; }
html.demo-news-1 .nd-avatar { width: 62px; height: 62px; flex: none; border-radius: 50%; }
html.demo-news-1 .nd-empty { font-family: var(--nd-mono); font-size: .78rem; color: var(--nd-faint, #8D948A); }

/* ── MASTHEAD ── */
html.demo-news-1 .nd-mast { background: var(--nd-surface, #fff); border-bottom: 2px solid var(--nd-ink, #12171C); }
html.demo-news-1 .nd-mast-top {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; padding: 16px 0 12px; flex-wrap: wrap;
}
html.demo-news-1 .nd-brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
html.demo-news-1 .nd-brand-sub {
	font-family: var(--nd-mono); font-size: .63rem; letter-spacing: .2em;
	text-transform: uppercase; color: var(--nd-neutral, #6B7269);
	border-left: 1px solid var(--nd-rule, #DDE1D8); padding-left: 12px;
}
html.demo-news-1 .nd-mast-meta {
	font-family: var(--nd-mono); font-size: .7rem; color: var(--nd-neutral, #6B7269);
	text-align: right; line-height: 1.7;
}
html.demo-news-1 .nd-mast-meta b { color: var(--nd-ink, #12171C); font-weight: 600; }

/* volanta de secciones (dinámica desde post_categories) */
html.demo-news-1 .nd-sections { border-top: 1px solid var(--nd-rule, #DDE1D8); }
html.demo-news-1 .nd-sections .nd-wrap { display: flex; align-items: center; }
html.demo-news-1 .nd-sections ul {
	display: flex; gap: 0; list-style: none; margin: 0; padding: 0;
	min-width: max-content; overflow-x: auto; scrollbar-width: none;
}
html.demo-news-1 .nd-sections ul::-webkit-scrollbar { display: none; }
html.demo-news-1 .nd-sections li a {
	display: block; padding: 11px 15px; font-family: var(--nd-display);
	font-weight: 700; font-size: .83rem; letter-spacing: .03em;
	text-transform: uppercase; color: var(--nd-ink, #12171C);
	border-bottom: 3px solid transparent; white-space: nowrap;
}
html.demo-news-1 .nd-sections li a:hover,
html.demo-news-1 .nd-sections li a.on {
	border-bottom-color: var(--nd-bar, var(--primary, #0F5C4A));
	color: var(--nd-bar, var(--primary, #0F5C4A));
}
html.demo-news-1 .nd-sections .nd-nav-end { margin-left: auto; }
html.demo-news-1 .nd-sections .nd-nav-cta { color: var(--primary, #0F5C4A); }
html.demo-news-1 .nd-burger { display: none; }
@media (max-width: 900px) {
	html.demo-news-1 .nd-mast-meta { text-align: left; font-size: .65rem; }
	html.demo-news-1 .nd-sections .nd-wrap { flex-wrap: wrap; }
	html.demo-news-1 .nd-burger {
		display: inline-flex; align-items: center; gap: 8px; background: none;
		border: 0; cursor: pointer; padding: 11px 0; font-family: var(--nd-mono);
		font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
		color: var(--nd-ink, #12171C);
	}
	html.demo-news-1 .nd-burger span { width: 18px; height: 2px; background: currentColor; display: block; }
	html.demo-news-1 .nd-burger span + span { margin-top: -6px; }
	html.demo-news-1 .nd-burger em { font-style: normal; margin-left: 8px; }
	html.demo-news-1 .nd-sections ul { display: none; width: 100%; flex-direction: column; padding-bottom: 8px; }
	html.demo-news-1 .nd-sections ul.open { display: flex; }
	html.demo-news-1 .nd-sections li a { padding: 9px 0; border-bottom: 1px solid var(--nd-rule, #DDE1D8); }
	html.demo-news-1 .nd-sections .nd-nav-end { margin-left: 0; }
}

/* ── ÚLTIMO MOMENTO (semántico: --nd-urgent, no la marca) ── */
html.demo-news-1 .nd-ticker { background: var(--nd-urgent, #D93B18); color: #fff; overflow: hidden; }
html.demo-news-1 .nd-ticker .nd-wrap { display: flex; align-items: center; gap: 14px; padding: 9px 20px; }
html.demo-news-1 .nd-ticker-tag {
	font-family: var(--nd-mono); font-size: .64rem; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; background: rgba(0, 0, 0, .28);
	padding: 4px 8px; flex: none; display: flex; align-items: center; gap: 6px;
}
html.demo-news-1 .nd-pulse { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: nd-blink 1.6s ease-in-out infinite; }
@keyframes nd-blink { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { html.demo-news-1 .nd-pulse { animation: none } }
html.demo-news-1 .nd-ticker-text {
	font-family: var(--nd-display); font-weight: 600; font-size: .9rem; color: #fff;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── PORTADA: apertura + riel ── */
html.demo-news-1 .nd-portada { display: grid; grid-template-columns: 7fr 5fr; gap: 34px; padding: 30px 0 8px; }
@media (max-width: 880px) { html.demo-news-1 .nd-portada { grid-template-columns: 1fr; gap: 26px } }

html.demo-news-1 .nd-eyebrow {
	font-family: var(--nd-mono); font-size: .66rem; font-weight: 700;
	letter-spacing: .15em; text-transform: uppercase;
	display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px;
	color: var(--primary, #0F5C4A);
}
html.demo-news-1 .nd-eyebrow::before { content: ""; width: 20px; height: 3px; background: currentColor; }

html.demo-news-1 .nd-apertura-media { margin-bottom: 18px; }
html.demo-news-1 .nd-apertura h1 {
	font-family: var(--nd-display); font-weight: 800;
	font-size: clamp(1.9rem, 4.6vw, 3.15rem); line-height: 1.02;
	letter-spacing: -.03em; margin: 0 0 14px; text-wrap: balance;
	color: var(--nd-ink, #12171C);
}
html.demo-news-1 .nd-apertura h1 a:hover { color: var(--primary, #0F5C4A); }
html.demo-news-1 .nd-bajada {
	font-family: var(--nd-serif); font-style: italic; font-size: 1.09rem;
	line-height: 1.5; color: var(--nd-neutral, #6B7269); margin: 0 0 16px; max-width: 62ch;
}
html.demo-news-1 .nd-byline {
	font-family: var(--nd-mono); font-size: .7rem; color: var(--nd-faint, #8D948A);
	display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
html.demo-news-1 .nd-byline b { color: var(--nd-ink, #12171C); font-weight: 600; }
html.demo-news-1 .nd-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

html.demo-news-1 .nd-rail { display: flex; flex-direction: column; border-top: 2px solid var(--nd-ink, #12171C); }
html.demo-news-1 .nd-rail-item {
	display: grid; grid-template-columns: 1fr 88px; gap: 14px; padding: 15px 0;
	border-bottom: 1px solid var(--nd-rule, #DDE1D8); align-items: start;
}
html.demo-news-1 .nd-rail-item h3 {
	font-family: var(--nd-display); font-weight: 700; font-size: 1.02rem;
	line-height: 1.2; margin: 0 0 6px; letter-spacing: -.012em; text-wrap: balance;
	color: var(--nd-ink, #12171C);
}
html.demo-news-1 .nd-rail-item h3 a:hover { color: var(--primary, #0F5C4A); }
html.demo-news-1 .nd-meta { font-family: var(--nd-mono); font-size: .65rem; color: var(--nd-faint, #8D948A); }
html.demo-news-1 .nd-sec-label {
	font-family: var(--nd-mono); font-size: .62rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px; display: block;
}

/* ── BANDAS POR SECCIÓN ── */
html.demo-news-1 .nd-banda { padding: 34px 0 8px; border-top: 1px solid var(--nd-rule, #DDE1D8); }
html.demo-news-1 .nd-banda-head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 14px; margin-bottom: 18px; flex-wrap: wrap;
}
html.demo-news-1 .nd-banda-head h2 {
	font-family: var(--nd-display); font-weight: 800; font-size: 1.32rem;
	letter-spacing: -.018em; text-transform: uppercase; margin: 0;
	display: flex; align-items: center; gap: 10px; color: var(--nd-ink, #12171C);
}
html.demo-news-1 .nd-banda-head h2::before {
	content: ""; width: 5px; height: 22px; flex: none;
	background: var(--nd-bar, var(--primary, #0F5C4A));
}
html.demo-news-1 .nd-banda-head a.nd-mas {
	font-family: var(--nd-mono); font-size: .68rem; letter-spacing: .08em;
	text-transform: uppercase; color: var(--nd-neutral, #6B7269);
	border-bottom: 1px solid var(--nd-rule, #DDE1D8); padding-bottom: 2px;
}
html.demo-news-1 .nd-banda-head a.nd-mas:hover { color: var(--primary, #0F5C4A); border-bottom-color: var(--primary, #0F5C4A); }
html.demo-news-1 .nd-banda-intro {
	font-family: var(--nd-serif); font-style: italic; color: var(--nd-neutral, #6B7269);
	margin: -6px 0 18px; max-width: 70ch;
}

html.demo-news-1 .nd-row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
html.demo-news-1 .nd-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) {
	html.demo-news-1 .nd-row4 { grid-template-columns: repeat(2, 1fr) }
	html.demo-news-1 .nd-row3 { grid-template-columns: 1fr }
}
@media (max-width: 520px) { html.demo-news-1 .nd-row4 { grid-template-columns: 1fr } }

html.demo-news-1 .nd-nota h3 {
	font-family: var(--nd-display); font-weight: 700; font-size: .99rem;
	line-height: 1.22; margin: 11px 0 7px; letter-spacing: -.01em;
	text-wrap: balance; color: var(--nd-ink, #12171C);
}
html.demo-news-1 .nd-nota h3 a:hover { color: var(--primary, #0F5C4A); }
html.demo-news-1 .nd-resumen { font-size: .86rem; color: var(--nd-neutral, #6B7269); margin: 0 0 8px; line-height: 1.45; }

/* ── FOTOGALERÍAS ── */
html.demo-news-1 .nd-galerias {
	background: var(--nd-surface-2, #EFF1EC); padding: 34px 0; margin-top: 30px;
	border-top: 1px solid var(--nd-rule, #DDE1D8); border-bottom: 1px solid var(--nd-rule, #DDE1D8);
}
html.demo-news-1 .nd-gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { html.demo-news-1 .nd-gal-grid { grid-template-columns: repeat(2, 1fr) } }
html.demo-news-1 .nd-gal { margin: 0; position: relative; }
html.demo-news-1 .nd-gal figcaption {
	font-family: var(--nd-display); font-weight: 700; font-size: .9rem;
	margin-top: 9px; line-height: 1.25; color: var(--nd-ink, #12171C);
}
html.demo-news-1 .nd-cant { font-family: var(--nd-mono); font-size: .62rem; color: var(--nd-faint, #8D948A); margin-top: 3px; }

/* ── LA REDACCIÓN ── */
html.demo-news-1 .nd-redaccion { padding: 36px 0 10px; }
html.demo-news-1 .nd-firmas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { html.demo-news-1 .nd-firmas { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 460px) { html.demo-news-1 .nd-firmas { grid-template-columns: 1fr } }
html.demo-news-1 .nd-firma { display: flex; gap: 13px; align-items: flex-start; }
html.demo-news-1 .nd-firma h4 { font-family: var(--nd-display); font-weight: 700; font-size: .94rem; margin: 2px 0 3px; color: var(--nd-ink, #12171C); }
html.demo-news-1 .nd-firma h4 a:hover { color: var(--primary, #0F5C4A); }
html.demo-news-1 .nd-firma-rol {
	font-family: var(--nd-mono); font-size: .63rem; color: var(--nd-faint, #8D948A);
	margin: 0; letter-spacing: .04em; text-transform: uppercase;
}
html.demo-news-1 .nd-bio { font-size: .82rem; color: var(--nd-neutral, #6B7269); margin-top: 5px; }

/* ── PÁGINAS INTERNAS: page-header + secciones ── */
html.demo-news-1 .nd-pagehead {
	background: var(--nd-surface, #fff);
	border-bottom: 2px solid var(--nd-ink, #12171C);
	padding: 34px 0 26px;
}
html.demo-news-1 .nd-crumbs ol {
	list-style: none; display: flex; gap: 7px; padding: 0; margin: 0 0 12px;
	font-family: var(--nd-mono); font-size: .64rem; letter-spacing: .12em;
	text-transform: uppercase; color: var(--nd-faint, #8D948A); flex-wrap: wrap;
}
html.demo-news-1 .nd-crumbs a:hover { color: var(--primary, #0F5C4A); }
html.demo-news-1 .nd-crumbs span[aria-current] { color: var(--primary, #0F5C4A); font-weight: 600; }
html.demo-news-1 .nd-ph-title {
	font-family: var(--nd-display); font-weight: 800; margin: 0;
	font-size: clamp(1.8rem, 4.2vw, 2.8rem); line-height: 1.05;
	letter-spacing: -.028em; color: var(--nd-ink, #12171C);
}
html.demo-news-1 .nd-ph-sub {
	font-family: var(--nd-serif); font-style: italic; font-size: 1.02rem;
	color: var(--nd-neutral, #6B7269); margin: 12px 0 0; max-width: 66ch;
}

html.demo-news-1 .nd-sec { padding: 40px 0; }
html.demo-news-1 .nd-h2 {
	font-family: var(--nd-display); font-weight: 800; letter-spacing: -.022em;
	font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin: 0 0 16px; color: var(--nd-ink, #12171C);
}
html.demo-news-1 .nd-lead { font-family: var(--nd-serif); font-style: italic; font-size: 1.08rem; color: var(--nd-neutral, #6B7269); margin: 0 0 14px; }
html.demo-news-1 .nd-body-text { color: var(--nd-neutral, #6B7269); margin: 0; }
html.demo-news-1 .nd-about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: start; }
html.demo-news-1 .nd-about-img { width: 100%; display: block; }
html.demo-news-1 .nd-principios { background: var(--nd-surface, #fff); border-top: 1px solid var(--nd-rule, #DDE1D8); border-bottom: 1px solid var(--nd-rule, #DDE1D8); }
html.demo-news-1 .nd-principio h3 {
	font-family: var(--nd-display); font-weight: 700; font-size: 1.05rem;
	margin: 0 0 8px; color: var(--nd-ink, #12171C);
	padding-top: 12px; border-top: 3px solid var(--primary, #0F5C4A);
}
html.demo-news-1 .nd-principio p { color: var(--nd-neutral, #6B7269); margin: 0; font-size: .92rem; }

html.demo-news-1 .nd-cta-band { background: var(--nd-ink, #12171C); color: var(--nd-paper, #F7F8F5); padding: 44px 0; margin-top: 34px; }
html.demo-news-1 .nd-cta-band h2 { font-family: var(--nd-display); font-weight: 800; font-size: clamp(1.5rem, 3.6vw, 2.2rem); margin: 0 0 10px; color: #fff; }
html.demo-news-1 .nd-cta-band p { color: rgba(255, 255, 255, .72); margin: 0 0 20px; max-width: 56ch; }

html.demo-news-1 .nd-btn {
	display: inline-flex; align-items: center; gap: 9px;
	background: var(--primary, #0F5C4A); color: #fff; border: 0; cursor: pointer;
	font-family: var(--nd-display); font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em; font-size: .82rem; padding: 14px 24px;
	border-radius: var(--border-radius, 0);
}
html.demo-news-1 .nd-btn:hover { background: var(--tertiary, #14806A); color: #fff; }

/* ── CONTACTO ── */
html.demo-news-1 .nd-contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; }
html.demo-news-1 .nd-channel { border-top: 1px solid var(--nd-rule, #DDE1D8); padding: 16px 0; }
html.demo-news-1 .nd-channel h3 {
	font-family: var(--nd-mono); font-size: .68rem; letter-spacing: .14em;
	text-transform: uppercase; color: var(--primary, #0F5C4A); margin: 0 0 6px;
}
html.demo-news-1 .nd-channel p { color: var(--nd-neutral, #6B7269); margin: 0 0 6px; font-size: .92rem; }
html.demo-news-1 .nd-channel a { font-weight: 600; border-bottom: 1px solid var(--primary, #0F5C4A); }
html.demo-news-1 .nd-contact-data { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 14px; }
html.demo-news-1 .nd-contact-data li { color: var(--nd-ink, #12171C); font-size: .94rem; }
html.demo-news-1 .nd-contact-data span {
	display: block; font-family: var(--nd-mono); font-size: .62rem;
	letter-spacing: .14em; text-transform: uppercase; color: var(--nd-faint, #8D948A); margin-bottom: 2px;
}
html.demo-news-1 .nd-form { display: grid; gap: 14px; }
html.demo-news-1 .nd-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
html.demo-news-1 .nd-input {
	background: var(--nd-surface, #fff); border: 1px solid var(--nd-rule, #DDE1D8);
	border-radius: var(--border-radius, 0); padding: 13px 15px;
	color: var(--nd-ink, #12171C); font-size: .95rem; width: 100%; font-family: inherit;
}
html.demo-news-1 .nd-input:focus { outline: none; border-color: var(--primary, #0F5C4A); }
html.demo-news-1 .nd-input::placeholder { color: var(--nd-faint, #8D948A); }
html.demo-news-1 .nd-form .nd-btn { justify-self: start; }
html.demo-news-1 .nd-alert {
	border-left: 3px solid var(--primary, #0F5C4A); background: var(--nd-surface-2, #EFF1EC);
	padding: 12px 16px; margin-bottom: 16px; font-size: .92rem;
}
html.demo-news-1 .nd-alert-error { border-left-color: var(--nd-urgent, #D93B18); }
@media (max-width: 880px) {
	html.demo-news-1 .nd-about-grid,
	html.demo-news-1 .nd-contact-grid,
	html.demo-news-1 .nd-form-row { grid-template-columns: 1fr; }
}

/* ── PIE ── */
html.demo-news-1 .nd-footer { background: var(--nd-ink, #12171C); color: var(--nd-paper, #F7F8F5); margin-top: 34px; padding: 34px 0 24px; }
html.demo-news-1 .nd-footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 26px; }
@media (max-width: 820px) { html.demo-news-1 .nd-footer-cols { grid-template-columns: 1fr 1fr } }
html.demo-news-1 .nd-footer h5 {
	font-family: var(--nd-mono); font-size: .64rem; letter-spacing: .14em;
	text-transform: uppercase; color: var(--tertiary, #14806A); margin: 0 0 11px;
}
html.demo-news-1 .nd-footer ul { list-style: none; margin: 0; padding: 0; font-size: .87rem; line-height: 2; }
html.demo-news-1 .nd-footer a { color: rgba(255, 255, 255, .78); }
html.demo-news-1 .nd-footer a:hover { color: #fff; }
html.demo-news-1 .nd-footer-sub {
	font-family: var(--nd-mono); font-size: .62rem; letter-spacing: .2em;
	text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-top: 8px;
}
html.demo-news-1 .nd-footer-brand p { font-size: .87rem; color: rgba(255, 255, 255, .62); max-width: 36ch; margin: 12px 0 0; }
html.demo-news-1 .nd-footer-addr { font-family: var(--nd-mono); font-size: .68rem; color: rgba(255, 255, 255, .5); margin-top: 12px; line-height: 1.9; }
html.demo-news-1 .nd-social { display: flex; gap: 10px; margin-top: 16px; }
html.demo-news-1 .nd-social a {
	width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255, 255, 255, .2); color: #fff;
}
html.demo-news-1 .nd-social a:hover { background: var(--primary, #0F5C4A); border-color: var(--primary, #0F5C4A); }
html.demo-news-1 .nd-footer-legal {
	border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 26px; padding-top: 16px;
	font-family: var(--nd-mono); font-size: .66rem; color: rgba(255, 255, 255, .5);
	display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
html.demo-news-1 .nd-cuit { margin-left: 8px; }

/* ═══════════════════════════════════════════════════════════════
   PARTE 2 · CAPA B — ENSAMBLE DE LAS PÁGINAS DE MÓDULO

   La Capa A GLOBAL (cd-system-base.css) ya alinea botones, badges y
   paginación a var(--primary)/var(--border-radius) en TODOS los demos:
   acá NO se repite.

   Este demo está registrado en is_demo_light_themed() → blog index,
   blog show, faqs y references ya resuelven su paleta clara solos.
   Lo que NO resuelven y va acá:

   1) FONDOS near-black. /team pinta su sección con var(--secondary) y
      /gallery con var(--dark) — en este skin ambos son la TINTA #12171C.
      Sin override, /team y /gallery quedaban casi negros dentro de un
      diario de papel: exactamente el bug que en demo-club-futbol dejó
      /team y /references sin ensamblar (trampas #31/#32). Son estilos
      INLINE sin !important, así que un !important de autor los gana.
   2) La voz tipográfica del diario (display condensada + mono en metadatos
      + serif itálica en las bajadas) en TODAS las internas.
   3) Superficies de papel: cero radios, cero sombras, filetes en su lugar.

   Scope SIEMPRE html.demo-news-1 .main …  ·  NUNCA @if($activeDemo).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · UNA SOLA SUPERFICIE: papel ──
   Un diario no alterna fondos por módulo. Toda sección de módulo pasa a
   papel; las secciones propias del demo (.nd-*) quedan exentas porque ya
   traen su fondo intencional (papel, blanco o surface-2). */
html.demo-news-1 .main section:not([class*="nd-"]),
html.demo-news-1 .main section.bg-light,
html.demo-news-1 .main section.bg-white,
html.demo-news-1 .main section.bg-dark,
html.demo-news-1 .main #gallery-content,
html.demo-news-1 .main #blog-content,
html.demo-news-1 .main #faqs-content {
	background-color: var(--nd-paper, #F7F8F5) !important;
	background-image: none !important;
}
/* Porto mete un border-top gris de 5px en .section → filete de tinta fino */
html.demo-news-1 .main section.section,
html.demo-news-1 .main .section { border-top-color: transparent !important; }

/* ── 2 · TIPOGRAFÍA DEL DIARIO en las internas ── */
html.demo-news-1 .main h1, html.demo-news-1 .main h2,
html.demo-news-1 .main h3, html.demo-news-1 .main h4,
html.demo-news-1 .main h5, html.demo-news-1 .main .card-title {
	font-family: var(--nd-display);
	letter-spacing: -.018em;
}
html.demo-news-1 .main .badge,
html.demo-news-1 .main .post-meta,
html.demo-news-1 .main .text-1,
html.demo-news-1 .main .text-2 {
	font-family: var(--nd-mono);
	letter-spacing: .06em;
}

/* ── 3 · SUPERFICIES DE PAPEL: sin radios ni sombras, con filetes ── */
html.demo-news-1 .main .card,
html.demo-news-1 .main .card-body,
html.demo-news-1 .main .card-header,
html.demo-news-1 .main aside.card {
	border-radius: 0 !important;
}
html.demo-news-1 .main .card {
	box-shadow: none !important;
	background-color: var(--nd-surface, #fff);
	border: 1px solid var(--nd-rule, #DDE1D8) !important;
}
html.demo-news-1 .main .card.bg-transparent { background-color: transparent; border-color: transparent !important; }
html.demo-news-1 .main .box-shadow-1,
html.demo-news-1 .main .box-shadow-10,
html.demo-news-1 .main .box-shadow-1-hover:hover,
html.demo-news-1 .main .custom-box-shadow-1 { box-shadow: none !important; }
html.demo-news-1 .main .rounded-pill,
html.demo-news-1 .main .rounded-circle,
html.demo-news-1 .main .rounded { border-radius: 0 !important; }
/* excepción: los avatares de la redacción sí son redondos */
html.demo-news-1 .main .nd-avatar { border-radius: 50% !important; }
html.demo-news-1 .main .badge {
	border-radius: 0 !important;
	text-transform: uppercase;
	font-weight: 600;
}

/* ── 4 · BLOG index + listado de sección (/blog, /blog/category/{slug}) ── */
html.demo-news-1 .main article.post .card { border: 0 !important; background: transparent; }
html.demo-news-1 .main article.post .card-body { background: transparent !important; padding-left: 0; padding-right: 0; }
html.demo-news-1 .main article.post .card-img-top,
html.demo-news-1 .main article.post .blog-image { border-radius: 0 !important; }
html.demo-news-1 .main article.post h4,
html.demo-news-1 .main article.post h4 a,
html.demo-news-1 .main article.post .card-title {
	font-family: var(--nd-display);
	font-weight: 700;
	color: var(--nd-ink, #12171C) !important;
	line-height: 1.2;
}
html.demo-news-1 .main article.post h4 a:hover { color: var(--primary, #0F5C4A) !important; }
html.demo-news-1 .main article.post .card-text,
html.demo-news-1 .main article.post p { color: var(--nd-neutral, #6B7269) !important; }
html.demo-news-1 .main article.post .read-more,
html.demo-news-1 .main article.post .text-color-primary {
	font-family: var(--nd-mono);
	font-size: .68rem !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--primary, #0F5C4A) !important;
}
/* separador entre notas del listado: filete, no card flotante */
html.demo-news-1 .main .blog-posts article.post {
	border-bottom: 1px solid var(--nd-rule, #DDE1D8);
	padding-bottom: 18px;
}
/* la fecha en cápsula sobre la foto → tarjetón de tinta */
html.demo-news-1 .main article.post .post-date {
	background: var(--nd-ink, #12171C) !important;
	border-radius: 0 !important;
	font-family: var(--nd-mono);
}
html.demo-news-1 .main article.post .post-date .month { background: transparent !important; color: rgba(255,255,255,.8) !important; }

/* ── 5 · NOTA INDIVIDUAL (/blog/{slug}) ──
   El blueprint dejó la nota sin diseñar a propósito. Acá va lo mínimo para
   que NO se lea como un blog corporativo: titular condensado, medida de
   lectura acotada y primer párrafo en serif itálica (la bajada del diario). */
html.demo-news-1 .main .blog-post-detail h1 {
	font-family: var(--nd-display);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.04;
	color: var(--nd-ink, #12171C) !important;
}
html.demo-news-1 .main .blog-post-content { max-width: 68ch; }
html.demo-news-1 .main .blog-post-content > p:first-of-type {
	font-family: var(--nd-serif);
	font-style: italic;
	font-size: 1.12rem;
	line-height: 1.55;
	color: var(--nd-neutral, #6B7269) !important;
}
html.demo-news-1 .main .blog-post-content h2,
html.demo-news-1 .main .blog-post-content h3 { font-family: var(--nd-display); font-weight: 700; margin-top: 1.6em; }
html.demo-news-1 .main .blog-post-content blockquote {
	border-left: 3px solid var(--primary, #0F5C4A);
	font-family: var(--nd-serif);
	font-style: italic;
	padding-left: 18px;
}
html.demo-news-1 .main .blog-post-detail .badge {
	background-color: transparent !important;
	border: 0 !important;
	padding-left: 0 !important;
	color: var(--primary, #0F5C4A) !important;
	letter-spacing: .14em;
}

/* ── 6 · SIDEBAR del blog (categorías = secciones del diario) ── */
html.demo-news-1 .main aside .card,
html.demo-news-1 .main .blog-sidebar .card {
	border: 0 !important;
	border-top: 2px solid var(--nd-ink, #12171C) !important;
	background: transparent !important;
}
html.demo-news-1 .main aside .card-header {
	background: transparent !important;
	padding-left: 0 !important;
	font-family: var(--nd-mono);
	font-size: .66rem;
	letter-spacing: .16em;
	text-transform: uppercase;
}
html.demo-news-1 .main aside .list-group-item,
html.demo-news-1 .main aside .nav-link {
	background: transparent !important;
	border-left: 0 !important;
	border-right: 0 !important;
	border-radius: 0 !important;
	border-color: var(--nd-rule, #DDE1D8) !important;
	font-family: var(--nd-display);
	font-weight: 600;
}

/* ── 7 · /team — LA REDACCIÓN (core del producto) ──
   Porto default: card blanca con sombra sobre sección var(--secondary).
   Acá: ficha de firma sobre papel, filete arriba, foto sin radio,
   nombre en display, sección en mono. */
html.demo-news-1 .main .team-list .card,
html.demo-news-1 .main .card.custom-box-shadow-1 {
	background: var(--nd-surface, #fff) !important;
	border: 1px solid var(--nd-rule, #DDE1D8) !important;
	border-top: 3px solid var(--primary, #0F5C4A) !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	transition: border-color .18s;
}
html.demo-news-1 .main .card.custom-box-shadow-1:hover { border-color: var(--nd-ink, #12171C) !important; }
html.demo-news-1 .main .team-list .card img { border-radius: 0 !important; filter: saturate(.92); }
html.demo-news-1 .main .team-list .card h4,
html.demo-news-1 .main .card.custom-box-shadow-1 .text-color-dark {
	font-family: var(--nd-display);
	font-weight: 700;
	color: var(--nd-ink, #12171C) !important;
}
html.demo-news-1 .main .card.custom-box-shadow-1 .text-color-dark:hover { color: var(--primary, #0F5C4A) !important; }
html.demo-news-1 .main .card.custom-box-shadow-1 .text-color-primary {
	font-family: var(--nd-mono);
	font-size: .66rem !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nd-faint, #8D948A) !important;
}
/* red de seguridad isotope: si el JS no corre, las firmas arrancan ocultas.
   SIN !important a propósito para no romper el filtro por categoría. */
html.demo-news-1 .main .team-list .isotope-item,
html.demo-news-1 .main .sort-destination .isotope-item { opacity: 1; visibility: visible; }

/* ── 8 · Filtros nav-pills (team / gallery) → pestañas de diario ── */
html.demo-news-1 .main .sort-source { border-bottom: 1px solid var(--nd-rule, #DDE1D8); }
html.demo-news-1 .main .sort-source .nav-link {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	border-bottom: 3px solid transparent !important;
	font-family: var(--nd-display) !important;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--nd-neutral, #6B7269) !important;
	padding: 10px 15px !important;
}
html.demo-news-1 .main .sort-source .nav-link:hover { color: var(--nd-ink, #12171C) !important; }
html.demo-news-1 .main .sort-source .nav-item.active .nav-link,
html.demo-news-1 .main .sort-source .nav-link.active {
	color: var(--primary, #0F5C4A) !important;
	border-bottom-color: var(--primary, #0F5C4A) !important;
}

/* ── 9 · /gallery — FOTOGALERÍAS ──
   El fondo near-black ya lo resolvió el bloque 1. Acá: cuadrícula de papel,
   epígrafes en display, píldoras de categoría cuadradas. */
html.demo-news-1 .main #gallery-content .card,
html.demo-news-1 .main .gallery-item,
html.demo-news-1 .main .gallery-item img { border-radius: 0 !important; }
html.demo-news-1 .main #gallery-content h1,
html.demo-news-1 .main #gallery-content h2,
html.demo-news-1 .main #gallery-content h3,
html.demo-news-1 .main #gallery-content h4 { color: var(--nd-ink, #12171C) !important; }
html.demo-news-1 .main #gallery-content .text-muted,
html.demo-news-1 .main #gallery-content p { color: var(--nd-neutral, #6B7269) !important; }
/* el lightbox de gallery.css ya trae el fix .mfp-ready{opacity:1} */

/* Epígrafe sobre la foto: el módulo trae un scrim de solo 2 de padding
   (linear-gradient(transparent, rgba(0,0,0,.7))), así que el degradado arranca
   transparente justo donde está el texto → sobre fotos claras (un cielo, una
   feria, la arena) el epígrafe blanco se volvía ilegible. Verificado en las 10
   fotogalerías del seed. Scrim más alto y más firme + voz de diario. */
html.demo-news-1 .main .gallery-item .position-absolute.bottom-0 {
	background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 100%) !important;
	padding: 34px 12px 10px !important;
}
html.demo-news-1 .main .gallery-item .position-absolute.bottom-0 .text-white {
	font-family: var(--nd-display);
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
/* la etiqueta de sección iba en var(--primary) = verde caña oscuro sobre foto:
   sin contraste. Va en blanco translúcido + mono, como una volanta. */
html.demo-news-1 .main .gallery-item .position-absolute.bottom-0 .text-1 {
	color: rgba(255, 255, 255, .82) !important;
	font-family: var(--nd-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
/* la grilla de fotogalerías no lleva esquinas redondeadas (inline 8px) */
html.demo-news-1 .main .gallery-item { border-radius: 0 !important; }

/* ── 10 · /faqs ── */
html.demo-news-1 .main #faqs-content .accordion-item,
html.demo-news-1 .main #faqs-content .accordion-button,
html.demo-news-1 .main #faqs-content .card { border-radius: 0 !important; }
html.demo-news-1 .main #faqs-content .accordion-button {
	font-family: var(--nd-display);
	font-weight: 700;
	color: var(--nd-ink, #12171C);
}
html.demo-news-1 .main #faqs-content .accordion-button:not(.collapsed) { color: var(--primary, #0F5C4A); box-shadow: none; }
html.demo-news-1 .main #faqs-content .accordion-body { color: var(--nd-neutral, #6B7269); }

/* ── 11 · /references — no viene con el producto, pero si un tenant activa
   el módulo (sponsors/anunciantes, el camino barato a "pauta" del contrato
   del blueprint) la interna no debe caer a genérico. ── */
html.demo-news-1 .main .references-list .card,
html.demo-news-1 .main .reference-logo { border-radius: 0 !important; box-shadow: none !important; }
html.demo-news-1 .main .reference-logo img { filter: grayscale(1); opacity: .75; transition: .2s; }
html.demo-news-1 .main .reference-logo:hover img { filter: none; opacity: 1; }

/* ── 12 · Paginación y botones: la Capa A global ya alinea color y radio.
   Acá solo la voz tipográfica de diario. ── */
html.demo-news-1 .main .pagination .page-link,
html.demo-news-1 .main .btn {
	font-family: var(--nd-display);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}