/* Seccion de proyecto */
.projects-section {padding: var(--spacing-2xl);}

.projects-grid {
  display: grid;
  /*el tamaño se mantiene al minimo y maximo de 350 */
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--spacing-2xl);
}

.proyecto {
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  border: 2px solid var(--border);
  border-radius: var(--border-radius-lg);
  background-color: var(--background);
}

.project-image-container {
  width: 100%;
  height: 200px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  margin-bottom: var(--spacing-md);
}

.port-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.proyecto:hover .port-img {transform: scale(1.05);}

.proyecto h2 {
  font-size: 1.5rem;
  color: var(--text-primary);
}

.descripcion p {
  color: var(--text-secondary);
  line-height: 1.7;
}

.actions {
  display: flex;
  gap: var(--spacing-md);
  margin-top: auto;
}

.btn {
  flex: 1;
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  text-decoration: none;
  text-align: center;
  font-weight: 600;
  transition: all var(--transition-normal);
  color: var(--text-secondary);
}

.btn.primary {
  background: var(--text-primary);
  color: var(--surface);
  border: none;
  box-shadow: 0.25rem 0.25rem var(--border-buttons);
  border: solid 0.125rem var(--border-buttons);
}

.btn.secondary {
  border: 2px solid var(--text-primary);
  box-shadow: 0.25rem 0.25rem var(--border-buttons);
  border: solid 0.125rem var(--border-buttons);
}

.btn:hover {transform: translateY(-4px);}

.stacks {
  display: flex;
  height: auto;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  flex-wrap: wrap;
}

.stack {
  background-color: var(--text-primary);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-xl);
  transition: var(--transition-normal);
}

.stack:hover {transform: translateY(-5px);}

.secondary:hover {
  background-color: var(--text-accent);
  border: 2px solid var(--text-accent);
  color: var(--surface);
}