/* ==========================================================================
   Grade 2: Bootstrap + GSAP Portfolio Demo
   Custom styles extending Bootstrap 5
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
	--bs-body-bg: #0f0f0f;
	--bs-body-color: #f5f5f5;
	--bs-primary: #6366f1;
	--bs-primary-rgb: 99, 102, 241;

	/* Custom tokens */
	--color-bg-alt: #6366f1;
	--color-muted: #6c757d;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);


  --text-base: clamp(1rem, 2.5vw, 1.125rem);
  --text-lg: clamp(1.25rem, 3vw, 1.5rem);
  --text-xl: clamp(2rem, 6vw, 4rem);

}

* {
  font-family: "DM Sans";
}




/* --------------------------------------------------------------------------
   Tipografías cargadas desde Google Fonts.
   -------------------------------------------------------------------------- */

.instrument-serif-regular {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.instrument-serif-regular-italic {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic;
}

.dm-sans> {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}




/* --------------------------------------------------------------------------
   2. Base Overrides
   -------------------------------------------------------------------------- */
body {
	background-color: white;
	color: #d65b45;
}

html, body {
  overflow-x: hidden;
  width: 100%;
}


h1, h2 {
	font-family: "Instrument Serif";
	color: #fff;
	font-style: italic;
}

.bg-dark {
	background-color: var(--color-bg-alt) !important;
}

/* Section spacing */
.py-lg-6 {
	padding-top: 6rem !important;
	padding-bottom: 6rem !important;
}




/* --------------------------------------------------------------------------
   3. Navigation
   -------------------------------------------------------------------------- */

.navbar {
	background: rgba(15, 15, 15, 0.304);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: background 0.3s;
}
   
.navbar.scrolled {
	background: rgba(15, 15, 15, 0.95);
}

.nav-link {
	position: relative;
	padding: 0.5rem 1rem !important;
}

.nav-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background: #d65b45;
	transition: width 0.3s, left 0.3s;
}

.nav-link:hover::after,
.nav-link.active::after {
	width: 100%;
	left: 0;
}

.nav-link {
	transition: color 0.3s, transform 0.3s;
}

.nav-link:hover {
	transform: translateY(-1px);
	color: var(--bs-primary) !important;
}

.nav div a{
	font-family: "Instrument Serif", serif;
}



/* --------------------------------------------------------------------------
   4. Hero Section
   -------------------------------------------------------------------------- */

.hero-bg {
	position: absolute;
	inset: 0;
	z-index: -1;

	background: linear-gradient(
		120deg,
		#14b8a6,
		#6366f1,
		#d65b45,
		#ff9c8b
	);

	background-size: 400% 400%;
	animation: gradientFlow 18s ease infinite;
}


@keyframes gradientFlow {
	0% {
		background-position: 0% 50%;
	}
	25% {
		background-position: 50% 0%;
	}
	50% {
		background-position: 100% 50%;
	}
	75% {
		background-position: 50% 100%;
	}
	100% {
		background-position: 0% 50%;
	}
}



/* Asegurarte que el texto queda encima */
.hero .container {
	z-index: 3;
	position: relative;
}



/* Hero buttons customization */
.hero-cta .btn-primary {
  background-color: #fff;
  border-color: #fff;
  color: #d65b45;
}

.hero-cta .btn-primary:hover {
  background-color: #d65b45;
  border-color: #fff;
  color: #fff;
}

.hero-title {
  font-size: var(--text-xl);
  font-family: "Instrument Serif", serif;
  font-style: italic;
  color: #fff;
  font-size: clamp(3rem, 8vw, 5.5rem);
  letter-spacing: -0.01em;
}

.hero-subtitle {
  font-size: var(--text-lg);
  font-family: 'DM Sans';
  color: rgba(255,255,255,0.8);
  opacity: 0.8;
}



/* --------------------------------------------------------------------------
   5. About Section
   -------------------------------------------------------------------------- */
.about-image {
	position: relative;
}

.about-image::before {
	content: '';
	position: absolute;
	inset: 20px -20px -20px 20px;
	border: 2px solid var(--bs-primary);
	border-radius: 1rem;
	z-index: -1;
}

.about-image img {
	position: relative;
	z-index: 1;
}

/* Skills progress bars */
.progress {
	background-color:#ccc6c6;
	border-radius: 4px;
	overflow: hidden;
}

.progress-bar {
	background: linear-gradient(90deg, #d65b45);
	border-radius: 4px;
	width: 0; /* Animated by GSAP */
}

.skill-item.gsap-reveal.mb-3 {
	color: #fff;
}



/* --------------------------------------------------------------------------
   6. Projects Section
   -------------------------------------------------------------------------- */

/* PROJECTS GRID – NO BOOTSTRAP */

h3 {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  color: rgb(255, 255, 255);
  margin-bottom: 1rem;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 992px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}

.project-card {
  background: var(--color-bg-alt);
  color: #fff;
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.card-img-wrapper {
  height: 240px;
}

.card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.project-card:hover .card-img-wrapper img {
	transform: scale(1.08);
}

.project-card p {
	color: var(--bs-secondary-color);
}

.project-card .card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.project-card .tags {
  margin-top: auto;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.project-card .tags span {
  background: rgba(255,255,255,0.2);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
}



/* --------------------------------------------------------------------------
   7. Contact Section
   -------------------------------------------------------------------------- */
.social-links a {
	transition: color 0.3s, transform 0.3s;
}

.social-links a:hover {
	color: var(--bs-primary) !important;
	transform: translateY(-3px);
}



/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
.btn-primary {
	background: var(--bs-primary);
	border-color: var(--bs-primary);
	padding: 0.75rem 2rem;
	font-weight: 600;
	transition: transform 0.3s, box-shadow 0.3s;
	  background-color: #fff;
  border-color: #fff;
  color: #d65b45;
}

.btn-primary:hover {
	background: #818cf8;
	border-color: #818cf8;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
	  background-color: #ff6f8e;
  border-color: #fff;
  color: #fff;
}

.btn-outline-light {
	padding: 0.75rem 2rem;
	font-weight: 600;
}

.btn-outline-light:hover {
	transform: translateY(-2px);
}

.social-links :hover{
color: white;
}

.hero-cta .btn-primary {
  background-color: #fff;
  border-color: #fff;
  color: #d65b45;
}

.hero-cta .btn-primary:hover {
  background-color: #ff6f8e;
  border-color: #fff;
  color: #fff;
}




/* --------------------------------------------------------------------------
   9. Utilities
   -------------------------------------------------------------------------- */
.z-1 {
	z-index: 1;
}



/* --------------------------------------------------------------------------
   10. Accessibility: Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.shape {
		display: none;
	}

	.project-card:hover {
		transform: none;
	}

	.project-card:hover .card-img-wrapper img {
		transform: none;
	}
}



/* --------------------------------------------------------------------------
   11. Responsive Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.hero-title {
		font-size: 3rem;
	}

	.shape {
		transform: scale(0.6);
	}
}

@media (max-width: 575.98px) {
	.hero-title {
		font-size: 2.5rem;
	}

	.hero-cta .btn {
		display: block;
		width: 100%;
		margin-bottom: 1rem;
	}

	.hero-cta .btn:last-child {
		margin-bottom: 0;
	}

	.about-image::before {
		display: none;
	}
}