/* Layout principal */
#container {
  display: flex;
  flex-direction: row;
  color: var(--main-text-color);
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Bio Section */
#bio-container {
  flex: 1 1 20%;
  height: 100vh;
  background-color: var(--bio-bg-color);
  text-align: center;
  padding: var(--spacing-xl) 12px;
  border-right: 3px solid var(--primary-color);
  overflow-y: auto;
  position: relative;
}

#bio-container::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--accent-color) 100%);
  opacity: 0.5;
}

/* Borda vertical - Tema Claro */
[data-theme="light"] #bio-container {
  border-right: none;
}

[data-theme="light"] #bio-container::before {
  background: linear-gradient(to bottom, #4a90e2 0%, #6fa8dc 30%, #8bb9e8 60%, #a7cff0 100%);
  opacity: 0.8;
}

/* About Section */
#about-container {
  flex: 1 1 80%;
  height: 100vh;
  padding: 50px var(--spacing-xl);
  background-color: var(--about-bg-color);
  color: var(--main-text-color);
  overflow-y: auto;
}

/* Skills Grid */
#skills-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--spacing-lg);
  gap: var(--spacing-md);
}

.skills-box {
  flex: 1 1 30%;
  min-width: 250px;
  padding: var(--spacing-md);
  background-color: var(--card-bg-color);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  transition: var(--transition-default);
  box-shadow: var(--shadow-sm);
}

.skills-box:hover {
  background-color: var(--hover-bg-color);
  border-color: var(--primary-color);
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}