/* =========================================================
   ESPACIO RECREA · NOTICIAS — CSS UNIVERSAL DEL PLUGIN v1.2
   SOLO CUERPO DE NOTICIAS

   Ajustes v8:
   - Celeste del bloque Espacio Recrea más oscuro.
   - Una sola familia tipográfica en todo el cuerpo.
   - H2/H3/FAQ más contenidos.
   - Misma tipografía; cambia solo peso/tamaño.
   - Contraste corregido en fondos oscuros.
   ========================================================= */


/* =========================================================
   1. VARIABLES
   ========================================================= */

.er-news {
	--er-green: #79b61a;
	--er-green-dark: #557f12;
	--er-green-soft: #f3f8ea;

	--er-blue: #159fd0;
	--er-blue-soft: #cdeaf6;
	--er-blue-line: #a9d8ea;
	--er-blue-title: #29485a;
	--er-blue-text: #526d7d;

	--er-navy: #202d38;
	--er-ink: #27323d;
	--er-muted: #6d7883;
	--er-line: #e1e7e9;
	--er-soft: #f6f8f8;
	--er-white: #fff;

	--er-prose: 820px;
	--er-wide: 1040px;

	color: var(--er-ink);
	font-family: var(--er-font, "Baloo 2", "Trebuchet MS", Arial, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.78;
}

.er-news *,
.er-news *::before,
.er-news *::after {
	box-sizing: border-box;
}


/* =========================================================
   2. TIPOGRAFÍA UNIFICADA
   Toda la noticia usa la misma familia del sitio.
   Solo cambian peso, tamaño y jerarquía.
   ========================================================= */

html body .er-news,
html body .er-news :where(
	h1,h2,h3,h4,h5,h6,
	p,li,a,span,strong,small,
	summary,details,div,
	button,label
) {
	font-family: var(--er-font, "Baloo 2", "Trebuchet MS", Arial, sans-serif) !important;
}

html body .er-news :where(
	p,li,span,small,details,div
) {
	font-weight: 400;
}

html body .er-news :where(
	h2,h3,h4,h5,h6,strong,summary
) {
	font-style: normal;
}


/* =========================================================
   3. ESTRUCTURA
   ========================================================= */

.er-news__content {
	padding: clamp(48px, 6vw, 76px) 0 86px;
	background: var(--er-white);
}

.er-news__prose {
	width: min(calc(100% - 32px), var(--er-prose));
	margin-inline: auto;
}

.er-news__wide {
	width: min(calc(100% - 32px), var(--er-wide));
	margin-inline: auto;
}


/* =========================================================
   4. REGLA FIJA UX: FONDO OSCURO = TEXTO BLANCO
   ========================================================= */

.er-news :is(
	.is-dark,
	.er-dark,
	.dark-section,
	.er-news__cta-dark,
	.er-news__dark-card,
	.er-news__venue-dark
) {
	color: #fff !important;
}

html body .er-news :is(
	.is-dark,
	.er-dark,
	.dark-section,
	.er-news__cta-dark,
	.er-news__dark-card,
	.er-news__venue-dark
) :is(
	h1,h2,h3,h4,h5,h6,
	.title,
	[class*="__title"],
	[class*="-title"]
) {
	color: #fff !important;
}

html body .er-news :is(
	.is-dark,
	.er-dark,
	.dark-section,
	.er-news__cta-dark,
	.er-news__dark-card,
	.er-news__venue-dark
) :is(
	p,li,span,strong,small,label,summary
) {
	color: rgba(255,255,255,.92) !important;
}

html body .er-news :is(
	.is-dark,
	.er-dark,
	.dark-section,
	.er-news__cta-dark,
	.er-news__dark-card,
	.er-news__venue-dark
) a:not(.button):not(.wp-element-button):not(.er-news__btn--light) {
	color: #fff !important;
	text-decoration-color: rgba(255,255,255,.55) !important;
}

html body .er-news :is(
	.is-dark,
	.er-dark,
	.dark-section,
	.er-news__cta-dark,
	.er-news__dark-card,
	.er-news__venue-dark
) :is(svg,svg *,i) {
	color: #fff !important;
	fill: currentColor;
	stroke: currentColor;
}

.er-news :is(
	.is-dark,
	.er-dark,
	.dark-section,
	.er-news__cta-dark,
	.er-news__dark-card,
	.er-news__venue-dark
) :is(.muted,.meta,.caption) {
	color: rgba(255,255,255,.75) !important;
}


/* Botón blanco dentro de fondo oscuro = texto oscuro */
html body .er-news :is(
	.is-dark,
	.er-dark,
	.dark-section,
	.er-news__cta-dark,
	.er-news__dark-card,
	.er-news__venue-dark
) :is(
	.button,
	.wp-element-button,
	.er-news__btn--light,
	.btn-light,
	.button-light
) {
	background: #fff !important;
	border-color: #fff !important;
	color: var(--er-navy) !important;
}

html body .er-news :is(
	.is-dark,
	.er-dark,
	.dark-section,
	.er-news__cta-dark,
	.er-news__dark-card,
	.er-news__venue-dark
) :is(
	.button,
	.wp-element-button,
	.er-news__btn--light,
	.btn-light,
	.button-light
) :is(span,strong,small,i,svg,svg *) {
	color: var(--er-navy) !important;
	fill: currentColor;
	stroke: currentColor;
}


/* =========================================================
   5. INTRO
   ========================================================= */

.er-news__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	margin: 0 0 14px;

	color: var(--er-green-dark);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.er-news__kicker::before {
	content: "";
	width: 24px;
	height: 2px;
	background: var(--er-green);
}

.er-news__lead {
	margin: 0;

	color: var(--er-muted);
	font-size: clamp(18px, 1.8vw, 20px);
	font-weight: 400;
	line-height: 1.65;

	text-wrap: pretty;
}


/* =========================================================
   6. RESPUESTA RÁPIDA
   ========================================================= */

.er-news__answer {
	margin: 28px 0 0;
	padding: 24px 26px;

	border: 1px solid var(--er-line);
	border-left: 4px solid var(--er-green);
	border-radius: 14px;

	background: var(--er-white);
}

.er-news__answer strong {
	display: block;
	margin-bottom: 7px;

	color: var(--er-green-dark);
	font-weight: 700;
}

.er-news__answer p:last-child {
	margin-bottom: 0;
}


/* =========================================================
   7. TÍTULOS DEL CUERPO
   ========================================================= */

.er-news h2 {
	margin: 48px 0 15px;

	color: var(--er-ink);
	font-size: clamp(23px, 2.45vw, 29px);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.015em;

	text-wrap: balance;
}

.er-news h3 {
	margin: 28px 0 10px;

	color: var(--er-ink);
	font-size: clamp(18px, 1.9vw, 22px);
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -.008em;
}

.er-news p {
	margin: 0 0 20px;
	font-weight: 400;
}

.er-news a {
	color: var(--er-green-dark);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}


/* =========================================================
   8. CHECKLIST
   ========================================================= */

.er-news__checks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 30px;

	margin: 26px 0 8px;
	padding: 0 !important;

	list-style: none;
}

.er-news__checks li {
	position: relative;

	margin: 0;
	padding-left: 28px;

	font-weight: 400;
	list-style: none;
}

.er-news__checks li::before {
	content: "✓";

	position: absolute;
	left: 0;
	top: 0;

	color: var(--er-green);
	font-weight: 900;
}


/* =========================================================
   9. NOTA
   ========================================================= */

.er-news__note {
	margin: 30px 0;
	padding: 24px 26px;

	border-radius: 14px;

	background: var(--er-green-soft);
}

.er-news__note strong {
	color: var(--er-green-dark);
	font-weight: 700;
}

.er-news__note p:last-child {
	margin-bottom: 0;
}


/* =========================================================
   10. FOTO EDITORIAL
   ========================================================= */

.er-news__figure {
	width: min(calc(100% - 32px), var(--er-wide));
	margin: 42px auto 48px;
}

.er-news__figure img {
	display: block;

	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 720px;
	margin-inline: auto;

	object-fit: contain;

	border-radius: 18px;
	background: var(--er-soft);
}

.er-news__figure figcaption {
	margin: 10px 4px 0;

	color: var(--er-muted);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
}


/* =========================================================
   11. BLOQUE ESPACIO RECREA
   Celeste más oscuro + tipografía unificada
   ========================================================= */

.er-news__recrea {
	margin: 54px 0 0;
	padding: clamp(26px, 3vw, 34px);

	border: 1px solid var(--er-blue-line);
	border-radius: 22px;

	background: var(--er-blue-soft);
	color: var(--er-blue-text);

	box-shadow: none;
}

.er-news__recrea-eyebrow {
	margin: 0 0 9px !important;

	color: #0d8fc7 !important;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
}

html body .er-news__recrea .er-news__recrea-title {
	margin: 0 0 13px !important;

	color: var(--er-blue-title) !important;
	font-size: clamp(20px, 2.2vw, 27px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.015em;

	text-wrap: balance;
}

.er-news__recrea p,
.er-news__recrea li,
.er-news__recrea span {
	color: var(--er-blue-text) !important;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.72;
}

.er-news__recrea strong {
	color: var(--er-blue-title) !important;
	font-weight: 700;
}

.er-news__recrea p:last-of-type {
	margin-bottom: 0;
}


/* =========================================================
   12. ACCIONES
   ========================================================= */

.er-news__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;

	margin-top: 22px;
}

.er-news__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 46px;
	padding: 11px 18px;

	border: 1px solid var(--er-green);
	border-radius: 10px;

	background: var(--er-green);
	color: #fff !important;

	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;

	transition:
		background-color .18s ease,
		border-color .18s ease,
		transform .18s ease;
}

.er-news__btn :is(span,strong,i,svg,svg *) {
	color: #fff !important;
	fill: currentColor;
	stroke: currentColor;
}

.er-news__btn:hover,
.er-news__btn:focus-visible {
	border-color: var(--er-green-dark);
	background: var(--er-green-dark);
	color: #fff !important;

	transform: translateY(-1px);
}

.er-news__btn--ghost {
	border-color: #7bb9d2 !important;
	background: transparent !important;
	color: var(--er-blue-title) !important;
}

.er-news__btn--ghost :is(span,strong,i,svg,svg *) {
	color: var(--er-blue-title) !important;
	fill: currentColor;
	stroke: currentColor;
}

.er-news__btn--ghost:hover,
.er-news__btn--ghost:focus-visible {
	border-color: var(--er-blue) !important;
	background: rgba(21,159,208,.10) !important;
	color: var(--er-blue-title) !important;

	transform: translateY(-1px);
}


/* =========================================================
   13. FAQ
   ========================================================= */

.er-news__faq {
	margin-top: 54px;
}

.er-news__faq-title {
	margin: 0 0 16px !important;

	color: var(--er-ink);
	font-size: clamp(23px, 2.45vw, 29px);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.015em;
}

.er-news__faq details {
	border-top: 1px solid var(--er-line);
}

.er-news__faq details:last-child {
	border-bottom: 1px solid var(--er-line);
}

.er-news__faq summary {
	position: relative;

	padding: 18px 44px 18px 0;

	cursor: pointer;

	color: var(--er-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;

	list-style: none;
}

.er-news__faq summary::-webkit-details-marker {
	display: none;
}

.er-news__faq summary::after {
	content: "+";

	position: absolute;
	right: 4px;
	top: 13px;

	color: var(--er-green);
	font-size: 26px;
	font-weight: 400;
}

.er-news__faq details[open] summary::after {
	content: "–";
}

.er-news__faq details > div {
	padding: 0 0 20px;

	color: var(--er-muted);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.72;
}


/* =========================================================
   14. RELACIONADOS
   ========================================================= */

.er-news__related {
	margin-top: 48px;
	padding-top: 26px;

	border-top: 1px solid var(--er-line);
}

.er-news__related-title {
	margin: 0 0 14px !important;

	color: var(--er-ink);
	font-size: 18px;
	font-weight: 700;
}

.er-news__related a {
	display: block;
	margin-bottom: 9px;
	font-weight: 600;
}


/* =========================================================
   15. CIERRE
   ========================================================= */

.er-news__closing {
	margin-top: 42px;
	padding: 25px;

	border-radius: 14px;

	background: var(--er-soft);
}

.er-news__closing strong {
	display: block;
	margin-bottom: 6px;

	color: var(--er-ink);
	font-size: 18px;
	font-weight: 700;
}

.er-news__closing p:last-child {
	margin-bottom: 0;
}


/* =========================================================
   16. RESPONSIVE
   ========================================================= */

@media (max-width: 640px) {

	.er-news__content {
		padding: 38px 0 64px;
	}

	.er-news__prose,
	.er-news__figure,
	.er-news__wide {
		width: min(calc(100% - 28px), var(--er-prose));
	}

	.er-news__checks {
		grid-template-columns: 1fr;
	}

	.er-news h2 {
		margin-top: 40px;
		font-size: 23px;
	}

	.er-news h3 {
		font-size: 19px;
	}

	.er-news__faq-title {
		font-size: 23px;
	}

	.er-news__answer,
	.er-news__note,
	.er-news__recrea,
	.er-news__closing,
	.er-news__cta-dark {
		padding: 21px;
	}

	.er-news__recrea {
		border-radius: 18px;
	}

	html body .er-news__recrea .er-news__recrea-title {
		font-size: 22px;
		line-height: 1.2;
	}

	.er-news__recrea p,
	.er-news__recrea li,
	.er-news__recrea span {
		font-size: 16px;
		line-height: 1.68;
	}

	.er-news__figure img {
		max-height: 560px;
	}

	.er-news__actions {
		flex-direction: column;
	}

	.er-news__btn {
		width: 100%;
	}
}


/* =========================================================
   17. ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.er-news__btn {
		transition: none;
	}
}


/* =========================================================
   18. FUENTES Y CONTEXTO
   ========================================================= */

.er-news__sources {
	margin-top: 44px;
	padding: 24px 26px;
	border: 1px solid var(--er-line);
	border-radius: 14px;
	background: #fbfcfc;
}

.er-news__sources ul {
	margin: 0;
	padding-left: 20px;
}

.er-news__sources li + li {
	margin-top: 8px;
}

.er-news__sources a {
	font-weight: 600;
}


/* =========================================================
   19. NOTICIAS RELACIONADAS DINÁMICAS
   ========================================================= */

.er-news__more {
	margin-top: 48px;
	padding-top: 26px;
	border-top: 1px solid var(--er-line);
}

.er-news__more-title {
	margin: 0 0 16px !important;
	color: var(--er-ink);
	font-size: 18px;
	font-weight: 700;
}

.er-news__more-list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0 !important;
	list-style: none;
}

.er-news__more-list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.er-news__more-list a {
	display: block;
	padding: 12px 14px;
	border: 1px solid var(--er-line);
	border-radius: 10px;
	background: #fff;
	color: var(--er-blue-title);
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	transition: border-color .18s ease, background-color .18s ease;
}

.er-news__more-list a:hover,
.er-news__more-list a:focus-visible {
	border-color: var(--er-blue-line);
	background: var(--er-blue-soft);
	color: var(--er-blue-title);
}

@media (max-width: 640px) {
	.er-news__sources {
		padding: 20px;
	}
}