/**
 * Blog — archivo y entrada individual.
 * Design System v6: oscuro para el espacio, vidrio para el contenido, Lava
 * para la accion. Depende de los tokens declarados en global.css.
 *
 * Dos ambitos quedan CONGELADOS en v3 por decision del cliente y no se tocan:
 * las reglas base de .post-card (las comparte .single-relacionados) y las
 * secciones .single-relacionados y .single-cta al final de esta hoja. El
 * archivo /blog/ recibe v6 con reglas mas especificas (.blog-archive .post-card).
 */

/* ==========================================================================
   ARCHIVO — hero. El chrome lo pone .tpl-hero (global.css); aqui solo el
   offset del nav, que global no conoce.
   ========================================================================== */
.blog-archive__hero {
	padding: calc(var(--nav-height) + 4rem) 0 2.5rem;
}

@media (min-width: 768px) {
	.blog-archive__hero { padding: calc(var(--nav-height) + 6rem) 0 3rem; }
}

.blog-archive__eyebrow { margin: 0; }

.blog-archive__body { padding-block: 0 5rem; }

/* ==========================================================================
   GRID DE TARJETAS
   ========================================================================== */
.post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-24);
}

@media (min-width: 640px) {
	.post-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-32); }
}

@media (min-width: 1024px) {
	.post-grid { grid-template-columns: repeat(3, 1fr); }
}

/* En el archivo la primera tarjeta manda: ocupa el ancho completo. */
@media (min-width: 1024px) {
	.blog-archive .post-grid > .post-card:first-child { grid-column: 1 / -1; }

	.blog-archive .post-grid > .post-card:first-child {
		display: grid;
		grid-template-columns: 1.15fr 1fr;
		align-items: stretch;
		gap: 0;
	}

	.blog-archive .post-grid > .post-card:first-child .post-card__media { aspect-ratio: auto; height: 100%; }
	.blog-archive .post-grid > .post-card:first-child .post-card__body { padding: var(--space-48); justify-content: center; }
	.blog-archive .post-grid > .post-card:first-child .post-card__title { font-size: clamp(1.75rem, 3vw, 2.5rem); }
}

.post-grid--3 { grid-template-columns: 1fr; }

@media (min-width: 640px)  { .post-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* -- Tarjeta: reglas base CONGELADAS en v3 -------------------------------
   Las comparte .single-relacionados (ambito congelado por tokens al final de
   global.css). No se editan: el archivo /blog/ las sobreescribe mas abajo con
   .blog-archive .post-card. */
.post-card {
	/* Ambito oscuro: los alias legacy se redeclaran, igual que en `.card`. */
	--text-strong: var(--chalk);
	--text-body:   rgba(255, 249, 250, 0.72);
	--text-muted:  rgba(255, 249, 250, 0.56);
	--text-accent: var(--lava-light);
	--color-white: var(--text-strong);
	--color-chalk: var(--text-strong);
	--color-muted: var(--text-muted);

	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: rgba(0, 22, 33, 0.55);
	border: 1px solid rgba(255, 249, 250, 0.12);
	border-radius: var(--radius-card);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	box-shadow: var(--shadow-3);
	transition: transform var(--t-slow) var(--ease),
	            border-color var(--t-slow) var(--ease),
	            box-shadow var(--t-slow) var(--ease);
}

.post-card:hover {
	/* v6: el hover no desplaza */
	border-color: rgba(255, 249, 250, 0.24);
	box-shadow: var(--shadow-3);
}

.post-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: rgba(255, 249, 250, 0.05);
	position: relative;
}

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--t-slow) var(--ease);
}

.post-card:hover .post-card__media img { /* v6: el hover no desplaza */ }

/* Marcador cuando la entrada aun no tiene imagen destacada. */
.post-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 2.5rem;
	color: rgba(255, 249, 250, 0.22);
	background: var(--grad-dark-card);
}

.post-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.75rem;
	flex: 1;
}

.post-card__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.8125rem;
	color: var(--text-muted);
}

.post-card__dot { opacity: 0.6; }

.post-card__title {
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 0;
	color: var(--text-strong);
}

.post-card__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--lava), var(--lava));
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--t-base) var(--ease);
}

.post-card__title a:hover { background-size: 100% 2px; }

.post-card__excerpt {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--text-body);
}

.post-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-accent);
	transition: gap var(--t-base) var(--ease);
}

.post-card:hover .post-card__cta { gap: 0.875rem; }

/* -- Tarjeta en el ARCHIVO: v6 ---------------------------------------------
   Vidrio de global.css, tokens de ambito oscuro, hover sin desplazamiento:
   el borde sube de contraste y la elevacion sube un nivel. */
.blog-archive .post-card {
	--text-muted: var(--ink-300);
	--text-faint: var(--ink-400);
	--text-accent: var(--lava-400);
	--color-muted: var(--text-muted);

	background: var(--glass-bg);
	border-color: var(--surface-border);
	border-radius: var(--radius-md);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	box-shadow: var(--shadow-2);
	transition: border-color var(--dur-base) var(--ease-out),
	            box-shadow var(--dur-base) var(--ease-out);
}

.blog-archive .post-card:hover {
	transform: none;
	border-color: var(--surface-border-strong);
	box-shadow: var(--shadow-3);
}

.blog-archive .post-card__media { background: var(--surface); }
.blog-archive .post-card__media img { transition: none; }
.blog-archive .post-card:hover .post-card__media img { transform: none; }

.blog-archive .post-card__placeholder { color: var(--text-faint); }

.blog-archive .post-card__body { gap: var(--space-12); padding: var(--space-24); }

.blog-archive .post-card__title { font-family: var(--font-display); }

/* El titulo no crece un subrayado: en hover el color se aclara. */
.blog-archive .post-card__title a {
	background-image: none;
	transition: color var(--dur-instant) var(--ease-out);
}

.blog-archive .post-card__title a:hover { color: var(--text-accent); }

/* "Leer articulo" es un .btn--link: el subrayado se afirma, el gap no crece. */
.blog-archive .post-card__cta {
	padding-top: 0;
	font-size: .9375rem;
	transition: box-shadow var(--dur-fast) var(--ease-out);
}

.blog-archive .post-card:hover .post-card__cta {
	gap: var(--space-8);
	box-shadow: inset 0 -1px 0 0 var(--lava-400);
}

/* -- Estado vacio -- */
.blog-vacio {
	text-align: center;
	align-items: center;
	max-width: 32rem;
	margin-inline: auto;
}

.blog-vacio i { font-size: 3rem; color: var(--text-accent); }
.blog-vacio h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin: 0; }
.blog-vacio p { margin: 0; }

/* -- Paginacion -- */
.blog-archive .pagination,
.blog-pagination { margin-top: var(--space-48); }

.blog-archive .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-8);
}

.blog-archive .page-numbers {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	min-width: var(--tap-min);
	min-height: var(--tap-min);
	padding: 0 var(--space-16);
	justify-content: center;
	border-radius: var(--radius-sm);
	border: 1px solid var(--surface-border);
	background: var(--surface);
	color: var(--text-body);
	font-weight: 600;
	font-size: .9375rem;
	transition: border-color var(--dur-instant) var(--ease-out),
	            color var(--dur-instant) var(--ease-out),
	            background var(--dur-instant) var(--ease-out);
}

.blog-archive .page-numbers:hover {
	background: var(--surface-2);
	border-color: var(--text-strong);
	color: var(--text-strong);
}

.blog-archive .page-numbers.current {
	background: var(--lava);
	border-color: var(--lava);
	color: var(--on-accent);
}

.blog-archive .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	color: var(--text-faint);
}

/* ==========================================================================
   ENTRADA — hero. Sobre .tpl-hero (global.css): centrado, eyebrow de
   categoria, titulo display, fila de metadatos y la imagen destacada ancha.
   ========================================================================== */
.single-hero { padding: calc(var(--nav-height) + 3.5rem) 0 0; }

@media (min-width: 768px) {
	.single-hero { padding: calc(var(--nav-height) + 5rem) 0 0; }
}

.single-hero__inner { max-width: 56rem; }

.single-hero__eyebrow { margin: 0; }
.single-hero__eyebrow a { color: var(--text-accent); }
.single-hero__eyebrow a:hover { color: var(--text-strong); }

/* Los titulos de entrada son largos: mas ancho de linea que un hero de pagina. */
.single-hero__title {
	font-size: clamp(2.25rem, 6vw, 4rem);
	max-width: 24ch;
}

.single-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-16) var(--space-32);
	padding-bottom: var(--space-32);
}

.single-hero__autor {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	text-align: left;
}

.single-hero__avatar {
	width: 44px;
	height: 44px;
	max-width: 100%;
	border-radius: var(--radius-full);
	border: 1px solid var(--surface-border);
}

.single-hero__autor-nombre {
	display: block;
	font-weight: 600;
	color: var(--text-strong);
	font-size: .9375rem;
	line-height: 1.4;
}

.single-hero__autor-rol {
	display: block;
	font-size: .8125rem;
	color: var(--text-muted);
	line-height: 1.4;
}

.single-hero__datos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-hero__datos li {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-size: .875rem;
	color: var(--text-muted);
}

.single-hero__datos i { font-size: 1.125rem; color: var(--text-faint); }

.single-hero__imagen {
	margin: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--surface-border);
	box-shadow: var(--shadow-3);
	aspect-ratio: 16 / 8;
	max-width: 100%;
}

.single-hero__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   ENTRADA — cuerpo (grid invertido: lateral estrecho + contenido ancho)
   ========================================================================== */
.single-body { padding-block: var(--space-48) var(--space-64); }

.single-body__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-32);
}

@media (min-width: 1024px) {
	.single-body__grid {
		grid-template-columns: 6.5rem minmax(0, 1fr);
		gap: var(--space-64);
		align-items: start;
	}
}

.single-aside__sticky {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

@media (min-width: 1024px) {
	.single-aside__sticky {
		position: sticky;
		top: calc(var(--nav-height) + 1.5rem);
	}
}

/* Los titulos del lateral son eyebrows quietos (.t-eyebrow--quiet). */
.single-aside__titulo { margin: 0; font-size: .6875rem; }

.single-aside__titulo--tags { margin-top: var(--space-16); }

.single-share {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1024px) {
	.single-share { flex-direction: column; }
}

.single-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-min);
	height: var(--tap-min);
	border-radius: var(--radius-sm);
	background: var(--surface);
	border: 1px solid var(--surface-border);
	color: var(--text-body);
	font-size: 1.25rem;
	cursor: pointer;
	transition: color var(--dur-instant) var(--ease-out),
	            background var(--dur-instant) var(--ease-out),
	            border-color var(--dur-instant) var(--ease-out);
}

.single-share__link:hover {
	color: var(--text-strong);
	background: var(--surface-2);
	border-color: var(--surface-border-strong);
}

.single-share__link--copiar.is-copiado {
	color: var(--success);
	border-color: var(--success);
}

.single-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-tags__pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-12);
	border-radius: var(--radius-full);
	background: var(--surface);
	border: 1px solid var(--surface-border);
	font-size: .75rem;
	font-weight: 600;
	color: var(--text-body);
	transition: color var(--dur-instant) var(--ease-out),
	            background var(--dur-instant) var(--ease-out),
	            border-color var(--dur-instant) var(--ease-out);
}

.single-tags__pill:hover {
	color: var(--text-strong);
	background: var(--surface-2);
	border-color: var(--text-strong);
}

/* -- Contenido del articulo -- */
.single-content {
	max-width: 68ch;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--text-body);
}

.single-content > *:first-child { margin-top: 0; }
.single-content p { margin: 0 0 var(--space-24); }

.single-content h2 {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -.024em;
	line-height: 1.15;
	color: var(--text-strong);
	margin: var(--space-48) 0 var(--space-16);
}

.single-content h3 {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: var(--text-strong);
	margin: var(--space-32) 0 var(--space-12);
}

.single-content h4 {
	font-family: var(--font-sans);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text-strong);
	margin: var(--space-32) 0 var(--space-8);
}

.single-content strong { color: var(--text-strong); font-weight: 600; }

.single-content a {
	color: var(--text-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.single-content a:hover { color: var(--text-strong); }

.single-content ul,
.single-content ol { margin: var(--space-16) 0 var(--space-24); padding-left: var(--space-24); }
.single-content ul { list-style: disc; }
.single-content ol { list-style: decimal; }
.single-content li { margin-bottom: var(--space-8); }

.single-content img,
.single-content figure img {
	border-radius: var(--radius-md);
	max-width: 100%;
	height: auto;
}

.single-content figure { margin: var(--space-32) 0; }

.single-content figcaption {
	margin-top: var(--space-12);
	font-size: .8125rem;
	color: var(--text-muted);
	text-align: center;
}

.single-content blockquote {
	margin: var(--space-32) 0;
	padding: var(--space-24) var(--space-32);
	border-left: 3px solid var(--lava);
	background: var(--surface);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-size: 1.125rem;
	color: var(--text-strong);
}

.single-content blockquote p:last-child { margin-bottom: 0; }

.single-content hr {
	margin: var(--space-48) 0;
	border: none;
	border-top: 1px solid var(--surface-border);
}

/* Sin mono en v6: el codigo va en Poppins con tracking (rol utility). */
.single-content pre {
	overflow-x: auto;
	padding: var(--space-16);
	border-radius: var(--radius-sm);
	background: var(--surface);
	border: 1px solid var(--surface-border);
	font-family: var(--font-sans);
	font-size: .875rem;
	color: var(--text-strong);
	margin: 0 0 var(--space-24);
}

.single-content code {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: .875em;
	padding: .15em .4em;
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	color: var(--text-strong);
}

.single-content pre code { background: none; padding: 0; font-weight: 500; }

.single-content table { width: 100%; border-collapse: collapse; margin: var(--space-32) 0; }
.single-content th,
.single-content td { padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--surface-border); text-align: left; }
.single-content th { color: var(--text-strong); font-weight: 600; }

.single-content__paginas {
	margin: var(--space-32) 0 0;
	font-size: .875rem;
	color: var(--text-muted);
}

/* ==========================================================================
   ENTRADA — tarjeta de autor (.card de vidrio; los colores los ponen los
   tokens de ambito de global.css)
   ========================================================================== */
.single-autor {
	flex-direction: row;
	align-items: center;
	gap: var(--space-24);
	margin-top: var(--space-48);
}

@media (max-width: 560px) {
	.single-autor { flex-direction: column; text-align: center; }
}

.single-autor__foto {
	width: 88px;
	height: 88px;
	max-width: 100%;
	flex-shrink: 0;
	border-radius: var(--radius-full);
	border: 2px solid var(--surface-border);
	object-fit: cover;
}

.single-autor__texto { display: flex; flex-direction: column; gap: var(--space-4); }

.single-autor__etiqueta { margin: 0; font-size: .6875rem; }

.single-autor__nombre {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.25;
}

.single-autor__bio {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
}

/* ==========================================================================
   ENTRADA — relacionados
   ========================================================================== */
.single-relacionados { padding-block: 1rem 4rem; }

.single-relacionados__titulo {
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--text-strong);
	margin: 0 0 2rem;
}

/* ==========================================================================
   ENTRADA — CTA final
   ========================================================================== */
.single-cta { padding-block: 0 5rem; }

.single-cta__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 3rem 1.75rem;
	text-align: center;
	border-radius: var(--radius-panel);
	border: 1px solid rgba(255, 249, 250, 0.12);
	background: var(--abyss);
	background-image:
		radial-gradient(90% 140% at 12% 0%, rgba(255, 65, 3, 0.42) 0%, rgba(255, 65, 3, 0) 62%),
		radial-gradient(80% 130% at 92% 100%, rgba(253, 24, 67, 0.36) 0%, rgba(253, 24, 67, 0) 60%),
		var(--grad-dark-card);
	box-shadow: 0 32px 80px -32px rgba(0, 11, 17, 0.9);
}

@media (min-width: 768px) {
	.single-cta__panel { padding: 4.5rem 3rem; }
}

.single-cta__titulo {
	position: relative;
	z-index: 1;
	max-width: 24ch;
	margin: 0 auto 1rem;
	font-size: clamp(1.75rem, 4.5vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.08;
	color: var(--chalk);
}

.single-cta__texto {
	position: relative;
	z-index: 1;
	max-width: 52ch;
	margin: 0 auto 2rem;
	font-size: clamp(1rem, 2vw, 1.125rem);
	line-height: 1.6;
	color: rgba(255, 249, 250, 0.78);
}

.single-cta__acciones {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.875rem;
}

/* El boton fantasma vive sobre oscuro: se fuerza el contorno claro. */
.single-cta__acciones .btn-ghost {
	background: transparent;
	border-color: rgba(255, 249, 250, 0.28);
	color: var(--chalk);
}

.single-cta__acciones .btn-ghost:hover {
	background: rgba(255, 249, 250, 0.08);
	border-color: var(--chalk);
	color: var(--chalk);
}

/* ==========================================================================
   AMBITO CONGELADO (v3) — las cards relacionadas al final de cada entrada
   conservan su hover original. El archivo del blog (.post-grid) ya no se
   desplaza en hover (v6); estas si, por decision.
   ========================================================================== */
.single-relacionados .post-card:hover { transform: translateY(-4px); }
.single-relacionados .post-card:hover .post-card__media img { transform: scale(1.04); }