/* ==========================================================================
   SABRINA — Personal Engineering Website
   Segunda iteración — Sistema de diseño compartido
   ========================================================================== */

/* Tipografías — Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=IBM+Plex+Sans:wght@400;500;600&family=Space+Grotesk:wght@500;600;700;800&display=swap');

:root {
	/* Paleta oscura con matiz azulado (conservada) */
	--bg: #0a0b0f;
	--bg-surface: #12131c;
	--bg-surface-lighter: #1a1b26;
	--border: #222330;
	--border-soft: #1c1d28;

	/* Texto */
	--text: #e8e8e0;
	--text-secondary: #9a9aa0;
	--text-tertiary: #71717a;

	/* Acento: verde terminal moderado, usado con parsimonia */
	--accent: #4ade80;
	--accent-dim: rgba(74, 222, 128, 0.10);
	--accent-hover: #86efac;

	/* Espaciado editorial */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.75rem;
	--spacing-lg: 3.5rem;
	--spacing-xl: 6rem;
	--spacing-section: 8rem;

	/* Radios y bordes */
	--radius-sm: 3px;
	--radius-md: 6px;
	--radius-lg: 12px;
	--border-fine: 1px solid var(--border);
	--border-soft: 1px solid var(--border-soft);

	/* Tipografía */
	--font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
	--font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Cascadia Code', monospace;

	/* Tamaños tipográficos */
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.75rem;
	--text-3xl: 2.25rem;
	--text-4xl: 3rem;
	--text-5xl: 4rem;

	/* Transiciones */
	--transition: 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* ==========================================================================
   Reset y base
   ========================================================================== */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.7;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: inherit;
	text-decoration: none;
}

.container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 var(--spacing-md);
	width: 100%;
}

.section {
	padding: var(--spacing-section) 0;
}

.section > .container > :first-child {
	margin-top: 0;
}

/* ==========================================================================
   Tipografía jerárquica
   ========================================================================== */
.display {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
	color: var(--text);
}

.display-sm {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.display-md {
	font-size: clamp(2.25rem, 5vw, 3.5rem);
}

.display-lg {
	font-size: clamp(3rem, 7vw, 5rem);
}

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--text);
}

h1 {
	font-size: var(--text-5xl);
}

h2 {
	font-size: var(--text-3xl);
}

h3 {
	font-size: var(--text-xl);
}

p {
	color: var(--text-secondary);
	margin-bottom: var(--spacing-md);
	max-width: 60ch;
}

.text-tertiary {
	color: var(--text-tertiary);
}

.lead {
	font-size: var(--text-lg);
	max-width: 65ch;
	line-height: 1.8;
}

.mono {
	font-family: var(--font-mono);
}

/* ==========================================================================
   Header y navegación global
   ========================================================================== */
header {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(12px);
	background: rgba(10, 11, 15, 0.8);
	border-bottom: var(--border-soft);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
}

.brand {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text);
}

.nav-list {
	display: flex;
	align-items: center;
	gap: var(--spacing-xl);
	list-style: none;
}

.nav-link {
	color: var(--text-secondary);
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: -0.01em;
	transition: color var(--transition);
}

.nav-link:hover {
	color: var(--accent);
}

.nav-link.active {
	color: var(--accent);
}

/* ==========================================================================
   Botones
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: all var(--transition);
	border: var(--border-fine);
	background: transparent;
	color: var(--text);
	cursor: pointer;
}

.btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.btn-accent {
	background: var(--accent);
	color: var(--bg);
	border-color: var(--accent);
}

.btn-accent:hover {
	background: var(--accent-hover);
	color: var(--bg);
}

/* ==========================================================================
   Componentes reutilizables
   ========================================================================== */
.tag {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	padding: 0.25rem 0.65rem;
	border-radius: var(--radius-sm);
	border: var(--border-soft);
	color: var(--text-tertiary);
	background: transparent;
}

.tag.accent {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--accent-dim);
}

.separator {
	width: 100%;
	height: 1px;
	background: var(--border);
	margin: var(--spacing-lg) 0;
}

.separator.accent {
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.intro-title {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-tertiary);
	margin-bottom: var(--spacing-sm);
	display: block;
}

.hero-id {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--accent);
	text-transform: uppercase;
	margin-bottom: var(--spacing-md);
	display: inline-block;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	padding: var(--spacing-xl) 0;
}

.hero h1 {
	margin-bottom: var(--spacing-md);
}

.hero p {
	font-size: var(--text-lg);
	max-width: 55ch;
	margin-bottom: var(--spacing-lg);
}

.hero-actions {
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}

/* ==========================================================================
   Áreas de interés — composición asimétrica
   ========================================================================== */
.interests-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-lg);
}

.interest-item {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	padding: var(--spacing-lg);
	background: var(--bg-surface);
	border: var(--border-soft);
	border-radius: var(--radius-lg);
}

.interest-number {
	font-family: var(--font-mono);
	font-size: 2rem;
	font-weight: 700;
	color: var(--text-tertiary);
	line-height: 1;
}

/* ==========================================================================
   Historial de contribuciones — línea temporal técnica
   ========================================================================== */
.timeline {
	position: relative;
	border-left: var(--border-fine);
	padding-left: var(--spacing-lg);
	margin-top: var(--spacing-lg);
}

.timeline::before {
	content: '';
	position: absolute;
	left: calc(50% - 0.5px);
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--border-soft);
}

.timeline-item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--spacing-md);
	align-items: start;
	padding-bottom: var(--spacing-lg);
	border-bottom: var(--border-soft);
	position: relative;
}

.timeline-item::before {
	content: '';
	position: absolute;
	left: -16px;
	top: 0.15rem;
	width: 8px;
	height: 8px;
	background: var(--accent);
	border-radius: 50%;
	border: 2px solid var(--bg);
}

.timeline-date {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--text-tertiary);
	white-space: nowrap;
	text-align: right;
}

.timeline-repo {
	font-family: var(--font-mono);
	font-weight: 700;
	color: var(--accent);
	font-size: var(--text-base);
}

.timeline-desc {
	color: var(--text-secondary);
	font-size: var(--text-base);
	margin-bottom: var(--spacing-xs);
}

.timeline-meta {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--text-tertiary);
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}

/* ==========================================================================
   Proyectos — 3 niveles de exposición editorial
   ========================================================================== */

/* Nivel A — Proyecto destacado */
.project-featured {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-xl);
	background: var(--bg-surface-lighter);
	border: var(--border-fine);
	border-radius: var(--radius-lg);
	padding: var(--spacing-xl);
	overflow: hidden;
}

.project-visual {
	position: relative;
	height: 420px;
	border-radius: var(--radius-lg);
	border: var(--border-soft);
	overflow: hidden;
	background: var(--bg-surface);
}

.project-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #161722 0%, #12131c 100%);
	border: var(--border-soft);
	color: var(--text-tertiary);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	letter-spacing: 0.05em;
	text-align: center;
	padding: var(--spacing-lg);
}

.project-placeholder span {
	display: block;
}

.project-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.project-name {
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.05;
	margin: 0;
}

.project-description {
	font-size: var(--text-lg);
	max-width: 65ch;
	line-height: 1.8;
}

.project-featured .project-meta {
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
	margin-top: var(--spacing-sm);
}

.project-featured .project-actions {
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
	margin-top: var(--spacing-sm);
}

/* Nivel B — Proyectos secundarios (composición horizontal/asimétrica) */
.projects-secondary {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-xl);
}

.project-secondary {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-lg);
	align-items: start;
	padding: var(--spacing-lg);
	background: var(--bg-surface);
	border: var(--border-soft);
	border-radius: var(--radius-lg);
}

.project-secondary .project-visual {
	height: 220px;
}

.project-secondary h3 {
	font-size: var(--text-2xl);
	margin-bottom: var(--spacing-xs);
}

.project-secondary .project-desc {
	font-size: var(--text-base);
	max-width: none;
}

.project-secondary .project-meta {
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
	margin-top: var(--spacing-xs);
}

.project-secondary .project-actions {
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
	margin-top: var(--spacing-xs);
}

/* Nivel C — Experimentos (índice técnico compacto) */
.experiments {
	margin-top: var(--spacing-lg);
}

.experiment-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	border-top: var(--border-fine);
	padding-top: var(--spacing-lg);
}

.experiment-item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--spacing-md);
	align-items: center;
	padding: var(--spacing-md) 0;
	border-bottom: var(--border-soft);
}

.experiment-number {
	font-family: var(--font-mono);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text-tertiary);
	text-align: right;
	min-width: 40px;
}

.experiment-name {
	font-family: var(--font-mono);
	font-weight: 700;
	color: var(--text);
	font-size: var(--text-base);
}

.experiment-desc {
	color: var(--text-secondary);
	font-size: var(--text-sm);
}

.experiment-meta {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--text-tertiary);
	text-align: right;
	display: flex;
	gap: var(--spacing-sm);
	justify-content: flex-end;
	flex-wrap: wrap;
}

/* ==========================================================================
   Canales de contacto
   ========================================================================== */
.contact-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-xl);
}

.contact-main {
	max-width: 60ch;
}

.contact-channels {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.channel-item {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	padding: var(--spacing-md);
	background: var(--bg-surface);
	border: var(--border-soft);
	border-radius: var(--radius-lg);
}

.channel-label {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--text-tertiary);
	min-width: 150px;
}

.channel-value {
	color: var(--text);
	font-family: var(--font-mono);
	font-size: var(--text-base);
}

/* ==========================================================================
   Footer común
   ========================================================================== */
footer {
	border-top: var(--border-soft);
	padding: var(--spacing-lg) 0;
	background: var(--bg);
}

.footer-inner {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
	align-items: center;
	text-align: center;
}

/* ==========================================================================
   Animaciones sutiles
   ========================================================================== */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-in {
	animation: fadeIn 700ms ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 768px) {
	.interests-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.project-featured {
		grid-template-columns: 1.1fr 1fr;
		align-items: start;
	}

	.project-secondary {
		grid-template-columns: 1fr 1.2fr;
	}

	.experiment-item {
		grid-template-columns: 60px 1fr 200px;
	}

	.header-inner {
		flex-direction: row;
		height: 64px;
	}

	.footer-inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}

	.footer-inner .nav-list {
		justify-content: center;
		flex: 1;
	}

	.contact-layout {
		grid-template-columns: 1.4fr 1fr;
	}
}

@media (max-width: 767px) {
	.nav-list {
		gap: var(--spacing-md);
	}

	.header-inner {
		height: auto;
		padding: var(--spacing-sm) 0;
		flex-direction: column;
		gap: var(--spacing-md);
	}

	.hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero-actions .btn {
		width: 100%;
	}

	.project-featured {
		grid-template-columns: 1fr;
		padding: var(--spacing-lg);
	}

	.project-secondary {
		grid-template-columns: 1fr;
		padding: var(--spacing-md);
	}

	.experiment-item {
		grid-template-columns: 1fr;
		gap: var(--spacing-sm);
		align-items: start;
	}

	.experiment-number {
		text-align: left;
	}

	.experiment-meta {
		text-align: left;
		justify-content: flex-start;
	}
}