#skills {
  margin-top: 4rem;
}

.skills-subtitle {
  color: #64748B;
  margin-bottom: 2rem;
  max-width: 600px;
}

/* FILTROS */
.skills-filters {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.skills-filters button {
  border: 1px solid var(--border);
  background: white;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: default;
}

.skills-filters .active {
  background: linear-gradient(135deg, #4F46E5, #2563EB);
  color: white;
  border-color: transparent;
}

/* GRID */
.skills-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 320px));
  gap: 2rem;
  justify-content: start;
}



/* CARD */
.skill-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}


.skill-card h4 {
  margin-bottom: 0.6rem;
  font-size: 1.1rem;
  color: var(--primary-dark);
}

.skill-card p {
  font-size: 0.9rem;
  color: #475569;
  margin-top: 0.8rem;
}

/* TAGS */
.skill-tag {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.3rem;
  background: #EEF2FF;
  color: var(--primary-dark);
}

.skill-tag.backend {
  background: #DBEAFE;
  color: #1E3A8A;
}

.skill-tag.database {
  background: #DCFCE7;
  color: #166534;
}

.skill-tag.language {
  background: #E0E7FF;
  color: #3730A3;
}

.skill-tag.tool {
  background: #F1F5F9;
  color: #334155;
}
.soft-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.soft-skills span {
  font-size: 0.85rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: #EEF2FF;
  color: var(--primary-dark);
  border: 1px solid #E0E7FF;
}

.skill-card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  transform: translateZ(0);
}

.skill-card:hover {
  transform: scale(1.06);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  z-index: 2;
}