/*
Theme Name: 13hPixel
Theme URI: https://www.13hpixel.com
Author: 13hPixel
Description: Tema propio del blog: claro con toques oscuros, texto y fotografía, CSS moderno y móvil primero.
Version: 1.5.2
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: hpixel
*/

/* Fuentes autoalojadas (SIL OFL), subconjunto latino variable. Sin peticiones a terceros. */
@font-face { font-family: "Inter";          src: url("assets/fonts/inter.woff2") format("woff2");          font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Space Grotesk";  src: url("assets/fonts/space-grotesk.woff2") format("woff2");  font-weight: 300 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Pixelify Sans";  src: url("assets/fonts/pixelify-sans.woff2") format("woff2");  font-weight: 400 700; font-display: swap; }

/* Contador hexadecimal para numerar los bloques como direcciones de memoria */
@counter-style hex { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "A" "B" "C" "D" "E" "F"; pad: 2 "0"; }

/* Ángulo animable para bordes de degradado cónico */
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@layer reset, tokens, base, layout, components, content, utilities;

/* ============================================================
   Reset
   ============================================================ */
@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body { margin: 0; }
	img, svg, video, iframe { max-width: 100%; }
	img, video { height: auto; }
	button, input, textarea, select { font: inherit; color: inherit; }
	ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
	h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
}

/* ============================================================
   Tokens. Claro por defecto; con data-scheme="auto" sigue al sistema.
   ============================================================ */
@layer tokens {
	:root {
		color-scheme: light;

		/* Superficies que cambian entre claro y oscuro */
		--bg:        light-dark(#eeede8, #0d0d11);
		--surface:   light-dark(#ffffff, #17171d);
		--surface-2: light-dark(#f6f5f1, #1e1e26);
		--line:      light-dark(#dcdad1, #2c2c37);
		--ink:       light-dark(#1d1d22, #e8e8ee);
		--muted:     light-dark(#65656e, #9b9ba8);
		--accent:    light-dark(#a3231f, #ff7468);
		--accent-2:  light-dark(#1d6b52, #4fcfa4);

		/* Toques oscuros: iguales en ambos esquemas */
		--dark:    #101015;
		--dark-2:  #1b1b23;
		--on-dark: #f3f1ea;
		--on-dark-muted: #a6a6b4;
		--cream:   #f4efe0;

		--font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		--display: "Space Grotesk", var(--font);
		--mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
		--pixel: "Pixelify Sans", var(--mono);

		--radius: .75rem;
		--radius-sm: .4rem;
		--gap: clamp(1rem, 2.5vw, 1.75rem);
		--shadow: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px -12px rgb(0 0 0 / .25);

		/* Paleta VGA de 16 colores, el guiño al modo 13h */
		--vga: linear-gradient(90deg,
			#000 0 6.25%, #0000aa 0 12.5%, #00aa00 0 18.75%, #00aaaa 0 25%,
			#aa0000 0 31.25%, #aa00aa 0 37.5%, #aa5500 0 43.75%, #aaaaaa 0 50%,
			#555555 0 56.25%, #5555ff 0 62.5%, #55ff55 0 68.75%, #55ffff 0 75%,
			#ff5555 0 81.25%, #ff55ff 0 87.5%, #ffff55 0 93.75%, #ffffff 0 100%);
	}
	:root[data-scheme="auto"] { color-scheme: light dark; }
}

/* ============================================================
   Base
   ============================================================ */
@layer base {
	@view-transition { navigation: auto; }

	html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
	@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

	html { background: var(--bg); }
	body {
		position: relative; isolation: isolate;
		color: var(--ink);
		font-family: var(--font);
		font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
		line-height: 1.7;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}

	/* Fondo estilo modo 13h: resplandores de la paleta, trama de píxeles y líneas de barrido.
	   Solo asoma en los márgenes; el texto va siempre sobre superficies sólidas. */
	body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
	body::before {
		background:
			radial-gradient(44rem 30rem at 92% -6%, color-mix(in oklab, #7b2ff7 16%, transparent), transparent 70%),
			radial-gradient(38rem 30rem at -8% 42%, color-mix(in oklab, #ff5f6d 12%, transparent), transparent 70%),
			radial-gradient(40rem 28rem at 70% 112%, color-mix(in oklab, #14b8a6 14%, transparent), transparent 70%);
	}
	body::after {
		inset: -120px 0;
		background:
			repeating-linear-gradient(0deg, transparent 0 2px, color-mix(in oklab, var(--ink) 3.5%, transparent) 2px 3px),
			radial-gradient(circle, color-mix(in oklab, var(--ink) 15%, transparent) 1px, transparent 1.7px) 0 0 / 14px 14px;
		mask-image: linear-gradient(90deg, #000, transparent 24%, transparent 76%, #000);
	}
	@supports (animation-timeline: scroll()) {
		@media (prefers-reduced-motion: no-preference) {
			body::after { animation: drift linear both; animation-timeline: scroll(root); }
		}
	}
	@keyframes drift { to { transform: translateY(-120px); } }

	a {
		color: var(--accent);
		text-decoration-thickness: .08em;
		text-underline-offset: .2em;
		&:hover { text-decoration-thickness: .15em; }
	}

	:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 70%, white); outline-offset: 2px; border-radius: 2px; }

	::selection { background: color-mix(in oklab, var(--accent) 35%, transparent); }

	h1, h2, h3 { font-family: var(--display); line-height: 1.15; text-wrap: balance; letter-spacing: -.02em; font-weight: 700; }
	@media (min-width: 48rem) { p { text-wrap: pretty; } }
}

/* ============================================================
   Layout
   ============================================================ */
@layer layout {
	.wrap { width: min(100% - 2rem, 76rem); margin-inline: auto; }

	.layout {
		display: grid;
		gap: var(--gap);
		padding-block: var(--gap) calc(var(--gap) * 2);
		align-items: start;

		@media (min-width: 64rem) {
			.has-sidebar & { grid-template-columns: minmax(0, 1fr) 20rem; }
		}
	}
	.no-sidebar .main { width: min(100%, 52rem); margin-inline: auto; }

	.main { min-width: 0; display: grid; gap: var(--gap); }

}

/* ============================================================
   Componentes
   ============================================================ */
@layer components {
	.sr-only, .skip-link:not(:focus) {
		position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
		overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
	}
	.skip-link:focus {
		position: fixed; z-index: 100; inset: .75rem auto auto .75rem; padding: .6rem 1rem;
		background: var(--cream); color: var(--dark); border-radius: var(--radius-sm); font-weight: 600;
	}

	/* ---- Cabecera ---- */
	.site-header {
		background:
			radial-gradient(60rem 14rem at 12% -40%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 70%),
			linear-gradient(180deg, #23232d, var(--dark));
		color: var(--on-dark);

		.bar { display: flex; align-items: center; gap: .5rem 1.5rem; flex-wrap: wrap; padding-block: .9rem; }
	}

	.logo {
		display: inline-flex; align-items: baseline; gap: .12em;
		font: 700 clamp(1.9rem, 1.4rem + 2vw, 2.7rem)/1 var(--pixel);
		letter-spacing: .01em; text-decoration: none; color: var(--on-dark);
		&:hover { text-decoration: none; filter: brightness(1.1); }
	}
	.logo-h { color: var(--on-dark); }
	.logo-pixel {
		background: linear-gradient(90deg, #ff5f6d, #ffc371, #c6ff6d, #5ff1d8, #6ea8ff, #c77dff);
		-webkit-background-clip: text; background-clip: text; color: transparent;
		filter: drop-shadow(0 0 .6rem #c77dff55);
	}

	.prompt {
		font: .85rem/1 var(--mono); color: var(--on-dark-muted); margin-right: auto;
		display: none;
		@media (min-width: 44rem) { display: block; }
	}
	.cursor {
		display: inline-block; width: .55em; height: 1em; margin-left: .25em; vertical-align: -.15em;
		background: var(--on-dark-muted); animation: blink 1.1s steps(1) infinite;
	}
	@keyframes blink { 50% { opacity: 0; } }
	@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

	.palette { height: .4rem; background: var(--vga); image-rendering: pixelated; }

	/* ---- Navegación ---- */
	.nav-toggle {
		margin-left: auto; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
		background: transparent; border: 1px solid #ffffff30; border-radius: var(--radius-sm); cursor: pointer; color: var(--on-dark);
		@media (min-width: 52rem) { display: none; }
	}
	.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
		display: block; width: 1.25rem; height: 2px; background: currentColor; border-radius: 2px; content: "";
	}
	.nav-toggle-bars { position: relative; }
	.nav-toggle-bars::before { position: absolute; top: -.4rem; }
	.nav-toggle-bars::after  { position: absolute; top: .4rem; }

	.primary-nav {
		display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; flex: 1 1 100%;
		@media (min-width: 52rem) { flex: 0 1 auto; }

		.menu { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
		.menu a {
			display: block; padding: .5rem 0; color: var(--on-dark); text-decoration: none;
			font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
			border-bottom: 2px solid transparent;
			&:hover { border-color: #ffffff80; }
		}
		.menu .current-menu-item > a, .menu .current_page_item > a { border-color: #ff7468; }
	}
	/* Sin JS el menú siempre está visible; con JS se pliega en móvil. */
	.js .primary-nav { @media (max-width: 51.99rem) { display: none; &.is-open { display: flex; } } }

	.search-form {
		display: flex; align-items: center; position: relative;
		input[type="search"] {
			width: 100%; min-width: 0; padding: .55rem 2.5rem .55rem 1rem; border-radius: 999px;
			background: var(--surface); color: var(--ink); border: 1px solid var(--line);
			&::placeholder { color: var(--muted); }
		}
		button {
			position: absolute; right: .2rem; display: grid; place-items: center; width: 2rem; height: 2rem;
			border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
			&:hover { color: var(--accent); }
		}
	}
	.primary-nav .search-form {
		input[type="search"] { background: #ffffff14; color: var(--on-dark); border-color: #ffffff2e; width: 9rem; transition: width .25s ease; &:focus { width: 14rem; } &::placeholder { color: var(--on-dark-muted); } }
		button { color: var(--on-dark-muted); }
	}

	.social {
		display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none;
		a { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: var(--on-dark-muted); &:hover { color: var(--on-dark); background: #ffffff18; } }
	}

	/* ---- Minigalería ---- */
	.minigallery {
		background: var(--dark-2); color: var(--on-dark); border-bottom: 1px solid #000;
		padding-block: .9rem;
	}
	.minigallery { position: relative; }
	/* Sin título: las flechas flotan sobre la esquina de la franja */
	.mg-head { position: absolute; z-index: 2; inset: .9rem 0 auto; pointer-events: none; display: flex; justify-content: flex-end; .mg-nav { pointer-events: auto; display: flex; gap: .4rem; } }
	.mg-nav button {
		width: 2rem; height: 2rem; border: 1px solid #ffffff2a; border-radius: 50%; background: transparent;
		color: var(--on-dark); font-size: 1.2rem; line-height: 1; cursor: pointer; background: #0009; backdrop-filter: blur(6px);
		&:hover { background: #000c; }
	}
	.js-off .mg-nav { display: none; }

	.mg-track {
		display: flex; gap: .5rem; margin: 0; padding: 0 max(1rem, calc((100% - 76rem) / 2)) .2rem; list-style: none;
		overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #ffffff40 transparent;
		mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);

		li { flex: none; scroll-snap-align: start; }
		a { display: block; border-radius: var(--radius-sm); overflow: hidden; outline-offset: 3px; }
		img {
			display: block; height: clamp(6.5rem, 18vw, 9rem); width: auto; border-radius: var(--radius-sm);
			background: #ffffff10; transition: transform .25s ease, filter .25s ease; filter: saturate(.9) brightness(.92);
		}
		a:hover img, a:focus-visible img { transform: scale(1.04); filter: none; }
		@media (prefers-reduced-motion: reduce) { img { transition: none; } a:hover img { transform: none; } }
	}

	/* ---- Cabeceras de archivo ---- */
	.archive-head {
		position: relative; isolation: isolate; overflow: hidden; padding: 1.6rem 1.8rem;
		border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
		background: linear-gradient(120deg, color-mix(in oklab, oklch(.7 .13 var(--hue, 250)) 16%, var(--surface)), var(--surface) 66%);

		h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); letter-spacing: -.028em; }
		.eyebrow { font: 600 .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; &::before { content: "> "; color: var(--accent); } }
		.archive-desc { margin-top: .5rem; color: var(--muted); }
	}
	/* Mosaico de píxeles que se desvanece desde la esquina, con el color de la categoría */
	:is(.archive-head, .entry-head)::after {
		content: ""; position: absolute; z-index: -1; inset: 0 0 0 auto; width: min(48%, 24rem); pointer-events: none;
		background:
			repeating-conic-gradient(color-mix(in oklab, oklch(.74 .13 var(--hue, 250)) 50%, transparent) 0 25%, transparent 0 50%) 0 0 / 14px 14px;
		mask-image: linear-gradient(to bottom left, #000, transparent 72%);
	}

	/* ---- Tarjetas ---- */
	.feed {
		container-type: inline-size;
		display: grid; gap: var(--gap);
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
		align-items: stretch;
	}
	.card {
		display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius);
		box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--line);
		transition: translate .2s ease, box-shadow .2s ease;
		&:hover { translate: 0 -3px; box-shadow: 0 2px 4px rgb(0 0 0 / .08), 0 16px 32px -14px rgb(0 0 0 / .35); }
		@media (prefers-reduced-motion: reduce) { transition: none; &:hover { translate: none; } }

		&:first-child { grid-column: 1 / -1; }

		&.text-only {
			border-top: .3rem solid oklch(.62 .14 var(--hue, 250));
			background: linear-gradient(180deg, var(--surface-2), var(--surface) 40%);
		}
	}
	.card-media {
		position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--dark);
		.card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .5s ease; }
		.card:hover & .card-img { scale: 1.04; }
		@media (prefers-reduced-motion: reduce) { .card-img { transition: none; } .card:hover & .card-img { scale: 1; } }
	}
	.chip {
		position: absolute; left: .75rem; bottom: .75rem; padding: .25rem .6rem; border-radius: 999px;
		background: color-mix(in oklab, var(--dark) 85%, transparent); color: var(--cream);
		font: 600 .72rem/1.4 var(--mono); letter-spacing: .03em; backdrop-filter: blur(6px);
	}
	.card-body { display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem 1.25rem 1.25rem; flex: 1; }
	.card-date { font: 600 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
	.card-title {
		font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
		a { color: var(--ink); text-decoration: none; &:hover { color: var(--accent); } }
	}
	.card-excerpt { color: var(--muted); font-size: .95rem; }
	.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .4rem; }
	.count { font-size: .8rem; color: var(--muted); text-decoration: none; white-space: nowrap; }

	/* Tarjeta destacada: imagen y texto lado a lado cuando hay sitio */
	@container (min-width: 44rem) {
		.card:first-child.has-image {
			flex-direction: row;
			.card-media { flex: 1.35; aspect-ratio: auto; min-height: 20rem; }
			.card-body { flex: 1; justify-content: center; padding: 2rem; }
			.card-title { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2rem); }
			.card-excerpt { font-size: 1.05rem; }
		}
		.card:first-child.text-only .card-body { padding: 2rem; }
		.card:first-child.text-only .card-title { font-size: 1.9rem; }
	}

	/* ---- Pills y etiquetas ---- */
	.pills { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
	.pill {
		display: inline-block; padding: .15rem .65rem; border-radius: 999px; font-size: .78rem; line-height: 1.6; text-decoration: none;
		color: var(--ink); background: color-mix(in oklab, var(--accent-2) 14%, var(--surface));
		border: 1px solid color-mix(in oklab, var(--accent-2) 35%, transparent);
		&:hover { background: color-mix(in oklab, var(--accent-2) 28%, var(--surface)); }
	}
	.pill-n { color: var(--muted); font-size: .72rem; }
	.tags {
		display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: 0; padding: 0; list-style: none; font-size: .85rem;
		a { color: var(--accent-2); text-decoration: none; &:hover { text-decoration: underline; } }
	}

	/* ---- Paginación y navegación ---- */
	.pagination, .post-navigation, .comments-navigation { font-size: .95rem; }
	.nav-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center; }
	.page-numbers {
		display: inline-grid; place-items: center; min-width: 2.5rem; padding: .35rem .8rem; border-radius: 999px;
		background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
		&.current { background: var(--dark); color: var(--cream); border-color: var(--dark); }
		&:is(a):hover { border-color: var(--accent); color: var(--accent); }
		&.dots { background: transparent; border-color: transparent; }
	}
	.post-navigation .nav-links { display: grid; gap: var(--gap); justify-content: stretch; @media (min-width: 40rem) { grid-template-columns: 1fr 1fr; } }
	.post-navigation a {
		display: block; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
		color: var(--ink); text-decoration: none; font-weight: 600; text-wrap: balance;
		&:hover { border-color: var(--accent); }
		.nav-label { display: block; font: 600 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
	}
	.post-navigation .nav-next { text-align: right; }

	/* ---- Vacíos y 404 ---- */
	.empty {
		padding: 2.5rem 1.5rem; text-align: center; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius);
		display: grid; gap: 1rem; justify-items: center;
		.search-form { width: min(100%, 22rem); }
	}
	.code404 { font: 700 clamp(4rem, 12vw, 7rem)/1 var(--pixel); color: var(--dark); background: var(--vga); -webkit-background-clip: text; background-clip: text; color: transparent; }

	/* ---- Barra lateral ---- */
	.sidebar {
		display: grid; gap: var(--gap); counter-reset: w;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
		align-items: start;
		@media (min-width: 64rem) { grid-template-columns: 1fr; }
	}
	.widget {
		counter-increment: w;
		background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
		overflow: clip; padding: 0 1.1rem 1.15rem;
		ul { margin: 0; padding: 0; list-style: none; }
		a { color: inherit; text-decoration: none; }
	}
	/* Cada bloque lleva su "dirección de memoria" (0x01, 0x02...) y un trocito de paleta VGA */
	.widget-title {
		display: flex; align-items: center; gap: .6rem; margin: 0 -1.1rem 1rem; padding: .7rem 1.1rem;
		background: var(--dark); color: var(--cream);
		font: 700 .95rem/1.2 var(--pixel); letter-spacing: .08em; text-transform: uppercase;
		&::before {
			content: "0x" counter(w, hex); font: 500 .68rem/1 var(--mono); letter-spacing: 0; text-transform: none;
			color: color-mix(in oklab, var(--accent) 65%, white);
		}
		&::after { content: ""; flex: 0 0 3rem; height: .3rem; margin-left: auto; background: var(--vga); opacity: .8; image-rendering: pixelated; }
	}

	/* Bloque de presentación: pantalla VGA con tramado y borde de color giratorio */
	.widget-about {
		position: relative; isolation: isolate; padding: 0 0 1.2rem; border: 0;
		background: var(--dark); color: var(--on-dark);
		&::before {
			content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 2px; pointer-events: none;
			background: conic-gradient(from var(--angle), #ff5f6d, #ffc371, #c6ff6d, #5ff1d8, #6ea8ff, #c77dff, #ff5f6d);
			mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
			animation: spin 9s linear infinite;
		}
		.widget-title { margin: 0 0 1rem; background: transparent; }
		.about-body { padding-inline: 1.25rem; display: grid; gap: .75rem; }
		.about-body p { font-size: .92rem; color: var(--on-dark-muted); }
		.about-body a { color: var(--on-dark); text-decoration: underline; text-underline-offset: .2em; &:hover { color: #ffc371; } }
	}
	@keyframes spin { to { --angle: 360deg; } }
	@media (prefers-reduced-motion: reduce) { .widget-about::before, .search-form::after { animation: none; } }

	.about-screen {
		position: relative; aspect-ratio: 8 / 5; margin: 0 1.25rem; overflow: hidden; border-radius: .5rem;
		background:
			repeating-conic-gradient(#0000 0 25%, #0000003d 0 50%) 0 0 / 6px 6px,
			linear-gradient(160deg, #141055 0%, #6d28d9 36%, #e11d8f 68%, #ff9a3c 100%);
		image-rendering: pixelated;
		&::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #0000 0 2px, #00000033 2px 3px); }
		.res  { position: absolute; top: .55rem; right: .65rem; font: 500 .65rem/1 var(--mono); color: #ffffffb0; z-index: 1; }
		.mode { position: absolute; left: .65rem; bottom: .5rem; font: 700 clamp(1.6rem, 6vw, 2.2rem)/1 var(--pixel); color: #fff; text-shadow: 3px 3px 0 #000a; z-index: 1; }
	}

	/* Últimos comentarios: burbujas con avatar de color según el autor */
	.rc-list { display: grid; gap: 1rem; }
	.rc-item { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
	.rc-av {
		display: grid; place-items: center; width: 2.4rem; aspect-ratio: 1; border-radius: .6rem;
		background: oklch(.58 .15 var(--h, 250)); color: #fff; font: 700 1.15rem/1 var(--pixel);
		text-shadow: 1px 1px 0 #0005; box-shadow: inset 0 -.28rem 0 #0003;
	}
	.rc-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .05rem .5rem; font-size: .78rem; color: var(--muted);
		strong { color: var(--ink); font-size: .92rem; font-weight: 700; }
	}
	.rc-quote {
		margin-top: .35rem; padding: .5rem .75rem; background: var(--surface-2); border-radius: 0 .6rem .6rem .6rem;
		font-size: .88rem; line-height: 1.45; color: var(--ink); text-wrap: pretty;
		a:hover { color: var(--accent); }
	}
	.rc-on { margin-top: .3rem; font-size: .75rem; color: var(--muted); a { color: var(--accent); &:hover { text-decoration: underline; } } }

	/* Categorías: barras de bloques proporcionales al número de entradas */
	.cat-bars { display: grid; gap: .3rem; }
	.cat-bars a {
		--c: oklch(.62 .15 var(--hue, 250));
		position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem;
		padding: .4rem .65rem; border-radius: var(--radius-sm); overflow: hidden; font-size: .9rem; font-weight: 500;
		background: color-mix(in oklab, var(--surface-2) 70%, transparent);
		&::before {
			content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--p, 10%);
			background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--c) 38%, var(--surface)) 0 .38rem, transparent .38rem .5rem);
			transition: width .45s cubic-bezier(.2, .8, .2, 1);
		}
		&:hover::before, &:focus-visible::before { width: 100%; }
		&:hover { color: var(--ink); }
		.num { font: 600 .74rem/1 var(--mono); color: var(--muted); }
	}
	.more {
		margin-top: .5rem; interpolate-size: allow-keywords;
		summary { cursor: pointer; font: 600 .78rem/1 var(--mono); color: var(--muted); padding: .5rem .2rem; list-style: none; &::-webkit-details-marker { display: none; } &::before { content: "+ "; color: var(--accent); } &:hover { color: var(--ink); } }
		&[open] summary::before { content: "− "; }
		&::details-content { block-size: 0; overflow: clip; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
		&[open]::details-content { block-size: auto; }
		.cat-bars { margin-top: .3rem; }
	}

	/* ---- Movimiento (mejora progresiva) ---- */
	@supports (animation-timeline: view()) {
		@media (prefers-reduced-motion: no-preference) {
			.feed > .card, .sidebar > .widget {
				animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%;
			}
		}
	}
	@keyframes rise { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }

	/* ---- Pie ---- */
	.site-footer {
		background: var(--dark); color: var(--on-dark-muted); margin-top: auto;
		.foot { display: grid; gap: .6rem; justify-items: center; text-align: center; padding-block: 1.75rem 2.25rem; }
		a { color: var(--on-dark); }
		.foot-brand { font: 700 1.7rem/1 var(--pixel); color: var(--on-dark); }
		.foot-text, .foot-links { font-size: .9rem; }
		.foot-mono { font: .75rem/1.4 var(--mono); opacity: .7; span { opacity: .6; } }
	}
	body { display: flex; flex-direction: column; min-height: 100dvh; }
	.layout { flex: 1 0 auto; width: min(100% - 2rem, 76rem); }
}

/* ============================================================
   Contenido de entradas
   ============================================================ */
@layer content {
	.entry {
		position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: clip;
		/* franja de paleta VGA en el borde superior */
		&::before { content: ""; display: block; height: .35rem; background: var(--vga); image-rendering: pixelated; }
	}

	.entry-head {
		position: relative; isolation: isolate; display: grid; gap: .8rem; padding: clamp(1.2rem, 3vw, 1.9rem) clamp(1.25rem, 3.5vw, 2.5rem);
		background: linear-gradient(120deg, color-mix(in oklab, oklch(.7 .13 var(--hue, 250)) 15%, var(--surface)), var(--surface) 64%);
		border-bottom: 1px solid var(--line);
		color: var(--ink);

		.entry-title { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.3rem); line-height: 1.12; letter-spacing: -.028em; }
	}
	.entry-kicker {
		display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; font: 500 .78rem/1 var(--mono); color: var(--muted);
		a { color: inherit; text-decoration: none; &:hover { color: var(--accent); } }
	}
	.entry-date { padding: .35rem .7rem; border-radius: 999px; background: var(--dark); color: var(--cream); font-weight: 600; letter-spacing: .03em; }

	/* La foto manda: se ve entera sobre un fondo desenfocado de sí misma, y el título flota sobre su borde */
	.entry-hero {
		position: relative; isolation: isolate; overflow: hidden; background: var(--dark); line-height: 0;
		&::before {
			content: ""; position: absolute; inset: -2rem; z-index: -1;
			background: var(--hero) center / cover; filter: blur(30px) saturate(1.3) brightness(.62);
		}
		img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(78vh, 52rem); margin-inline: auto; }
	}
	.entry-hero + .entry-head {
		z-index: 1; margin: -2.75rem clamp(.75rem, 3vw, 1.75rem) 0;
		border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px -24px rgb(0 0 0 / .55);
		overflow: hidden;
	}
	.entry-hero + .entry-head + .entry-content { padding-top: clamp(1.5rem, 3.5vw, 2.25rem); }

	.entry-content {
		padding: clamp(1.25rem, 3.5vw, 2.5rem);
		font-size: clamp(1.02rem, 1rem + .2vw, 1.12rem);
		overflow-wrap: break-word;

		> * + * { margin-top: 1.1em; }
		> :is(h2, h3, h4) { margin-top: 1.8em; }
		h2 { font-size: 1.5em; }
		h3 { font-size: 1.25em; }
		h4, h5, h6 { font-size: 1.05em; }

		:is(ul, ol) { padding-left: 1.4em; li + li { margin-top: .5em; } }
		ul { list-style: square; }
		ol { list-style: decimal; }
		li::marker { color: var(--accent); }
		li > :is(ul, ol) { margin-top: .3em; }
		strong, b { font-weight: 700; }

		blockquote {
			padding: .8em 1.2em; border-left: .3rem solid var(--accent); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
			font-style: italic;
			cite { display: block; margin-top: .5em; font-size: .9em; color: var(--muted); font-style: normal; }
		}
		hr { border: 0; border-top: 1px dashed var(--line); margin-block: 2em; }
		:is(code, pre, kbd) { font-family: var(--mono); font-size: .9em; background: var(--surface-2); border-radius: .25rem; }
		code, kbd { padding: .1em .35em; }
		pre {
			padding: 1.25em 1.2em 1em; overflow-x: auto; color: #7dffb0; border-radius: var(--radius-sm); line-height: 1.5;
			background: var(--vga) top / 100% .25rem no-repeat, var(--dark);
			code { background: none; padding: 0; color: inherit; }
		}
		table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; font-size: .92em; }
		:is(td, th) { padding: .45em .7em; border: 1px solid var(--line); text-align: left; vertical-align: top; }
		th { background: var(--surface-2); }

		/* Imágenes: aire y sombra suave, y se pueden ampliar */
		img:not(.emoji, .wp-smiley, .avatar) {
			display: block; margin-inline: auto; border-radius: var(--radius-sm); box-shadow: 0 6px 22px -10px rgb(0 0 0 / .5);
			cursor: zoom-in;
		}
		a > img:not(.emoji) { cursor: pointer; }
		img.emoji, img.wp-smiley { display: inline; height: 1em; width: 1em; margin: 0 .07em; vertical-align: -.1em; box-shadow: none; }

		/* Marcado heredado de 2008-2012 */
		center { display: block; text-align: center; margin-block: 1.4em; }
		center > :is(a, img) + :is(a, img) { margin-top: .75rem; }
		center a { display: inline-block; vertical-align: top; }
		center a + a, center img + img { margin-left: .4rem; }
		.alignleft  { float: left;  margin: .3em 1.2em .8em 0; }
		.alignright { float: right; margin: .3em 0 .8em 1.2em; }
		.aligncenter { display: block; margin-inline: auto; }
		@media (max-width: 40rem) { .alignleft, .alignright { float: none; margin: 1em auto; } }
		.wp-caption { max-width: 100%; text-align: center; }
		.wp-caption-text, figcaption { font-size: .85em; color: var(--muted); margin-top: .4em; }
		.page-links { font-size: .9em; }
	}

	.video {
		position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: #000; margin-block: 1.4em;
		iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
	}
	/* Correo de contacto como imagen (para que los bots no lo recojan) */
	.entry-content img.mail-img { display: inline; width: auto; height: 1.2em; margin: 0; border: 0; border-radius: 0; box-shadow: none; vertical-align: -.28em; cursor: text; user-select: none; }
	@media (prefers-color-scheme: dark) { :root[data-scheme="auto"] .entry-content img.mail-img { filter: invert(.92); } }
	.u-center { text-align: center; :is(img, iframe, .video) { margin-inline: auto; } }
	.img-missing { display: block; padding: .9em 1.1em; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); font-size: .9em; text-align: center; }
	.legacy-embed {
		padding: .9em 1.1em; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); font-size: .9em; text-align: center;
	}

	.entry-foot { padding: 0 clamp(1.25rem, 3.5vw, 2.5rem) 1.5rem; }

	/* ---- Comentarios ---- */
	.comments {
		background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem);
		display: grid; gap: 1.5rem;
	}
	.comments-title, .comment-reply-title { font-size: 1.25rem; }
	.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
	.comment-list .children { list-style: none; margin: 1.1rem 0 0; padding-left: clamp(.75rem, 4vw, 2rem); border-left: 2px solid var(--line); display: grid; gap: 1.1rem; }
	.comment-body { display: grid; gap: .4rem; }
	.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; font-size: .85rem; color: var(--muted);
		.comment-author { display: flex; align-items: center; gap: .6rem; color: var(--ink); font-weight: 600; }
		.avatar { border-radius: 50%; }
		.rc-av.avatar { width: 2.2rem; flex: none; border-radius: .6rem; }
		a { color: inherit; text-decoration: none; &:hover { color: var(--accent); } }
		.says { display: none; }
	}
	.comment-content p + p { margin-top: .7em; }
	.reply a { font-size: .8rem; font-weight: 600; text-decoration: none; }
	.pingback, .trackback { font-size: .85rem; color: var(--muted); }
	.bypostauthor > .comment-body .comment-author .fn::after {
		content: "autor"; margin-left: .5rem; padding: .05rem .5rem; border-radius: 999px; background: var(--dark); color: var(--cream); font: 600 .65rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .06em;
	}

	.pings {
		font-size: .9rem; color: var(--muted);
		summary { cursor: pointer; font-weight: 600; }
		.comment-list { margin-top: .75rem; gap: .4rem; }
		.comment-body { display: block; }
	}

	.comment-form-privacy { display: flex; gap: .6rem; align-items: baseline; label { margin: 0; font-weight: 400; } }
	.comment-form {
		display: grid; gap: .9rem;
		label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .2rem; }
		:is(input[type="text"], input[type="email"], input[type="url"], textarea) {
			width: 100%; padding: .65rem .85rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink);
			&:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent); }
		}
		.comment-form-cookies-consent { display: flex; gap: .6rem; align-items: baseline; label { margin: 0; font-weight: 400; } }
		.form-submit { margin: 0; }
		.comment-notes, .logged-in-as { font-size: .85rem; color: var(--muted); }
	}
	.submit, .comment-form input[type="submit"] {
		padding: .7rem 1.4rem; border: 0; border-radius: 999px; background: var(--dark); color: var(--cream); font-weight: 700; cursor: pointer;
		&:hover { background: var(--accent); }
	}

	/* ---- Visor de imágenes ---- */
	.lightbox {
		padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100%; height: 100%;
		&::backdrop { background: rgb(8 8 12 / .92); }
		&[open] { display: grid; place-items: center; align-content: center; gap: .75rem; padding: 1rem; }
		img { max-width: min(100%, 96rem); max-height: 84dvh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); cursor: default; }
		.lb-cap { color: var(--on-dark-muted); font-size: .9rem; text-align: center; }
		.lb-close {
			position: fixed; top: .75rem; right: .75rem; width: 2.75rem; height: 2.75rem; border: 1px solid #ffffff40; border-radius: 50%;
			background: #0008; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
		}
	}
}

/* ============================================================
   Utilidades y esquema oscuro completo opcional
   ============================================================ */
@layer utilities {
	@media (prefers-contrast: more) {
		:root { --line: light-dark(#8d8b82, #6b6b7a); --muted: light-dark(#45454d, #c2c2cc); }
	}
	@media print {
		.site-header, .minigallery, .sidebar, .site-footer, .comments, .post-navigation { display: none; }
		body { background: #fff; color: #000; }
		body::before, body::after { display: none; }
		.entry { border: 0; box-shadow: none; }
		.entry-head, .archive-head { background: none; color: #000; border: 0; padding: 0; }
		.entry-head::after, .archive-head::after, .entry::before { display: none; }
		.entry-head .entry-title { color: #000; }
	}
}