:root {
	--bg: #f7f8fa;
	--bg2: #ffffff;
	--txt: #14171f;
	--txt2: #5b6272;
	--borde: #e3e6ec;
	--acento: #1f6feb;
	--acento2: #e8f0fe;
	--ok: #1a7f37;
	--err: #cf222e;
	--sombra: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0d1117; --bg2: #161b22; --txt: #e6edf3; --txt2: #9198a1;
		--borde: #2a313c; --acento: #4c8dff; --acento2: #1a2740;
		--ok: #3fb950; --err: #f85149; --sombra: none;
	}
}
:root[data-theme="dark"] {
	--bg: #0d1117; --bg2: #161b22; --txt: #e6edf3; --txt2: #9198a1;
	--borde: #2a313c; --acento: #4c8dff; --acento2: #1a2740;
	--ok: #3fb950; --err: #f85149; --sombra: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
	margin: 0; background: var(--bg); color: var(--txt);
	font: 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
img { max-width: 100%; display: block; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5 { margin: 0; line-height: 1.2; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
section { padding: 56px 0; }
section > h3, .titulo-sec h3 { font-size: 1.75rem; margin-bottom: 24px; }

/* Navegación */
.nav {
	position: sticky; top: 0; z-index: 10;
	background: color-mix(in srgb, var(--bg) 85%, transparent);
	backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde);
}
.nav-in { display: flex; align-items: center; gap: 16px; height: 60px; }
.marca { font-weight: 700; font-size: 1.25rem; color: var(--txt); }
.marca span { color: var(--acento); }
#menu { margin-left: auto; display: flex; gap: 20px; align-items: center; }
#menu a:not(.btn) { color: var(--txt2); font-weight: 500; }
#menu a:not(.btn):hover { color: var(--txt); text-decoration: none; }
.tema {
	border: 1px solid var(--borde); background: var(--bg2); color: var(--txt);
	width: 36px; height: 36px; border-radius: 8px; cursor: pointer; font-size: 1rem;
}

/* Botones */
.btn {
	display: inline-block; background: var(--acento); color: #fff; border: 0;
	padding: 12px 22px; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn:disabled { opacity: .6; cursor: default; }
.btn-sm { padding: 8px 14px; font-size: .9rem; }
.btn-ghost { background: transparent; color: var(--txt); border: 1px solid var(--borde); }

/* Hero */
.hero { padding: 56px 16px 24px; }
.eyebrow { color: var(--acento); font-weight: 600; margin: 0 0 8px; }
.hero h1 { font-size: clamp(2rem, 5.5vw, 3.2rem); letter-spacing: -.02em; max-width: 20ch; }
.lead { font-size: 1.1rem; color: var(--txt2); max-width: 62ch; margin: 16px 0 24px; }
.autor { display: flex; align-items: center; gap: 12px; }
.autor img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid var(--borde); }
.autor strong, .autor span { display: block; }
.autor span { color: var(--txt2); font-size: .9rem; }
.cifras { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 24px 0 0; padding: 0; color: var(--txt2); }
.cifras strong { color: var(--txt); }

/* Proyectos */
.titulo-sec { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.titulo-sec h3 { margin: 0; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
	border: 1px solid var(--borde); background: var(--bg2); color: var(--txt2);
	padding: 6px 14px; border-radius: 999px; font: inherit; font-size: .9rem; cursor: pointer; white-space: nowrap;
}
.chip.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.card {
	background: var(--bg2); border: 1px solid var(--borde); border-radius: 16px; overflow: hidden;
	display: flex; flex-direction: column; box-shadow: var(--sombra); transition: transform .2s;
}
.card:hover { transform: translateY(-3px); }
.card[hidden] { display: none; }
.card-img { background: var(--acento2); aspect-ratio: 16/10; }
.card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card h4 { font-size: 1.1rem; }
.card .meta { color: var(--acento); font-size: .8rem; font-weight: 600; }
.card-img.contain { background: #fff; }
.card-img.contain img { object-fit: contain; object-position: center; padding: 12px; }
.card.destacado { grid-column: 1 / -1; flex-direction: row; }
.destacado .card-img { flex: 0 0 42%; aspect-ratio: auto; min-height: 280px; }
.destacado .card-body { justify-content: center; padding: 28px 32px; }
.destacado h4 { font-size: 1.5rem; }
.card p { margin: 0; color: var(--txt2); font-size: .95rem; }
.links { display: flex; gap: 16px; margin-top: auto; padding-top: 4px; font-weight: 600; font-size: .95rem; }
.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { background: var(--acento2); color: var(--acento); font-size: .78rem; font-weight: 500; padding: 3px 10px; border-radius: 999px; }

/* Sobre mí */
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.dos-col p { color: var(--txt2); }
.linea { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid var(--borde); }
.linea li { position: relative; padding: 0 0 22px; }
.linea li::before {
	content: ""; position: absolute; left: -27px; top: 6px; width: 12px; height: 12px;
	border-radius: 50%; background: var(--acento); border: 3px solid var(--bg);
}
.linea span { display: block; color: var(--acento); font-weight: 600; font-size: .85rem; }

/* Stack */
.stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.stack-g { background: var(--bg2); border: 1px solid var(--borde); border-radius: 14px; padding: 20px; }
.stack-g h5 { font-size: 1rem; margin-bottom: 12px; }

/* Contacto */
.datos { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.datos span { display: block; color: var(--txt2); font-size: .85rem; }
.datos a { font-size: 1.1rem; font-weight: 600; }
.form { background: var(--bg2); border: 1px solid var(--borde); border-radius: 16px; padding: 24px; display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-weight: 500; font-size: .9rem; }
.form input, .form textarea {
	font: inherit; color: var(--txt); background: var(--bg); border: 1px solid var(--borde);
	border-radius: 10px; padding: 10px 12px; width: 100%;
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
.hp { position: absolute; left: -9999px; }
.estado { margin: 0; min-height: 1.2em; font-size: .9rem; }
.ok { color: var(--ok); }
.err { color: var(--err); }

.pie { border-top: 1px solid var(--borde); padding: 24px 16px; color: var(--txt2); font-size: .9rem; }

@media (max-width: 760px) {
	#menu a:not(.btn) { display: none; }
	.dos-col { grid-template-columns: 1fr; gap: 32px; }
	.hero { padding-top: 40px; }
	.card.destacado { flex-direction: column; }
	.destacado .card-img { flex: none; aspect-ratio: 16/10; min-height: 0; }
	.destacado .card-body { padding: 18px 20px 20px; }
	.destacado h4 { font-size: 1.1rem; }
	section { padding: 40px 0; }
}