:root {
	--hero-glow: radial-gradient(circle at 10% 10%, rgba(13, 110, 253, 0.18), transparent 35%),
		radial-gradient(circle at 90% 30%, rgba(25, 135, 84, 0.12), transparent 35%);
}

html {
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	background-image: var(--hero-glow);
	background-attachment: fixed;
}

.glass-nav {
	backdrop-filter: blur(10px);
	background-color: rgba(var(--bs-body-bg-rgb), 0.78);
}

.brand-dot {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: linear-gradient(135deg, #0d6efd, #198754);
	display: inline-block;
}

.profile-card {
	border-radius: 1rem;
}

.timeline-card,
.contact-card,
.profile-card,
#competencias .card {
	border-radius: 1rem;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.timeline-card:hover,
#competencias .card:hover {
	transform: translateY(-4px);
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.08);
}

.contact-card {
	background: linear-gradient(
		145deg,
		rgba(var(--bs-primary-rgb), 0.06),
		rgba(var(--bs-info-rgb), 0.04)
	);
}

[data-bs-theme="dark"] body {
	background-image: radial-gradient(circle at 15% 10%, rgba(13, 110, 253, 0.25), transparent 35%),
		radial-gradient(circle at 90% 35%, rgba(13, 202, 240, 0.1), transparent 35%);
}

[data-bs-theme="dark"] .glass-nav {
	background-color: rgba(20, 24, 31, 0.72);
}

[data-bs-theme="dark"] .timeline-card:hover,
[data-bs-theme="dark"] #competencias .card:hover {
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35);
}

@media (max-width: 991.98px) {
	header .display-5 {
		font-size: 2rem;
	}

	.navbar-nav {
		padding-top: 0.75rem;
	}
}