:root {
  --yellow: #00ff88; /* Nuevo color de acento */
  --black: #ffffff; /* El texto principal ahora será blanco */
  --white: #0a0a0a; /* El fondo principal ahora será oscuro */
  --gray: #1a1a1a; /* Color para fondos de tarjetas/bordes en oscuro */
  --font-main: 'Inter', sans-serif;
}

body {
  margin: 0;
  font-family: var(--font-main);
  background-color: var(--white); /* Usar el nuevo fondo oscuro */
  color: var(--black); /* Usar el nuevo color de texto principal (blanco) */
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
}

.hero .greeting {
  font-size: 1rem;
  color: #666; /* Texto muted para el saludo */
}

.hero .name {
  font-size: 2.5rem;
  font-weight: 700;
}

.hero .cursor {
  color: var(--yellow);
}

.title {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #ffffff; /* Asegurar que el título sea blanco */
}

.section-title {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  color: #ffffff; /* Asegurar que el título de sección sea blanco */
}

.project-list {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}

.project-card {
  border: 1px solid var(--gray); /* Borde de tarjeta oscuro */
  border-radius: 8px;
  padding: 1.2rem;
  transition: all 0.2s ease;
  background-color: #111; /* Fondo de tarjeta un poco más claro que el fondo general */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.project-card:hover {
  border-color: var(--yellow); /* Acento al pasar el ratón */
  background-color: #0a0a0a; /* Fondo oscuro al pasar el ratón */
}

.project-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #ffffff; /* Título de proyecto blanco */
}

.project-description {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  color: #bbbbbb; /* Descripción más clara que el texto principal */
}

.project-link {
  margin-top: auto;
  font-weight: 500;
  color: var(--yellow); /* Enlace en color de acento */
  text-decoration: underline;
  text-underline-offset: 3px;
}

footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #1a1a1a; /* Borde del footer oscuro */
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  color: #666; /* Texto del footer muted */
}

.stats {
  display: flex;
  gap: 1.5rem;
}

.stat-value {
  font-weight: 600;
  color: #ffffff; /* Valores de estadísticas blancos */
}

.cursor-text {
  color: var(--yellow);
}

.subtitle {
    color: #888;
}