/**
 * Single Post — Noticia PIMEM
 * Scope: body.single-post
 *
 * Tokens globales consumidos:
 *   --isla-red, --isla-red-dark, --isla-white, --isla-font-primary,
 *   --isla-muted, --isla-line, --isla-cat-bg, --isla-chip-fg, --isla-ink-dark
 *
 * Cargado condicionalmente solo en is_single() desde assets.php.
 *
 * @package Astra Child
 */

/* ─── Variables locales ──────────────────────────────────────────── */
:root {
	--np-dark:    #0e0e10;               /* fondo oscuro del hero y CTA — alineado con --sf-black */
	--np-muted:   #5c5c66;               /* texto secundario — alineado con --sf-gray */
	--np-line:    #e7e7ec;               /* bordes — alineado con --sf-line */
	--np-cat-bg:  var(--isla-cat-bg, #fef0f0);
	--np-chip-fg: var(--isla-chip-fg, #5c5c66);
	--np-paper:   #f4f4f6;              /* fondo tarjetas sidebar — alineado con --sf-soft */
	--np-text:    #16161a;              /* cuerpo de texto — alineado con --sf-ink */
	--np-micro:   .15s;                 /* micro-animación */
}

/* ─── Overrides de layout Astra/Elementor en single-post ─────────── */
/* Override: Astra centra el container con max-width en single */
body.single-post {
	background: #fff !important;
}

body.single-post .site-content .ast-container {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Override: eliminar card shadow del article wrapper */
body.single-post .ast-separate-container .ast-article-single,
body.single-post .ast-separate-container .ast-article-post {
	padding: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* Override: permitir containers a full width en Elementor */
body.single-post .elementor .e-con {
	--container-max-width: 100% !important;
}

/* ─── Hero section ───────────────────────────────────────────────── */
.np-hero {
	background: var(--np-dark);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	--content-width: 1180px;
}

/* Franja diagonal: desactivada intencionalmente en el diseño actual.
   Preservada aquí para referencia futura. Si se reactiva, añadir
   display: block a este selector. */
.np-hero::before { display: none; }

.np-hero > .e-con-inner,
.np-hero > * {
	position: relative;
	z-index: 2;
}

/* Override: tipografía del título del post en el hero */
.np-hero .elementor-widget-theme-post-title .elementor-heading-title {
	font-family: var(--isla-font-primary) !important;
	font-size: 34px !important;
	font-weight: 900 !important;
	line-height: 1.12;
	letter-spacing: -1.2px !important;
	color: var(--isla-white);
	text-transform: none !important;
	max-width: 980px;
	margin: 0;
}

/* ─── Meta del post (categoría + fecha + tiempo lectura) ─────────── */
.np-meta2 {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 28px;
	font-family: var(--isla-font-primary);
}

.np-cat2 {
	display: inline-block;
	padding: 5px 12px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--isla-red);
	background: var(--np-cat-bg);
	border-radius: 999px;
	text-decoration: none;
	transition: background var(--np-micro), color var(--np-micro);
}

.np-cat2:hover {
	background: var(--isla-red);
	color: var(--isla-white);
}

.np-date2,
.np-read2 {
	color: var(--np-muted);
	font-size: .95rem;
	font-weight: 600;
}

.np-dot {
	color: #9aa3ae;
}

/* ─── Layout de cuerpo (main + sidebar) ──────────────────────────── */
.np-body {
	--content-width: 1180px;
}

.np-col-main {
	flex: 1 1 0;
	min-width: 0;
	max-width: 780px;
}

.np-col-main .elementor-widget-theme-post-featured-image {
	margin: 0 0 26px;
}

.np-col-main .elementor-widget-theme-post-featured-image img {
	border-radius: 16px;
	width: 100%;
	height: auto;
}

.np-col-side {
	width: 340px;
	flex: 0 0 340px;
	align-self: flex-start;
	position: sticky;
	top: 110px;
}

/* ─── Tipografía del contenido del artículo ──────────────────────── */
.np-body .elementor-widget-theme-post-content {
	font-family: var(--isla-font-primary);
	font-size: 18px;
	line-height: 1.75;
	color: var(--np-text);
}

.np-body .elementor-widget-theme-post-content p    { margin: 0 0 1.2em; }
.np-body .elementor-widget-theme-post-content figure { margin: 0 0 1.6em; }

.np-body .elementor-widget-theme-post-content h2 {
	font-family: inherit !important;
	font-size: 21px !important;
	font-weight: 800 !important;
	letter-spacing: -.5px !important;
	color: var(--np-dark);
	text-transform: none !important;
	margin: 1.6em 0 .6em;
	line-height: 1.2;
}

.np-body .elementor-widget-theme-post-content h3 {
	font-family: inherit !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--np-dark);
	text-transform: none !important;
	margin: 1.4em 0 .5em;
}

body.single-post .elementor-widget-theme-post-content h4,
body.single-post .np-body h4,
body.single-post .entry-content h4,
body.single-post h4.elementor-heading-title {
	font-family: inherit !important;
	font-size: 11.5px !important;
	font-weight: 800 !important;
	letter-spacing: 1.6px !important;
	text-transform: uppercase !important;
	color: var(--np-muted) !important;
	margin: 22px 0 10px !important;
}

.np-body .elementor-widget-theme-post-content a {
	color: var(--isla-red);
	font-weight: 600;
	text-decoration: underline;
}

.np-body .elementor-widget-theme-post-content a:hover { color: var(--isla-red-dark); }

.np-body .elementor-widget-theme-post-content img {
	border-radius: 16px;
	height: auto;
	max-width: 100%;
}

.np-body .elementor-widget-theme-post-content ul,
.np-body .elementor-widget-theme-post-content ol {
	margin: 0 0 1.2em;
	padding-left: 1.3em;
}

.np-body .elementor-widget-theme-post-content li { margin: 0 0 .55em; }

.np-body .elementor-widget-theme-post-content blockquote {
	border-left: 4px solid var(--isla-red);
	margin: 1.4em 0;
	padding: .4em 0 .4em 1.2em;
	color: var(--np-chip-fg);
	font-weight: 500;
}

/* ─── Navegación anterior / siguiente ────────────────────────────── */
.np-nav2 {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 44px;
	padding-top: 22px;
	border-top: 1px solid var(--np-line);
	font-family: var(--isla-font-primary);
}

.np-nav2 a {
	font-size: .95rem;
	font-weight: 700;
	color: var(--isla-red);
	text-decoration: none;
}

.np-nav2 a:hover { text-decoration: underline; }

/* ─── Tarjetas de recursos (sidebar) ────────────────────────────── */
.np-recurso {
	margin: 36px 0 0;
	background: var(--np-cat-bg);
	border: 1px solid #f5c9c9;
	border-radius: 14px;
	padding: 22px 24px;
	font-family: var(--isla-font-primary);
}

.np-recursos .np-recurso + .np-recurso { margin-top: 14px; }

.np-recurso-kick {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--isla-red);
	margin: 0 0 10px;
}

.np-recurso-row {
	display: flex;
	gap: 18px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.np-recurso-row strong {
	display: block;
	color: var(--np-dark);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
}

.np-recurso-row p {
	color: var(--np-muted);
	font-size: .92rem;
	margin: 6px 0 0;
}

.np-recurso-btn {
	flex: 0 0 auto;
	background: var(--isla-red);
	color: var(--isla-white);
	font-weight: 700;
	font-size: .95rem;
	padding: 12px 22px;
	border-radius: 14px;
	text-decoration: none;
	transition: background var(--np-micro);
}

.np-recurso-btn:hover {
	background: var(--isla-red-dark);
	color: var(--isla-white);
}

/* Badge "Solo socios" */
.np-rec-socios {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 10px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--isla-white);
	background: var(--np-dark);
	border-radius: 999px;
	vertical-align: middle;
}

/* Formulario dentro de tarjeta de recurso */
.np-recurso-form {
	background: var(--isla-white);
	border-color: var(--np-line);
}

/* Override: WPForms aplica estilos inline al título del form */
.np-recurso-form .wpforms-head-container .wpforms-title {
	font-family: inherit !important;
	font-size: 1.4rem !important;
	font-weight: 600;
	color: var(--np-dark);
	text-transform: none !important;
	margin: 0 0 6px;
}

.np-recurso-form .wpforms-head-container .wpforms-description {
	color: var(--np-muted);
	font-size: .95rem;
}

.np-recurso-form .wpforms-field label.wpforms-field-label {
	font-weight: 600;
	color: var(--np-dark);
	font-size: .95rem;
}

.np-recurso-form input[type="text"],
.np-recurso-form input[type="email"],
.np-recurso-form select,
.np-recurso-form textarea {
	border: 1px solid #d9dee5;
	border-radius: 10px;
	padding: 10px 14px;
	max-width: 100%;
	font-family: inherit;
}

.np-recurso-form input:focus,
.np-recurso-form select:focus,
.np-recurso-form textarea:focus {
	outline: 2px solid var(--isla-red);
	border-color: var(--isla-red);
}

/* Override: WPForms aplica !important al botón submit */
.np-recurso-form button[type="submit"] {
	background: var(--isla-red) !important;
	color: var(--isla-white) !important;
	font-weight: 700 !important;
	border: none !important;
	border-radius: 14px !important;
	padding: 13px 26px !important;
	cursor: pointer;
	font-family: inherit !important;
}

.np-recurso-form button[type="submit"]:hover {
	background: var(--isla-red-dark) !important;
}

/* ─── Sidebar — lista de entradas relacionadas ───────────────────── */
.np-side-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.np-side-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: var(--isla-white);
	border: 1px solid var(--np-line);
	border-radius: 14px;
	padding: 12px;
	text-decoration: none;
	transition: box-shadow var(--np-micro), transform var(--np-micro);
	will-change: transform;
}

.np-side-item:hover {
	box-shadow: 0 12px 32px rgba(11, 13, 16, .08);
	transform: translateY(-2px);
}

.np-side-thumb {
	width: 74px;
	height: 74px;
	flex: 0 0 74px;
	border-radius: 10px;
	background-size: cover;
	background-position: center;
	background-color: #f1f3f5;
}

.np-side-tx { min-width: 0; }

.np-side-tx strong {
	display: -webkit-box;
	-webkit-line-clamp: 3; /* prefijo requerido por todos los browsers actuales */
	line-clamp: 3;         /* estándar CSS Overflow Level 4 — forward compat */
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--np-dark);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.35;
}

.np-side-tx em {
	font-style: normal;
	display: block;
	margin-top: 6px;
	color: var(--np-muted);
	font-size: .78rem;
	font-weight: 600;
}

/* ─── Sección de noticias relacionadas ───────────────────────────── */
.np-rel {
	--content-width: 1180px;
	font-family: var(--isla-font-primary);
}

.np-eyebrow {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--isla-red);
	margin: 0 0 14px;
}

.np-h2 {
	font-family: var(--isla-font-primary) !important;
	font-size: clamp(1.8rem, 3.2vw, 2.8rem) !important;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.08;
	color: var(--np-dark);
	text-transform: none !important;
	margin: 0;
}

.np-relhead {
	max-width: 880px;
	margin: 0 0 34px;
}

.np-rel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
}

.np-rel-card {
	display: flex;
	flex-direction: column;
	padding: 26px;
	background: var(--isla-white);
	border: 1px solid var(--np-line);
	border-radius: 16px;
	transition: box-shadow .18s, transform .18s;
	will-change: transform;
}

.np-rel-card:hover {
	box-shadow: 0 16px 44px rgba(11, 13, 16, .09);
	transform: translateY(-3px);
}

.np-rel-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}

.np-rel-cat {
	padding: 4px 12px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--isla-red);
	background: var(--np-cat-bg);
	border-radius: 999px;
}

.np-rel-date {
	font-size: .88rem;
	font-weight: 500;
	color: var(--np-muted);
}

/* Override: Elementor / Astra inyectan font-size en h3 */
.np-rel-card h3 {
	font-family: inherit !important;
	font-size: 1.12rem !important;
	font-weight: 600;
	line-height: 1.38;
	margin: 0 0 14px;
	flex: 1;
	text-transform: none !important;
	letter-spacing: -.01em;
}

.np-rel-card h3 a {
	color: var(--np-dark);
	text-decoration: none;
}

.np-rel-card h3 a:hover { color: var(--isla-red); }

.np-rel-link {
	font-size: .92rem;
	font-weight: 700;
	color: var(--isla-red);
	text-decoration: none;
}

.np-rel-link:hover { text-decoration: underline; }

/* Chips de categoría (sidebar y sección relacionados) */
.np-cats-label {
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--np-muted);
	margin: 40px 0 14px;
}

.np-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.np-cats-chip {
	display: inline-block;
	padding: 9px 18px;
	font-size: .92rem;
	font-weight: 600;
	color: var(--np-chip-fg);
	background: var(--isla-white);
	border: 1px solid var(--np-line);
	border-radius: 999px;
	text-decoration: none;
	transition: border-color var(--np-micro), color var(--np-micro);
}

.np-cats-chip:hover {
	border-color: var(--isla-red);
	color: var(--isla-red);
}

.np-cats-chip.on {
	background: var(--isla-red);
	border-color: var(--isla-red);
	color: var(--isla-white);
}

/* Ajustes del sidebar para los elementos de relación */
.np-col-side .np-h2          { font-size: 1.3rem !important; }
.np-col-side .np-eyebrow     { font-size: .85rem; margin: 0 0 10px; }
.np-col-side .np-relhead     { margin: 0 0 16px; }
.np-col-side .np-cats-label  { margin: 28px 0 12px; }

.np-col-side .np-rel-grid {
	grid-template-columns: 1fr;
	gap: 14px;
}

.np-col-side .np-rel-card {
	padding: 20px;
	background: var(--np-paper);
	border-color: #eceef2;
}

.np-col-side .np-rel-card h3 {
	font-size: 1rem !important;
	margin: 0 0 10px;
}

.np-col-side .np-cats-chip {
	font-size: .85rem;
	padding: 7px 14px;
	background: var(--np-paper);
	border-color: var(--np-line);
}

.np-col-side .np-cats-chip.on {
	background: var(--isla-red);
	border-color: var(--isla-red);
}

/* ─── Footer band: volver + CTA hacerse socio ────────────────────── */
.np-foot-band {
	font-family: var(--isla-font-primary);
}

.np-foot-band .nav {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 24px 56px;
}

.np-foot-band .nav a {
	font-weight: 700;
	font-size: 1rem;
	color: var(--isla-red);
	text-decoration: none;
}

.np-foot-band .nav a:hover { text-decoration: underline; }

/* Bloque CTA con imagen de fondo y gradiente rojo */
.np-foot-band .cta {
	position: relative;
	overflow: hidden;
	background: var(--np-dark);
	color: var(--isla-white);
	isolation: isolate;
}

/* Imagen de fondo semitransparente */
.np-foot-band .cta .cbg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&w=1600&q=70');
	background-size: cover;
	background-position: center;
	opacity: .4;
}

/* Gradiente rojo sobre la imagen */
.np-foot-band .cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(95deg,
		rgba(227, 49, 48, .92) 0%,
		rgba(227, 49, 48, .55) 55%,
		transparent 100%);
}

.np-foot-band .cta .wrap {
	position: relative;
	z-index: 2;
	max-width: 1180px;
	margin: 0 auto;
	padding: 80px 24px;
}

.np-foot-band .cta .eyebrow {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--isla-white);
	opacity: .85;
	margin: 0 0 14px;
}

/* Override: Elementor puede forzar font-size en h2 */
.np-foot-band .cta h2 {
	font-family: inherit !important;
	font-size: clamp(1.8rem, 3.4vw, 3rem) !important;
	font-weight: 600;
	letter-spacing: -.02em;
	text-transform: none !important;
	color: var(--isla-white);
	max-width: 760px;
	margin: 0 0 14px;
	line-height: 1.08;
}

.np-foot-band .cta p {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, .95);
	max-width: 600px;
	margin: 0 0 26px;
}

.np-foot-band .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 24px;
	font-weight: 700;
	font-size: 1rem;
	border-radius: var(--isla-radius-pill);
	border: 2px solid rgba(255, 255, 255, .6);
	color: var(--isla-white);
	text-decoration: none;
	transition: background .18s, color .18s;
}

.np-foot-band .btn:hover {
	background: var(--isla-white);
	color: var(--np-dark);
}

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	/* Sidebar pasa a debajo del contenido principal */
	.np-body > .e-con-inner { flex-wrap: wrap; }

	.np-col-side {
		width: 100%;
		flex: 1 1 100%;
		position: static;
	}
}

@media (max-width: 768px) {
	.np-foot-band .cta .wrap { padding: 56px 20px; }
}