/*
Theme Name:   Trucos Informáticos
Theme URI:    https://www.trucosinformaticos.com
Author:       Trucos Informáticos
Description:  Tema a medida para trucosinformaticos.com. Señalética de taller: naranja comprometido sobre tinta, Bricolage Grotesque autoalojada, una sola hoja CSS, sin jQuery, modo oscuro automático y HTML semántico optimizado para SEO.
Version:      2.0.0
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  trucosinfo
*/

/* ==========  Fuente display (autoalojada, variable 400-800)  ========== */
@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 100%;
	font-display: swap;
	src: url('assets/fonts/bricolage-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ==========  Tokens  ========== */
:root {
	--bg: #fafaf9;
	--surface: #ffffff;
	--ink: #1c1917;
	--body-c: #292524;
	--muted: #57534e;
	--border: #e7e5e4;
	--accent: #ea580c;
	--accent-deep: #c2410c;
	--accent-soft: rgba(234, 88, 12, 0.09);
	--code-bg: #1c1917;
	--code-text: #e7e5e4;
	--on-accent: #1c1917;
	--font-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-mono: ui-monospace, 'Cascadia Code', Consolas, 'Courier New', monospace;
	--r-card: 12px;
	--r-ctl: 8px;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	/* escala z: dropdown < sticky < overlay */
	--z-dropdown: 30;
	--z-sticky: 40;
}

@supports (color: oklch(0% 0 0)) {
	:root {
		--accent: oklch(64.5% 0.194 42);
		--accent-deep: oklch(55.3% 0.173 41);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #151312;
		--surface: #1e1b19;
		--ink: #f5f5f4;
		--body-c: #d6d3d1;
		--muted: #a8a29e;
		--border: #2e2a27;
		--accent: #fb923c;
		--accent-deep: #fdba74;
		--accent-soft: rgba(251, 146, 60, 0.12);
		--code-bg: #0f0e0d;
		--code-text: #d6d3d1;
	}

	@supports (color: oklch(0% 0 0)) {
		:root {
			--accent: oklch(76.5% 0.16 55);
			--accent-deep: oklch(84% 0.115 62);
		}
	}
}

/* ==========  Base  ========== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--body-c);
	background: var(--bg);
}

img { max-width: 100%; height: auto; }

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

a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--ink);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.wrap-narrow { max-width: 780px; }

.section { padding: 48px 0 72px; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink);
	color: var(--bg);
	padding: 10px 16px;
	z-index: 99;
	border-radius: 0 0 var(--r-ctl) 0;
}

.skip-link:focus { left: 0; color: var(--bg); }

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

::selection { background: var(--accent); color: var(--on-accent); }

/* ==========  Cabecera  ========== */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 64px;
	flex-wrap: wrap;
}

.brand {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.brand a { color: var(--ink); text-decoration: none; }

.brand-dot { color: var(--accent); margin-left: 1px; }

.site-nav { display: flex; align-items: center; gap: 16px; margin-left: auto; }

.menu, .menu ul { list-style: none; margin: 0; padding: 0; }

.menu { display: flex; gap: 2px; }

.menu li { position: relative; }

.menu a {
	display: block;
	padding: 9px 12px;
	color: var(--body-c);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.94rem;
	border-radius: var(--r-ctl);
	transition: color 0.18s var(--ease-out), background-color 0.18s var(--ease-out);
}

.menu a:hover { color: var(--accent-deep); background: var(--accent-soft); }

.menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	box-shadow: 0 12px 32px -12px rgba(28, 25, 23, 0.25);
	padding: 6px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out), visibility 0.16s;
	z-index: var(--z-dropdown);
}

.menu li:hover > .sub-menu,
.menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.menu .sub-menu .sub-menu { top: 0; left: 100%; }

.nav-search input {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--body-c);
	border-radius: 999px;
	padding: 8px 16px;
	font: inherit;
	font-size: 0.9rem;
	width: 170px;
	transition: width 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.nav-search input::placeholder { color: var(--muted); }

.nav-search input:focus { outline: none; border-color: var(--accent); width: 220px; }

.nav-toggle-input { display: none; }

.nav-toggle { display: none; }

/* ==========  Hero señalético (portada)  ========== */
.hero {
	background: var(--accent);
	background: linear-gradient(160deg, #f97316 0%, #ea580c 55%, #dc4a08 100%);
	color: #1c1917;
	padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(6rem, 9vw, 7.5rem);
}

.hero-title {
	margin: 0 0 14px;
	font-size: clamp(2.3rem, 5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-weight: 800;
	color: #1c1917;
	max-width: 20ch;
}

.hero-sub {
	margin: 0;
	max-width: 56ch;
	color: #431407;
	font-size: 1.1rem;
	line-height: 1.6;
}

.hero-chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 26px 0 0;
	padding: 0;
}

.hero-chips a {
	display: inline-block;
	padding: 8px 16px;
	border: 1.5px solid rgba(28, 25, 23, 0.45);
	border-radius: 999px;
	color: #1c1917;
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 700;
	transition: background-color 0.18s var(--ease-out), color 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}

.hero-chips a:hover { background: #1c1917; border-color: #1c1917; color: #fdba74; }

@media (prefers-reduced-motion: no-preference) {
	.hero .wrap > * {
		animation: hero-rise 0.7s var(--ease-out) both;
	}

	.hero .wrap > *:nth-child(2) { animation-delay: 0.08s; }
	.hero .wrap > *:nth-child(3) { animation-delay: 0.16s; }
}

@keyframes hero-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

/* La cuadrícula de portada se solapa con el hero */
.home-overlap { margin-top: clamp(-5rem, -7vw, -4rem); padding-top: 0; }

/* ==========  Cuadrícula de tarjetas  ========== */
.section-title { font-size: 1.5rem; margin: 0 0 24px; }

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

.card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	overflow: hidden;
	transition: transform 0.18s var(--ease-out), border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}

.card:hover {
	transform: translateY(-2px);
	border-color: var(--accent);
	box-shadow: 0 16px 32px -20px rgba(234, 88, 12, 0.35);
}

.card-media {
	display: block;
	aspect-ratio: 1200 / 630;
	background: var(--code-bg);
	overflow: hidden;
}

.card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s var(--ease-out);
}

.card:hover .card-media img { transform: scale(1.03); }

.card-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--accent);
	font-family: var(--font-mono);
	font-size: 2rem;
	font-weight: 700;
}

.card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }

.pill {
	align-self: flex-start;
	color: var(--accent-deep);
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: none;
}

.pill:hover { text-decoration: underline; text-underline-offset: 3px; }

.card-title { margin: 0; font-size: 1.17rem; line-height: 1.32; }

.card-title a { color: var(--ink); text-decoration: none; transition: color 0.15s var(--ease-out); }

.card-title a:hover { color: var(--accent-deep); }

.card-excerpt { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.6; }

.card-meta { margin: auto 0 0; padding-top: 8px; color: var(--muted); font-size: 0.82rem; }

.meta-sep { margin: 0 6px; }

/* Primera tarjeta destacada en portada */
@media (min-width: 900px) {
	.grid-featured > .card:first-child {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 1.25fr 1fr;
	}

	.grid-featured > .card:first-child .card-media { aspect-ratio: auto; height: 100%; min-height: 330px; }

	.grid-featured > .card:first-child .card-body { justify-content: center; padding: 32px 40px; gap: 14px; }

	.grid-featured > .card:first-child .card-title { font-size: 1.85rem; letter-spacing: -0.025em; }

	.grid-featured > .card:first-child .card-excerpt { font-size: 1.02rem; }
}

/* ==========  Archivos  ========== */
.archive-header { margin-bottom: 32px; max-width: 780px; }

.archive-title {
	font-size: clamp(1.8rem, 3.5vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 6px 0 10px;
}

.archive-description { color: var(--muted); max-width: 65ch; }

.breadcrumb { font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }

.breadcrumb a { color: var(--muted); text-decoration: none; }

.breadcrumb a:hover { color: var(--accent-deep); }

.breadcrumb span { margin: 0 6px; }

/* ==========  Entrada individual  ========== */
.entry-header { padding: 48px 0 6px; }

.entry-title {
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
	font-weight: 800;
	margin: 14px 0 12px;
}

.entry-meta { color: var(--muted); font-size: 0.9rem; margin: 0 0 8px; }

.entry-cover { margin: 20px 0 8px; }

.entry-cover img { border-radius: var(--r-card); width: 100%; }

.prose { font-size: 1.0625rem; }

.prose p { text-wrap: pretty; }

.prose h2 {
	font-size: 1.55rem;
	font-weight: 700;
	margin: 2.3em 0 0.6em;
}

.prose h3 { font-size: 1.22rem; font-weight: 700; margin: 1.8em 0 0.5em; }

.prose p, .prose li { line-height: 1.78; max-width: 72ch; }

.prose li { margin-bottom: 6px; }

.prose img { border-radius: var(--r-card); }

.prose a { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

.prose code {
	font-family: var(--font-mono);
	font-size: 0.88em;
	background: var(--accent-soft);
	color: var(--ink);
	padding: 2px 7px;
	border-radius: 6px;
}

.prose pre {
	background: var(--code-bg);
	color: var(--code-text);
	border-radius: var(--r-card);
	padding: 20px 22px;
	overflow-x: auto;
	font-size: 0.9rem;
	line-height: 1.65;
}

.prose pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

.prose blockquote {
	margin: 1.5em 0;
	padding: 16px 22px;
	background: var(--accent-soft);
	border-radius: var(--r-card);
	color: var(--ink);
}

.prose blockquote p { margin: 0.4em 0; }

.prose table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }

.prose th, .prose td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; }

.prose th { background: var(--accent-soft); color: var(--ink); }

/* ==========  Etiquetas y navegación entre posts  ========== */
.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; padding: 0; }

.tag-list a {
	display: inline-block;
	padding: 5px 13px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--muted);
	font-size: 0.83rem;
	text-decoration: none;
	transition: color 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}

.tag-list a:hover { border-color: var(--accent); color: var(--accent-deep); }

.post-navigation { margin: 44px 0; border-top: 1px solid var(--border); padding-top: 24px; }

.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

.post-navigation a { text-decoration: none; display: flex; flex-direction: column; gap: 3px; max-width: 46%; }

.post-navigation .nav-label { font-size: 0.8rem; color: var(--muted); font-weight: 700; }

.post-navigation .nav-title { color: var(--ink); font-weight: 600; font-family: var(--font-display); }

.post-navigation a:hover .nav-title { color: var(--accent-deep); }

/* ==========  Paginación  ========== */
.pagination { margin-top: 44px; }

.pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }

.pagination .page-numbers {
	display: inline-block;
	min-width: 42px;
	text-align: center;
	padding: 9px 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-ctl);
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.92rem;
	transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}

.pagination a.page-numbers:hover { border-color: var(--accent); color: var(--accent-deep); }

.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ==========  Comentarios y formularios  ========== */
.comments { margin-top: 48px; border-top: 1px solid var(--border); padding-top: 30px; }

.comments-title { font-size: 1.3rem; }

.comment-list { list-style: none; margin: 0; padding: 0; }

.comment-list .comment {
	border: 1px solid var(--border);
	background: var(--surface);
	border-radius: var(--r-card);
	padding: 16px 18px;
	margin-bottom: 14px;
}

.comment-list .children { list-style: none; margin: 14px 0 0; padding-left: 22px; }

.comment-list .avatar { border-radius: 999px; }

input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea {
	font: inherit;
	color: var(--body-c);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-ctl);
	padding: 10px 14px;
	max-width: 100%;
}

input::placeholder, textarea::placeholder { color: var(--muted); }

input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

input[type="submit"], .btn {
	display: inline-block;
	background: var(--ink);
	color: var(--bg);
	border: 1.5px solid var(--ink);
	border-radius: var(--r-ctl);
	padding: 11px 22px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.18s var(--ease-out), color 0.18s var(--ease-out), transform 0.12s var(--ease-out);
}

input[type="submit"]:hover, .btn:hover { background: var(--accent); border-color: var(--accent); color: #1c1917; }

input[type="submit"]:active, .btn:active { transform: translateY(1px); }

.search-form { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }

/* ==========  Pie  ========== */
.site-footer {
	background: #1c1917;
	color: #d6d3d1;
	margin-top: 64px;
	border-top: 6px solid var(--accent);
}

.footer-inner {
	display: flex;
	justify-content: space-between;
	gap: 32px;
	padding-top: 44px;
	padding-bottom: 24px;
	flex-wrap: wrap;
}

.site-footer .brand a { color: #fafaf9; }

.footer-tagline { max-width: 44ch; font-size: 0.92rem; margin: 8px 0 0; color: #a8a29e; }

.footer-menu { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; }

.footer-menu a {
	color: #d6d3d1;
	text-decoration: none;
	font-size: 0.92rem;
	padding: 6px 0;
	display: inline-block;
	transition: color 0.15s var(--ease-out);
}

.footer-menu a:hover { color: #fdba74; }

.footer-legal {
	border-top: 1px solid rgba(214, 211, 209, 0.15);
	padding-top: 16px;
	padding-bottom: 22px;
	font-size: 0.82rem;
	color: #a8a29e;
}

.footer-legal p { margin: 0; }

/* ==========  Bloques de WordPress  ========== */
.alignwide { margin-left: -60px; margin-right: -60px; }

.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

.wp-block-image figcaption { color: var(--muted); font-size: 0.85rem; text-align: center; }

/* ==========  Móvil  ========== */
@media (max-width: 900px) {
	.nav-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 42px;
		height: 42px;
		padding: 9px;
		margin-left: auto;
		border: 1px solid var(--border);
		border-radius: var(--r-ctl);
		cursor: pointer;
	}

	.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out); }

	.nav-toggle-input:checked ~ .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.nav-toggle-input:checked ~ .nav-toggle span:nth-child(2) { opacity: 0; }
	.nav-toggle-input:checked ~ .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.site-nav {
		display: none;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		margin: 0;
		padding: 8px 0 16px;
	}

	.nav-toggle-input:checked ~ .site-nav { display: flex; }

	.menu { flex-direction: column; gap: 0; }

	.menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		background: transparent;
		padding: 0 0 0 18px;
		min-width: 0;
	}

	.nav-search { margin-top: 10px; }

	.nav-search input, .nav-search input:focus { width: 100%; }

	.hero { padding-top: 44px; }

	.section { padding: 34px 0 52px; }

	.alignwide { margin-left: 0; margin-right: 0; }

	.post-navigation a { max-width: 100%; }
}

@media (max-width: 1320px) {
	.alignwide { margin-left: 0; margin-right: 0; }
}

/* ==========  Accesibilidad  ========== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}