.projects-section {
  padding: 6rem 2rem;
  width: 100%;
  margin: 0 auto;
  max-width: 80vw;
  height: auto;
  margin-bottom: 5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.projects-container {
  width: 100%;
  max-width: 80vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.projects-title {
  font-size: clamp(5rem, 6vw, 9rem);
  font-weight: 500;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--title-color);
}

.projects-intro {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  text-align: center;
  margin-bottom: 4rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-color);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem;
}

.project-item {
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  background-color: var(--item-bg-color);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.project-photo {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.project-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.project-name {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--title-color);
}

.project-description {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--text-color);
  flex-grow: 1;
}

.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tech-tag {
  padding: 0.25rem 0.5rem;
  border-radius: 15px;
  font-size: 0.8rem;
  color: #ffffff;
}

.tech-tag.java {
  background-color: #007396;
}
.tech-tag.android {
  background-color: #3ddc84;
  color: #000000;
}
.tech-tag.aws {
  background-color: #ff9900;
  color: #000000;
}
.tech-tag.github {
  background-color: #181717;
}
.tech-tag.docker {
  background-color: #2496ed;
}
.tech-tag.hexagonal {
  background-color: #663399;
}
.tech-tag.javascript {
  background-color: #f7df1e;
  color: #000000;
}
.tech-tag.postgresql {
  background-color: #336791;
}
.tech-tag.nodejs {
  background-color: #339933;
}
.tech-tag.html {
  background-color: #e34f26;
}
.tech-tag.css {
  background-color: #1572b6;
}
.tech-tag.rest {
  background-color: #0096d6;
}
.tech-tag.php {
  background-color: #777bb4;
}
.tech-tag.bootstrap {
  background-color: #7952b3;
}
.tech-tag.maptiler {
  background-color: #00acd7;
}
.tech-tag.api {
  background-color: #3498db;
}
.tech-tag.uxui {
  background-color: #ff6b6b;
}

.tech-tag.cloud {
  background-color: #4285F4;
}
.tech-tag.certification {
  background-color: #34A853;
}
.tech-tag.optimization {
  background-color: #EA4335;
}
.tech-tag.architecture {
  background-color: #8E44AD;
}
.tech-tag.scalability {
  background-color: #2ECC71;
}
.tech-tag.modular {
  background-color: #E67E22;
}
.tech-tag.design-patterns {
  background-color: #3498DB;
}
.tech-tag.kubernetes {
  background-color: #326CE5;
}
.tech-tag.containers {
  background-color: #FF6B6B;
}
.tech-tag.devops {
  background-color: #6C5CE7;
}

.project-link {
  display: inline-flex;
  align-items: center;
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  margin-top: auto;
}

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

.project-link-arrow {
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}

.project-link:hover .project-link-arrow {
  transform: translateX(5px);
}

/* Responsive Styles */
@media (max-width: 1200px) {
  .projects-container {
    max-width: 90vw;
  }
}

@media (max-width: 992px) {
  .projects-section {
    padding: 5rem 1.5rem;
  }

  .projects-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
  }

  .projects-intro {
    font-size: clamp(0.9rem, 1.3vw, 1.1rem);
    margin-bottom: 3rem;
  }

  .projects-grid {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  }
}

@media (max-width: 768px) {
  .projects-section {
    padding: 4rem 1rem;
  }

  .projects-container {
    max-width: 95vw;
  }

  .projects-title {
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    margin-bottom: 1.5rem;
  }

  .projects-intro {
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    margin-bottom: 2.5rem;
  }

  .projects-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .project-name {
    font-size: 1.3rem;
  }

  .project-description {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .projects-section {
    padding: 3rem 0.75rem;
  }

  .projects-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: 1rem;
  }

  .projects-intro {
    font-size: clamp(0.8rem, 1.1vw, 0.95rem);
    margin-bottom: 2rem;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .project-content {
    padding: 1rem;
  }

  .project-name {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
  }

  .project-description {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
  }

  .tech-tag {
    font-size: 0.7rem;
  }
}

/* Dark theme */
.dark {
  --bg-color: #000000;
  --text-color: #ffffff;
  --title-color: #ffffff;
  --item-bg-color: #111;
  --accent-color: #00c6ff;
  --accent-color-hover: #00a3cc;
}

/* Light theme */
.light {
  --bg-color: #ffffff;
  --text-color: #333333;
  --title-color: #222222;
  --item-bg-color: #f8f9fa;
  --accent-color: #9b4bff;
  --accent-color-hover: #7b3fcc;
}

/*Agile Methodologies*/
.tech-tag.agile { background-color: #0052CC; }
.tech-tag.scrum { background-color: #6DB33F; }
.tech-tag.kanban { background-color: #FF5A00; }
.tech-tag.teamwork { background-color: #6C5CE7; }
/* Nuevos colores para las etiquetas de Python */
.tech-tag.python { background-color: #3776AB; }
.tech-tag.django { background-color: #092E20; }
.tech-tag.flask { background-color: #000000; }
.tech-tag.data { background-color: #FF6384; }

/* Nuevos colores para las etiquetas de .NET */
.tech-tag.dotnet { background-color: #512BD4; }
.tech-tag.csharp { background-color: #239120; }
.tech-tag.aspnet { background-color: #0082C9; }
.tech-tag.entity { background-color: #B4004E; }