/*!
 * KZMentor — Templates por defecto (single, archive, page, 404, search).
 *
 * Mobile-first. Theme-aware: usa los tokens del preset activo
 * (--kze-accent, --kze-surface, --kze-text…) con fallback a los
 * tokens base (--kz-text, --kz-link, --kz-bg, etc.) cuando el
 * usuario no ha elegido un preset.
 *
 * Solo se carga si NO hay plantilla Elementor — el tema toma el
 * lienzo y dibuja un layout bonito y legible por defecto.
 *
 * Bloques principales:
 *   1. Token bridge          — mapea --kze-* → --kz-* + nuevos tokens
 *   2. Typography            — escala fluida + jerarquía editorial
 *   3. Single (post / page)  — hero, meta, contenido, tags, breadcrumb
 *   4. Archive / Index grid  — magazine layout, primera card destacada
 *   5. Empty states          — 404, search sin resultados
 *   6. Comments               — diseño limpio
 *   7. Pagination             — botones compactos
 *   8. Reduced-motion         — respeta prefers-reduced-motion
 *
 * @package KZMentor
 * @since   1.3.0
 */

/* ============================================================
   1. Token bridge — preset → tokens base + nuevos
   ============================================================ */
:root {
	/*
	 * Tokens del preset con fallback estático para navegadores sin
	 * color-mix() (Safari <16.4, Chrome <111). Los rgba() concretos son
	 * neutros que funcionan razonablemente en cualquier paleta. Cuando
	 * hay un preset activo, el var(--kze-*) gana antes de llegar al
	 * fallback estático.
	 */
	--kz-accent:        var(--kze-accent, var(--kz-link));
	--kz-surface:       var(--kze-surface, var(--kz-bg));
	--kz-surface-soft:  var(--kze-secondary, rgba(127,127,127,.08));
	--kz-text-strong:   var(--kze-text, var(--kz-text));
	--kz-text-muted:    var(--kze-muted, var(--kz-muted));
	--kz-border-soft:   var(--kze-border, var(--kz-border));
	--kz-gradient:      var(--kze-gradient, linear-gradient(135deg, var(--kz-accent), #1f2937));
	--kz-glow:          var(--kze-glow, 0 8px 28px rgba(99,102,241,.22));
	--kz-font-heading:  var(--kze-font-heading, var(--kz-stack));
	--kz-font-body:     var(--kze-font-body, var(--kz-stack));

	/* Tipografía editorial (mobile-first; clamp escala con viewport) */
	--kz-fs-display: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
	--kz-fs-h1:      clamp(1.875rem, 1.4rem + 2.2vw, 3rem);
	--kz-fs-h2:      clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
	--kz-fs-h3:      clamp(1.25rem, 1.125rem + .6vw, 1.625rem);
	--kz-fs-lead:    clamp(1.0625rem, 1rem + .35vw, 1.25rem);
	--kz-fs-body:    clamp(1rem, .95rem + .25vw, 1.125rem);
	--kz-fs-sm:      .875rem;
	--kz-fs-xs:      .75rem;

	/* Espaciado fluido */
	--kz-space-2xs: .375rem;
	--kz-space-xs:  .625rem;
	--kz-space-sm:  1rem;
	--kz-space-md:  1.5rem;
	--kz-space-lg:  clamp(2rem, 1.5rem + 2vw, 3.5rem);
	--kz-space-xl:  clamp(3rem, 2rem + 4vw, 6rem);

	/* Radios */
	--kz-radius-sm: .5rem;
	--kz-radius-md: .875rem;
	--kz-radius-lg: 1.25rem;
	--kz-radius-xl: 1.75rem;

	/* Anchos legibles */
	--kz-prose:      68ch;  /* artículos largos */
	--kz-prose-wide: 78ch;  /* listados / hero */
}

/*
 * Si el navegador soporta color-mix(), upgradeamos los tokens a
 * versiones inteligentes que se mezclan con el accent del preset.
 * Los browsers sin soporte conservan los fallbacks rgba() de arriba.
 */
@supports (color: color-mix(in srgb, red, blue)) {
	:root {
		--kz-surface-soft: var(--kze-secondary, color-mix(in srgb, var(--kz-text-strong) 4%, transparent));
		--kz-gradient:     var(--kze-gradient, linear-gradient(135deg, var(--kz-accent), color-mix(in srgb, var(--kz-accent) 50%, #000)));
		--kz-glow:         var(--kze-glow, 0 8px 28px color-mix(in srgb, var(--kz-accent) 22%, transparent));
	}
}

/*
 * Cuando hay preset activo, el body adopta su paleta — la elección
 * del usuario en el admin gana sobre prefers-color-scheme. Si no hay
 * preset, se respeta el modo claro/oscuro del SO (definido en critical.css).
 */
body {
	font-family: var(--kz-font-body);
	background: var(--kze-primary, var(--kz-bg));
	color:      var(--kze-text, var(--kz-text));
}

a { color: var(--kz-accent); }

/*
 * Focus-visible — el outline en critical.css usa --kz-link (que NO
 * sigue el preset por restricción CSS de variables circulares).
 * Aquí lo redirigimos al --kz-accent para que el indicador de foco
 * adopte el color del preset elegido por el usuario.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--kz-accent);
	outline-offset: 2px;
}

/* ============================================================
   2. Typography — base editorial, mobile-first
   ============================================================ */
.kz-main h1,
.kz-main h2,
.kz-main h3,
.kz-main h4 {
	font-family: var(--kz-font-heading);
	color: var(--kz-text-strong);
	letter-spacing: -.015em;
}
.kz-main p { color: var(--kz-text-strong); }

/* ============================================================
   3. Single — post / page con hero + breadcrumb + meta
   ============================================================ */

/* Breadcrumb */
.kz-breadcrumb {
	font-size: var(--kz-fs-sm);
	color: var(--kz-text-muted);
	margin-bottom: var(--kz-space-sm);
}
.kz-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.kz-breadcrumb__item:not(:last-child)::after {
	content: '›';
	margin-left: .375rem;
	color: var(--kz-text-muted);
	opacity: .6;
}
.kz-breadcrumb__item a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .15s, color .15s;
}
.kz-breadcrumb__item a:hover {
	color: var(--kz-accent);
	border-bottom-color: currentColor;
}
.kz-breadcrumb__item--current {
	color: var(--kz-text-strong);
	font-weight: 500;
}

/* Hero del entry */
.kz-entry,
.kz-page {
	max-width: var(--kz-prose);
	margin-inline: auto;
}
.kz-entry__header,
.kz-page__header {
	margin-bottom: var(--kz-space-md);
}
.kz-entry__category {
	display: inline-block;
	font-size: var(--kz-fs-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--kz-accent);
	margin-bottom: var(--kz-space-xs);
}
.kz-entry__title,
.kz-page__title {
	font-size: var(--kz-fs-h1);
	line-height: 1.1;
	margin: 0 0 var(--kz-space-sm);
	font-weight: 800;
}
.kz-entry__lead {
	font-size: var(--kz-fs-lead);
	line-height: 1.55;
	color: var(--kz-text-muted);
	margin: 0 0 var(--kz-space-md);
}
.kz-entry__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	font-size: var(--kz-fs-sm);
	color: var(--kz-text-muted);
	margin: 0 0 var(--kz-space-md);
}
.kz-entry__avatar { display: inline-flex; }
.kz-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid var(--kz-border-soft);
}
.kz-entry__author-name {
	font-weight: 600;
	color: var(--kz-text-strong);
}
.kz-entry__sep { opacity: .5; }

/* Imagen destacada como hero */
.kz-entry__media {
	margin: 0 0 var(--kz-space-md);
	border-radius: var(--kz-radius-lg);
	overflow: hidden;
	box-shadow: 0 12px 32px color-mix(in srgb, var(--kz-text-strong) 12%, transparent);
}
.kz-entry__media img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Contenido — anchura legible y ritmo vertical */
.kz-entry__content,
.kz-page__content {
	font-size: var(--kz-fs-body);
	line-height: 1.7;
}
.kz-entry__content > * + *,
.kz-page__content > * + * {
	margin-top: 1.25em;
}
.kz-entry__content h2,
.kz-page__content h2 {
	font-size: var(--kz-fs-h2);
	line-height: 1.2;
	margin-top: 2em;
	margin-bottom: .5em;
	font-weight: 700;
}
.kz-entry__content h3,
.kz-page__content h3 {
	font-size: var(--kz-fs-h3);
	line-height: 1.3;
	margin-top: 1.6em;
	margin-bottom: .4em;
	font-weight: 600;
}
.kz-entry__content a,
.kz-page__content a {
	color: var(--kz-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-thickness .15s;
}
.kz-entry__content a:hover,
.kz-page__content a:hover {
	text-decoration-thickness: 2px;
}
.kz-entry__content blockquote,
.kz-page__content blockquote {
	border-left: 4px solid var(--kz-accent);
	padding: .75rem 1.25rem;
	margin-inline: 0;
	background: color-mix(in srgb, var(--kz-accent) 5%, transparent);
	border-radius: 0 var(--kz-radius-md) var(--kz-radius-md) 0;
	font-size: var(--kz-fs-lead);
	font-style: italic;
	color: var(--kz-text-strong);
}
.kz-entry__content blockquote p:last-child { margin-bottom: 0; }
.kz-entry__content code,
.kz-page__content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
	padding: .15em .4em;
	background: var(--kz-surface-soft);
	border-radius: .35rem;
}
.kz-entry__content pre,
.kz-page__content pre {
	background: var(--kz-surface-soft);
	padding: 1.25rem;
	border-radius: var(--kz-radius-md);
	overflow: auto;
	font-size: .9375rem;
	line-height: 1.6;
}
.kz-entry__content pre code,
.kz-page__content pre code {
	padding: 0;
	background: transparent;
	border-radius: 0;
}
.kz-entry__content img,
.kz-page__content img {
	border-radius: var(--kz-radius-md);
	height: auto;
}
.kz-entry__content figure,
.kz-page__content figure {
	margin-inline: 0;
}
.kz-entry__content figcaption,
.kz-page__content figcaption {
	font-size: var(--kz-fs-sm);
	color: var(--kz-text-muted);
	text-align: center;
	margin-top: .5rem;
}
.kz-entry__content ul,
.kz-entry__content ol,
.kz-page__content ul,
.kz-page__content ol {
	padding-left: 1.5rem;
}
.kz-entry__content li + li,
.kz-page__content li + li {
	margin-top: .375rem;
}

/* Tags al final */
.kz-entry__tags {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	list-style: none;
	padding: 0;
	margin: var(--kz-space-lg) 0 0;
}
.kz-entry__tags li a {
	display: inline-flex;
	align-items: center;
	padding: .35rem .75rem;
	background: var(--kz-surface-soft);
	border: 1px solid var(--kz-border-soft);
	border-radius: 999px;
	font-size: var(--kz-fs-sm);
	color: var(--kz-text-muted);
	text-decoration: none;
	transition: background .15s, color .15s, border-color .15s;
}
.kz-entry__tags li a:hover {
	color: var(--kz-accent);
	border-color: var(--kz-accent);
	background: color-mix(in srgb, var(--kz-accent) 8%, transparent);
}
.kz-entry__tags li a::before {
	content: '#';
	opacity: .5;
	margin-right: .15em;
}

/* Footer del entry — autor card */
.kz-entry__author {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: var(--kz-space-md);
	margin-top: var(--kz-space-lg);
	background: var(--kz-surface-soft);
	border-radius: var(--kz-radius-lg);
	border: 1px solid var(--kz-border-soft);
}
.kz-entry__author .kz-avatar {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
}
.kz-entry__author-info { flex: 1; min-width: 0; }
.kz-entry__author-info strong {
	display: block;
	font-size: 1rem;
	color: var(--kz-text-strong);
	margin-bottom: .125rem;
}
.kz-entry__author-info p {
	margin: 0;
	color: var(--kz-text-muted);
	font-size: var(--kz-fs-sm);
}

/* ============================================================
   4. Archive / Index grid — magazine layout
   ============================================================ */

.kz-archive__header {
	max-width: var(--kz-prose-wide);
	margin: 0 auto var(--kz-space-lg);
	text-align: center;
	padding: var(--kz-space-md) 0 0;
}
.kz-archive__title {
	font-size: var(--kz-fs-display);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 0 0 var(--kz-space-xs);
	color: var(--kz-accent); /* fallback para navegadores sin background-clip:text */
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	.kz-archive__title {
		background: var(--kz-gradient);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}
.kz-archive__title span {
	color: var(--kz-accent);
	font-style: italic;
}
.kz-archive__description {
	max-width: var(--kz-prose);
	margin: 0 auto;
	color: var(--kz-text-muted);
	font-size: var(--kz-fs-lead);
	line-height: 1.55;
}
/*
 * Cuando el admin oculta el título del archive (KZMentor → Blog), pero
 * la taxonomía o el archivo tiene descripción, dejamos la descripción sola
 * con un margen consistente para no romper la jerarquía visual.
 */
.kz-archive__description--solo {
	margin: 0 auto var(--kz-space-md);
}

/* Grid de cards
 *
 * Mobile-first: 1 columna por defecto. A partir de 600px (móviles grandes
 * en horizontal y tablets pequeñas) ya pasamos a 2 columnas para aprovechar
 * el ancho. En 1024px+ pasamos a 3.
 */
.kz-archive__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kz-space-md);
	margin: 0 auto var(--kz-space-lg);
}
@media (min-width: 600px) {
	.kz-archive__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Card por defecto: stack vertical, mobile-first */
.kz-card {
	display: flex;
	flex-direction: column;
	background: var(--kz-surface);
	border: 1px solid var(--kz-border-soft);
	border-radius: var(--kz-radius-lg);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
	position: relative;
	isolation: isolate;
	/* Reset el padding heredado de layout.css (gutter doble) */
	padding: 0;
	gap: 0;
}
.kz-card:hover {
	transform: translateY(-4px);
	/* Fallback estático para navegadores sin color-mix() */
	box-shadow: 0 16px 40px rgba(0,0,0,.14);
	border-color: var(--kz-accent);
	box-shadow: 0 16px 40px color-mix(in srgb, var(--kz-text-strong) 14%, transparent);
	border-color: color-mix(in srgb, var(--kz-accent) 40%, var(--kz-border-soft));
}

/* Media del card */
.kz-card__media {
	display: block;
	position: relative;
	/* Coincide con el tamaño 'kzmentor-card' (720x480 = 3:2) registrado en setup.php */
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--kz-surface-soft);
}
.kz-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.kz-card:hover .kz-card__media img {
	transform: scale(1.05);
}
.kz-card__media--placeholder {
	background: var(--kz-gradient);
	display: flex;
	align-items: center;
	justify-content: center;
}
/*
 * Pill de categoría flotando sobre la imagen.
 * Background blanco fijo + texto oscuro: garantiza contraste AAA en
 * cualquier preset (dark/light) porque la imagen detrás cubre el contraste
 * visual contra el preset, y la pill tiene su propia paleta interna.
 */
.kz-card__category {
	position: absolute;
	top: 1rem;
	left: 1rem;
	display: inline-block;
	padding: .35rem .75rem;
	background: #ffffff;
	color: #1f2937;
	font-size: var(--kz-fs-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.kz-card__media--placeholder .kz-card__category {
	position: static;
}

/* Body del card */
.kz-card__body {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: var(--kz-space-md);
	flex: 1;
}
.kz-card__title {
	font-size: var(--kz-fs-h3);
	line-height: 1.25;
	font-weight: 700;
	margin: 0;
	letter-spacing: -.01em;
}
/*
 * Cuando la card del pinned actúa como H1 de la página (porque el título
 * del archive está oculto), promovemos el tamaño tipográfico al display
 * para mantener la jerarquía visual que tendría un H1 normal.
 *
 * NOTA: la regla de --h1 sobre .kz-card--featured se define abajo, dentro
 * del @media (min-width: 768px) que también afecta a .kz-card--featured
 * .kz-card__title — necesita estar después en source order para ganar la
 * especificidad (ambos selectores tienen la misma).
 */
.kz-card__title--h1 {
	font-size: var(--kz-fs-h2);
	line-height: 1.15;
}
.kz-card__title a {
	color: var(--kz-text-strong);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size .3s, color .15s;
}
.kz-card__title a:hover {
	color: var(--kz-accent);
	background-size: 100% 1px;
}
/*
 * Card excerpt — the_excerpt() envuelve el texto en <p>, así que
 * aplicamos line-clamp al <p> interno (el wrapper solo da color/size).
 */
.kz-card__excerpt {
	color: var(--kz-text-muted);
	font-size: var(--kz-fs-body);
	line-height: 1.6;
	flex: 1;
	overflow: hidden;
}
.kz-card__excerpt p {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kz-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem;
	font-size: var(--kz-fs-sm);
	color: var(--kz-text-muted);
	margin: 0;
	padding-top: .5rem;
	border-top: 1px solid var(--kz-border-soft);
}
.kz-card__sep { opacity: .5; }
.kz-card__author { font-weight: 500; }

/* Featured y pinned ya ocupan ancho completo desde 600px (cuando empezamos
 * a tener 2+ columnas) — evita que en 600-767 queden raros tomando solo
 * media fila. La forma horizontal entra a partir de 768px.
 */
@media (min-width: 600px) {
	.kz-card--featured,
	.kz-card-wrap--pinned {
		grid-column: 1 / -1;
	}
}

/* Featured card (primer post): horizontal en desktop, vertical en móvil */
@media (min-width: 768px) {
	.kz-card--featured {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		align-items: stretch;
	}
	.kz-card--featured .kz-card__media {
		aspect-ratio: auto;
		min-height: 100%;
	}
	.kz-card--featured .kz-card__title {
		font-size: var(--kz-fs-h2);
	}
	/* Pinned promovido a H1 — DEBE ir después de la regla anterior (misma
	 * especificidad: 2 clases) para que el font-size: display gane. */
	.kz-card--featured .kz-card__title--h1 {
		font-size: var(--kz-fs-display);
	}
	.kz-card--featured .kz-card__body {
		padding: var(--kz-space-lg);
		justify-content: center;
	}
}

@media (min-width: 1024px) {
	.kz-archive__list {
		grid-template-columns: repeat(3, 1fr);
	}
	.kz-card--featured {
		grid-template-columns: 1.5fr 1fr;
	}
}

/*
 * Pinned post — wrapper que ocupa la fila completa con un badge "Fijado"
 * que sale del corner superior-derecho como un sticker.
 *
 * Diseño "sticker que asoma":
 *   - top: -.5rem y right: 1rem hacen que el badge sobresalga del borde superior,
 *     siempre visible aunque la card no tenga thumbnail (de lo contrario el
 *     badge taparía el título).
 *   - El hover de la card aplica translateY(-4px); el wrapper:hover sincroniza
 *     el badge para que no quede flotando en el aire.
 */
.kz-card-wrap--pinned {
	position: relative;
	display: block;
}
.kz-card-wrap--pinned .kz-card {
	border-color: color-mix(in srgb, var(--kz-accent) 35%, var(--kz-border-soft));
	box-shadow: 0 8px 24px color-mix(in srgb, var(--kz-accent) 12%, transparent);
}
.kz-card__pin-badge {
	position: absolute;
	top: -.5rem;
	right: 1rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .35rem .75rem;
	background: var(--kz-accent);
	color: #fff;
	font-size: var(--kz-fs-xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(0,0,0,.2);
	pointer-events: none;
	transition: transform .25s ease;
}
.kz-card-wrap--pinned:hover .kz-card__pin-badge {
	transform: translateY(-4px);
}

/* ============================================================
   5. Empty states — 404, search vacío
   ============================================================ */

.kz-404 {
	text-align: center;
	max-width: var(--kz-prose);
	margin-inline: auto;
	padding-block: var(--kz-space-xl);
}
.kz-404__visual {
	font-size: clamp(7rem, 5rem + 12vw, 14rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.05em;
	color: var(--kz-accent); /* fallback */
	margin: 0 0 var(--kz-space-sm);
	user-select: none;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	.kz-404__visual {
		background: var(--kz-gradient);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}
.kz-404__title {
	font-size: var(--kz-fs-h1);
	font-weight: 800;
	margin: 0 0 var(--kz-space-xs);
	letter-spacing: -.015em;
}
.kz-404__description {
	color: var(--kz-text-muted);
	font-size: var(--kz-fs-lead);
	line-height: 1.55;
	margin: 0 auto var(--kz-space-md);
	max-width: 50ch;
}
.kz-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin-top: var(--kz-space-md);
}

/* Search empty */
.kz-empty {
	text-align: center;
	padding: var(--kz-space-lg);
	background: var(--kz-surface-soft);
	border-radius: var(--kz-radius-lg);
	border: 1px dashed var(--kz-border-soft);
	margin-block: var(--kz-space-md);
}
.kz-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	/* Fallback estático + color-mix con opacidad mayor (20% en vez de 12%)
	   para garantizar visibilidad en presets dark donde el accent sobre
	   fondo casi-negro queda invisible al 12%. */
	background: rgba(99,102,241,.20);
	background: color-mix(in srgb, var(--kz-accent) 20%, transparent);
	color: var(--kz-accent);
	margin-bottom: var(--kz-space-sm);
	font-size: 28px;
}
.kz-empty__title {
	font-size: var(--kz-fs-h3);
	font-weight: 700;
	margin: 0 0 .375rem;
}
.kz-empty__description {
	color: var(--kz-text-muted);
	font-size: var(--kz-fs-body);
	margin: 0 0 var(--kz-space-md);
}

/* Botones / CTA */
.kz-button,
.kz-button--primary {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .8rem 1.5rem;
	background: var(--kz-accent);
	color: #fff;
	border: 0;
	border-radius: 999px;
	text-decoration: none;
	font: 600 var(--kz-fs-body) var(--kz-font-body);
	cursor: pointer;
	line-height: 1.2;
	box-shadow: var(--kz-glow);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s;
}
.kz-button:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
}
.kz-button--ghost {
	background: transparent;
	color: var(--kz-accent);
	border: 1px solid var(--kz-accent);
	box-shadow: none;
}
.kz-button--ghost:hover {
	background: color-mix(in srgb, var(--kz-accent) 8%, transparent);
}

/* Search form bonito */
.kz-search {
	display: flex;
	gap: 0;
	align-items: stretch;
	max-width: 560px;
	margin-inline: auto;
	background: var(--kz-surface);
	border: 2px solid var(--kz-border-soft);
	border-radius: 999px;
	padding: .25rem;
	transition: border-color .2s, box-shadow .2s;
}
.kz-search:focus-within {
	border-color: var(--kz-accent);
	/* Fallback estático para navegadores sin color-mix() */
	box-shadow: 0 0 0 4px rgba(99,102,241,.18);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--kz-accent) 15%, transparent);
}
.kz-search__input {
	flex: 1;
	padding: .625rem 1rem;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	min-width: 0;
	outline: 0;
}
.kz-search__submit {
	padding: .625rem 1.25rem;
	background: var(--kz-accent);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font: 600 var(--kz-fs-sm) var(--kz-font-body);
	cursor: pointer;
	transition: filter .15s;
}
.kz-search__submit:hover { filter: brightness(1.05); }

/* ============================================================
   6. Comments — minimal y limpio
   ============================================================ */

.kz-comments {
	max-width: var(--kz-prose);
	margin: var(--kz-space-xl) auto 0;
	padding-top: var(--kz-space-lg);
	border-top: 1px solid var(--kz-border-soft);
}
.kz-comments__title {
	font-size: var(--kz-fs-h3);
	font-weight: 700;
	margin: 0 0 var(--kz-space-md);
}
.kz-comments__list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--kz-space-md);
	display: grid;
	gap: var(--kz-space-md);
}
.kz-comments__list .children {
	list-style: none;
	padding-left: 1.25rem;
	margin-top: var(--kz-space-sm);
	display: grid;
	gap: var(--kz-space-sm);
	border-left: 2px solid var(--kz-border-soft);
}

/* ============================================================
   7. Pagination — botones compactos pill
   ============================================================ */

.navigation.pagination,
.kz-pagination {
	margin: var(--kz-space-lg) auto 0;
	display: flex;
	justify-content: center;
}
.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
}
.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* WCAG 2.5.5 + Apple HIG: 44x44 mínimo para tap targets */
	min-width: 44px;
	height: 44px;
	padding: 0 .875rem;
	border-radius: 999px;
	color: var(--kz-text-muted);
	text-decoration: none;
	font-size: var(--kz-fs-sm);
	font-weight: 500;
	border: 1px solid transparent;
	transition: background .15s, color .15s, border-color .15s;
}
.navigation.pagination .page-numbers:hover {
	color: var(--kz-accent);
	border-color: var(--kz-accent);
}
.navigation.pagination .page-numbers.current {
	background: var(--kz-accent);
	color: #fff;
	font-weight: 700;
}

/* ============================================================
   Responsive — desktop refinements
   ============================================================ */

@media (min-width: 640px) {
	.kz-entry__media img {
		aspect-ratio: 21 / 9;
	}
}

/* ============================================================
   Blog index — cabecera editorial cuando hay "Página de entradas"
   con contenido. Honra el título, excerpt y contenido del usuario
   antes de listar los posts.
   ============================================================ */

.kz-blog-index__header {
	margin-bottom: var(--kz-space-md);
}
.kz-blog-index__media {
	margin: 0 auto var(--kz-space-lg);
	max-width: var(--kz-prose-wide);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 8px 32px -16px rgba(0, 0, 0, .25);
}
.kz-blog-index__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}
.kz-blog-index__intro {
	max-width: var(--kz-prose);
	margin: 0 auto var(--kz-space-xl);
	font-size: var(--kz-fs-lead, 1.125rem);
	line-height: 1.7;
	color: var(--kz-text-muted);
}
.kz-blog-index__intro > * + * {
	margin-top: var(--kz-space-sm);
}
.kz-blog-index__intro p:first-child::first-letter {
	font-size: 3em;
	font-weight: 700;
	float: left;
	line-height: .9;
	margin: .1em .15em 0 0;
	color: var(--kz-accent);
}
@media (max-width: 600px) {
	.kz-blog-index__intro p:first-child::first-letter {
		font-size: 2.4em;
	}
}

/* ============================================================
   Reading progress bar — barra fija arriba de la entrada
   ============================================================ */

.kz-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: transparent;
	z-index: 9999;
	pointer-events: none;
}
.kz-reading-progress__bar {
	display: block;
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, var(--kz-accent, #6366f1), color-mix(in srgb, var(--kz-accent, #6366f1) 70%, #ec4899));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .1s linear;
}

/* ============================================================
   Single post — share buttons + caption + author refresh
   ============================================================ */

.kz-entry__share {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: var(--kz-space-md);
	padding-top: var(--kz-space-md);
	border-top: 1px solid var(--kz-border-soft);
}
.kz-entry__share-btn {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .5rem .75rem;
	border-radius: 999px;
	background: var(--kz-surface, transparent);
	color: var(--kz-text-muted);
	border: 1px solid var(--kz-border-soft);
	font-size: var(--kz-fs-xs);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.kz-entry__share-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.kz-entry__share-btn:hover,
.kz-entry__share-btn:focus-visible {
	color: var(--kz-accent);
	border-color: var(--kz-accent);
	transform: translateY(-1px);
	text-decoration: none;
}
.kz-entry__share-btn.is-copied {
	background: var(--kz-accent);
	color: #fff;
	border-color: var(--kz-accent);
}
.kz-entry__share-btn.is-copied span::before {
	content: '✓ ';
}
.kz-entry__share-btn.is-copied span {
	font-weight: 700;
}

.kz-entry__media-caption {
	font-size: var(--kz-fs-xs);
	color: var(--kz-text-muted);
	text-align: center;
	margin-top: .5rem;
	font-style: italic;
}

.kz-entry__author-label {
	display: block;
	font-size: var(--kz-fs-xs);
	color: var(--kz-text-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600;
	margin-bottom: .125rem;
}
.kz-entry__author {
	background: var(--kz-surface, rgba(0,0,0,.02));
	border: 1px solid var(--kz-border-soft);
	border-radius: 16px;
	padding: var(--kz-space-md);
	margin-top: var(--kz-space-lg);
}

/* ============================================================
   Layout variants — magazine + minimal
   ============================================================ */

/* Magazine: hero a sangre con título superpuesto sobre la imagen. */
.kz-single--magazine .kz-entry__header--hero {
	position: relative;
	min-height: 420px;
	padding: var(--kz-space-lg) var(--kz-space-md);
	border-radius: 24px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background-image: var(--kz-hero-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	isolation: isolate;
}
.kz-single--magazine .kz-entry__header--hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.78) 100%);
	z-index: -1;
}
.kz-single--magazine .kz-entry__header--hero .kz-entry__title,
.kz-single--magazine .kz-entry__header--hero .kz-entry__lead,
.kz-single--magazine .kz-entry__header--hero .kz-entry__category,
.kz-single--magazine .kz-entry__header--hero .kz-post-meta,
.kz-single--magazine .kz-entry__header--hero .kz-post-meta * {
	color: #fff;
}
.kz-single--magazine .kz-entry__header--hero .kz-entry__category {
	background: rgba(255,255,255,.18);
	backdrop-filter: blur(8px);
}
@media (min-width: 768px) {
	.kz-single--magazine .kz-entry__header--hero {
		min-height: 560px;
		padding: var(--kz-space-xl);
	}
}

/* Minimal: tipografía pura, sin imagen destacada, alineado a la izquierda. */
.kz-single--minimal .kz-entry__media { display: none; }
.kz-single--minimal .kz-entry__header {
	text-align: left;
	border-bottom: 1px solid var(--kz-border-soft);
	padding-bottom: var(--kz-space-md);
	margin-bottom: var(--kz-space-md);
}
.kz-single--minimal .kz-entry__title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	letter-spacing: -0.01em;
}
.kz-single--minimal .kz-entry__lead {
	font-size: 1.0625rem;
	color: var(--kz-text-muted);
}

/* ============================================================
   Post navigation — anterior / siguiente
   ============================================================ */

.kz-post-nav {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: var(--kz-space-xl) 0 var(--kz-space-lg);
	max-width: var(--kz-prose-wide);
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 720px) {
	.kz-post-nav {
		grid-template-columns: 1fr 1fr;
	}
}

.kz-post-nav__link {
	display: flex;
	align-items: stretch;
	gap: 1rem;
	padding: 0;
	background: var(--kz-surface, #fff);
	border: 1px solid var(--kz-border-soft);
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	position: relative;
	min-height: 110px;
}
.kz-post-nav__link:hover,
.kz-post-nav__link:focus-visible {
	transform: translateY(-3px);
	border-color: var(--kz-accent);
	box-shadow: 0 12px 32px -16px rgba(0, 0, 0, .25);
	text-decoration: none;
}
.kz-post-nav__link--prev { text-align: left; }
.kz-post-nav__link--next {
	text-align: right;
	flex-direction: row;
}

.kz-post-nav__thumb {
	flex-shrink: 0;
	width: 110px;
	min-height: 100%;
	background-size: cover;
	background-position: center;
	background-color: color-mix(in srgb, var(--kz-accent, #6366f1) 8%, transparent);
}
.kz-post-nav__thumb--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: color-mix(in srgb, var(--kz-accent, #6366f1) 50%, transparent);
}
.kz-post-nav__thumb--empty svg {
	width: 32px;
	height: 32px;
	opacity: .6;
}

.kz-post-nav__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .25rem;
	padding: 1rem 1.125rem;
}

.kz-post-nav__label {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	font-size: var(--kz-fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--kz-accent);
}
.kz-post-nav__label svg {
	width: 14px;
	height: 14px;
	transition: transform .25s ease;
}
.kz-post-nav__link--next .kz-post-nav__label {
	margin-left: auto;
	flex-direction: row;
}
.kz-post-nav__link--prev:hover .kz-post-nav__label svg {
	transform: translateX(-3px);
}
.kz-post-nav__link--next:hover .kz-post-nav__label svg {
	transform: translateX(3px);
}

.kz-post-nav__category {
	font-size: var(--kz-fs-xs);
	color: var(--kz-text-muted);
	font-weight: 500;
}

.kz-post-nav__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--kz-fs-body);
	font-weight: 700;
	color: var(--kz-text-strong, inherit);
	line-height: 1.35;
}

.kz-post-nav__placeholder { display: none; }
@media (min-width: 720px) {
	.kz-post-nav__placeholder { display: block; }
}

/* ============================================================
   8. Reduced motion — desactiva animaciones pesadas
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.kz-card,
	.kz-card__media img,
	.kz-card__title a,
	.kz-button,
	.kz-post-nav__link,
	.kz-post-nav__label svg,
	.kz-entry__share-btn,
	.kz-reading-progress__bar {
		transition: none !important;
		transform: none !important;
	}
	.kz-card:hover {
		transform: none !important;
	}
	.kz-card:hover .kz-card__media img {
		transform: none !important;
	}
	.kz-post-nav__link:hover {
		transform: none !important;
	}
}