/**
 * GemRadar — estilos del blog Conocimientos
 * La cabecera/pie usan el mismo .wrap que la home (1120px).
 * Solo el contenido de lectura se estrecha.
 */
.blog-main {
	max-width: 860px;
	margin: 0 auto;
}
.blog-hero {
	padding: 48px 0 28px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 32px;
}
.blog-hero h1 {
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	margin-bottom: 12px;
}
.blog-hero p {
	color: var(--muted);
	font-size: 1.05rem;
	max-width: 40rem;
}
.blog-badge {
	display: inline-block;
	font-family: 'Space Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var(--border);
	margin-bottom: 14px;
}
.blog-badge.public { color: var(--accent); border-color: rgba(0,255,136,0.35); }
.blog-badge.lab { color: #fbbf24; border-color: rgba(251,191,36,0.4); }

.blog-list { display: flex; flex-direction: column; gap: 16px; margin: 0 0 48px; }
.blog-card {
	display: block;
	padding: 22px 24px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	text-decoration: none;
	transition: border-color 0.15s, transform 0.15s;
}
.blog-card:hover { border-color: rgba(0,255,136,0.45); transform: translateY(-1px); }
.blog-card h2 { font-size: 1.25rem; margin: 8px 0 8px; font-weight: 700; }
.blog-card .meta { color: var(--muted); font-size: 0.85rem; font-family: 'Space Mono', monospace; }
.blog-card .summary { color: var(--muted); margin-top: 8px; }

.blog-article { padding: 36px 0 24px; }
.blog-article .meta-row {
	display: flex; flex-wrap: wrap; gap: 10px 16px;
	align-items: center; color: var(--muted); font-size: 0.9rem;
	margin-bottom: 20px;
}
.blog-article h1 {
	font-size: clamp(1.7rem, 3.5vw, 2.2rem);
	font-weight: 800; letter-spacing: -0.03em; margin-bottom: 10px;
	line-height: 1.2;
}
.blog-prose { font-size: 1.05rem; line-height: 1.75; color: var(--text); }
.blog-prose h2 { font-size: 1.35rem; margin: 2rem 0 0.75rem; font-weight: 750; }
.blog-prose h3 { font-size: 1.15rem; margin: 1.6rem 0 0.6rem; }
.blog-prose p { margin: 0 0 1.1rem; }
.blog-prose ul, .blog-prose ol { margin: 0 0 1.1rem 1.2rem; }
.blog-prose li { margin: 0.35rem 0; }
.blog-prose blockquote {
	margin: 1.2rem 0;
	padding: 12px 16px;
	border-left: 3px solid var(--accent);
	background: rgba(0,255,136,0.06);
	color: var(--muted);
	border-radius: 0 10px 10px 0;
}
.blog-prose hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
.blog-prose code {
	font-family: 'Space Mono', monospace;
	font-size: 0.86em;
	background: var(--surface2);
	padding: 2px 6px;
	border-radius: 6px;
}
.blog-code {
	background: #0d0d14;
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 16px;
	overflow-x: auto;
	margin: 0 0 1.2rem;
	font-size: 0.88rem;
}
.blog-table-wrap { overflow-x: auto; margin: 0 0 1.4rem; }
.blog-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}
.blog-table th, .blog-table td {
	border: 1px solid var(--border);
	padding: 10px 12px;
	text-align: left;
}
.blog-table th { background: var(--surface2); color: var(--accent); font-weight: 650; }
.blog-img {
	display: block;
	max-width: 100%;
	border-radius: 12px;
	margin: 1rem 0 1.4rem;
	border: 1px solid var(--border);
}

.blog-lab-gate {
	margin: 28px 0;
	padding: 24px;
	border-radius: 14px;
	border: 1px dashed rgba(251,191,36,0.45);
	background: rgba(251,191,36,0.07);
}
.blog-lab-gate h2 { font-size: 1.2rem; margin-bottom: 8px; color: #fbbf24; }
.blog-lab-gate p { color: var(--muted); margin-bottom: 14px; }
.blog-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.blog-form-stack {
	flex-direction: column;
	align-items: stretch;
}
.blog-form input[type="email"],
.blog-form input[type="text"],
.blog-form textarea {
	flex: 1 1 220px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 12px 14px;
	color: var(--text);
	font: inherit;
}
.blog-form textarea { min-height: 110px; width: 100%; flex-basis: 100%; }
.blog-form button {
	background: var(--accent);
	color: #04140c;
	border: none;
	border-radius: 10px;
	padding: 12px 18px;
	font-weight: 700;
	cursor: pointer;
	align-self: flex-start;
}
.blog-form button.blog-btn-secondary,
.blog-btn-secondary {
	background: transparent;
	color: var(--text);
	border: 1px solid var(--border);
}
.blog-form button.blog-btn-secondary:hover {
	border-color: var(--accent);
	color: var(--accent);
	filter: none;
}
.blog-form .hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }
.blog-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--muted);
	width: 100%;
}
.blog-consent input {
	margin-top: 3px;
	flex: 0 0 auto;
}
.blog-consent a { color: var(--accent-blue); }
.blog-msg { margin-top: 12px; font-size: 0.95rem; }
.blog-msg.ok { color: var(--accent); }
.blog-msg.err { color: var(--danger); }

.blog-comments { margin: 40px 0 24px; padding-top: 28px; border-top: 1px solid var(--border); }
.blog-comments h2 { font-size: 1.25rem; margin-bottom: 16px; }
.blog-comment {
	padding: 14px 0;
	border-bottom: 1px solid var(--border);
}
.blog-comment .who { font-weight: 650; }
.blog-comment .when { color: var(--muted); font-size: 0.8rem; margin-left: 8px; font-family: 'Space Mono', monospace; }
.blog-comment .txt { margin-top: 6px; color: var(--text); white-space: pre-wrap; }
.blog-share {
	margin: 28px 0;
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.blog-share a {
	display: inline-block;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid var(--border);
	text-decoration: none;
	font-size: 0.9rem;
}
.blog-share a:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.nav-link.active { color: var(--accent); }