/* ------------------ PALETA MODO OSCURO ------------------ */
:root { 
  --azul: #3b82f6; 
  --morado: #8b5cf6;
  --negro: #0f0f0f; 
  --blanco: #ffffff; 
} 

/* ------------------ MODO CLARO ------------------ */ 
.light-mode { 
  --azul: #2563eb; 
  --morado: #7c3aed; 
  --negro: #f3f4f6; 
  --blanco: #111827; 
  background: var(--negro); 
  color: var(--blanco); 
} 

/* Transiciones suaves */
* { 
  transition: background 0.3s, color 0.3s;
}

/* ------------------ ESTILOS GENERALES ------------------ */ 
body { 
  margin: 0; 
  overflow-x: hidden;
  font-family: "Poppins", sans-serif; 
  background: var(--negro); 
  color: var(--blanco); 
  scroll-behavior: smooth;
} 

/* ------------------ NAVBAR LINKS ------------------ */ 
.nav-links { 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  gap: 3rem; 
  justify-content: center; 
  align-items: center; 
}

/* ------------------ NAVBAR ------------------ */ 
nav {
  position: fixed; 
  top: 0; 
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1100px;
  padding: 0.6rem 1rem; 
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  background: var(--negro);
  z-index: 2000; 
  gap: 3rem;
} 

.nav-links a { 
  font-size: 1rem;
  letter-spacing: 0.5px;
  color: var(--blanco); 
  text-decoration: none; 
  font-weight: 500;
  transition: 0.3s;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Contenedor de botones */ 

.nav-buttons { 
  display: flex; 
  align-items: center; 
  gap: 1rem;
} 

.nav-buttons button {
  margin-left: 0;
  padding: 6px 12px; 
  font-size: 1rem; 
  border: 1px solid var(--blanco);
  background: transparent; 
  color: var(--blanco); 
  border-radius: 6px; 
  cursor: pointer; 
  transition: 0.3s;
  font-weight: 600; 
  min-width: 48px;
  display: flex; 
  align-items: center; 
  gap: 1rem;
  }

 .nav-buttons button:hover { 
   background: var(--morado); 
   border-color: var(--morado); 
 }

.light-mode .nav-buttons button { 
  border-color: var(--blanco); 
  color: var(--blanco);
}

 /* Botón modo oscuro/claro */ 

#themeToggle:hover { 
  background: var(--morado); 
  border-color: var(--morado); 
}

#langToggle:hover { 
  background: var(--azul); 
  border-color: var(--azul); 
}

/* ------------------ HEADER ------------------ */ 
header {
  height: 35vh; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  text-align: center; 
  padding: 1rem; 
  margin-bottom: 0;
  margin-top: 120px;
  overflow: hidden;
} 

 section { padding-top: 1rem; /* reduce espacio superior */ 
         }

/* Animación de escritura */ 
.typing { 
  font-size: 3rem; 
  font-weight: bold; 
  color: var(--azul); 
  border-right: 3px solid var(--azul); 
  white-space: nowrap; 
  overflow: hidden; 
  width: 27ch;
  max-width: 27ch;
  animation: typing 3s steps(27, end) forwards,  blink 0.7s step-end 6, hideCursor 0.1s forwards 2s;
  margin: 0;
  padding: 0;
}

.typing2 { 
  font-size: 1.8rem; 
  margin-top: 1rem; 
  color: var(--azul); 
  border-right: 3px solid var(--azul); 
  white-space: nowrap; 
  overflow: hidden; 
  width: 23ch; 
  max-width: 23ch;
  animation: typing2 3s steps(23, end) forwards,  blink 0.7s step-end infinite, hideCursor 0.1s forwards 2s;
  margin: 0;
  padding: 0;
}

@keyframes typing { 
  from { width: 0ch; }
  to { width: 27ch; } 
}

@keyframes typing2 { 
  from { width: 0ch; }
  to { width: 23ch; } 
}

@keyframes blink {
  50% { border-color: transparent; } 
} 

@keyframes hideCursor {
  to { border-right: none; }
}

/* ------------------ SECCIONES ------------------ */
h2 { 
  color: var(--morado); 
  font-size: 2.4rem; 
  font-weight: 700; 
  letter-spacing: 1px;
  text-align: center; 
  margin-top: 4rem;
  margin-bottom: 2.5rem;
  position: relative;
} 

section { 
  max-width: 900px; 
  margin: auto; 
  padding: 4rem 2rem; 
} 

#sobre-mi, 
#proyectos, 
#habilidades, 
#contacto { 
  padding-top: 40px; 
}

/* ------------------ PROYECTOS ------------------ */ 
.card { 
  background: #1a1a1a;
  padding: 1.5rem; 
  border-radius: 1rem; 
  margin-bottom: 2rem; 
  border: 1px solid #333; 
} 

.light-mode .card {
  background: #e5e7eb;
  border-color: #cbd5e1; 
}

.carousel { 
  position: relative; 
  overflow: hidden; 
  border-radius: 10px; 
  height: 400px;
} 

.carousel img { 
  width: 100%; 
  display: none; 
  cursor: pointer; 
  object-fit: cover;
  display: none; 
  cursor: pointer;
} 

.carousel img.active { 
  display: block; 
} 

/* Flechas del carrusel */ 
.arrow { 
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5); 
  color: white; 
  padding: 10px; 
  cursor: pointer; 
  font-size: 22px; 
  border-radius: 5px; 
} 

.arrow.left { left: 10px; } 
.arrow.right { right: 10px; }

/* ------------------ MODAL ------------------ */ 
.modal { 
  display: none; 
  position: fixed;
  inset: 0; 
  background: rgba(0,0,0,0.8); 
  justify-content: center;
  align-items: center; 
  z-index: 3000; 
} 

.modal img { 
  width: 100%; 
  max-width: 1500px; 
  max-height: 90vh;
  object-fit: contain;
  border-radius: 10px;
} 

/* Botón X */ 
.closeModal { 
  position: absolute; 
  top: 25px; 
  right: 35px; 
  font-size: 40px; 
  color: white; 
  cursor: pointer; 
} 

.modalArrow {
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%);
  font-size: 45px; 
  color: white; 
  cursor: pointer; 
  padding: 10px; 
  user-select: none; 
}

.leftModal { left: 40px; } 
.rightModal { right: 40px; } 

.modalArrow:hover, 
.closeModal:hover { 
  color: var(--azul); 
}

/* ------------------ FLECHA ARRIBA ------------------ */ 
#topBtn { 
  position: fixed;
  bottom: 30px; 
  right: 30px; 
  background: var(--morado); 
  color: white; 
  padding: 12px 15px; 
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px; 
  display: none; 
  transition: 0.3s; 
} 

#topBtn:hover { 
  background: var(--azul); 
} 

/* ------------------ FOOTER ------------------ */ 
footer { 
  text-align: center;
  padding: 2rem; 
  margin-top: 3rem; 
  background: #111; 
}

/* Modo claro */ 
.light-mode footer { 
  background: #d1d5db;
} 

/* CONTACTO en morado */ 
#contacto h2 { 
  color: var(--morado); 
}

/* Enlaces SIEMPRE azules */ 
footer a { 
  color: var(--azul); 
  font-weight: 600; 
  text-decoration: none; 
}
footer a:hover { 
  color: var(--morado); 
}

.card a { 
  color: var(--azul); 
  font-weight: 600; 
  text-decoration: none; 
} 

.card a:hover { 
  color: var(--morado);
}

  /* ------------------ HABILIDADES ------------------ */ 
  #habilidades { 
    max-width: 900px; 
    margin: 3rem auto; 
    padding: 2rem; 
    text-align: center; 
  } 
  
  .skills-list { 
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem; 
    margin-top: 2rem; 
  } 
  
  .skill-text {
    display: flex;                 /* Alinea icono + texto */
    align-items: center;           /* Centrado vertical */
    gap: 10px;                     /* Espacio entre icono y texto */
    font-size: 1rem; 
    font-weight: 600;
    color: var(--blanco);
    background: #1a1a1a;   /* Fondo oscuro para que resalte */
    padding: 10px 20px;
    border-radius: 50px;   /* Forma de pastilla */
    border: 1px solid var(--azul);   /* Un toque de color */
    transition: 0.3s;
  } 

  .skill-text i {
    font-size: 22px;               /* Tamaño del icono */
  }

  .skill-text:hover {
    background: var(--azul);
    transform: translateY(-3px); /* Efecto hover elegante */
  }

  .light-mode .skill-text { 
    background: #e5e7eb;
    color: #111; 
    border-color: var(--morado); 
  }
 

  /* ------------------ CONTACTO ------------------ */ 
  
  #contacto { 
    max-width: 700px; 
    margin: 3rem auto; 
    padding: 2rem; 
    text-align: center; 
  } 
  
  .contact-form { 
    display: flex; 
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem; 
  } 

  /* Inputs y textarea (estilo oscuro elegante) */ 
  .contact-form input, 
  .contact-form textarea { 
    background: rgba(255,255,255,0.05);
    border: 2px solid #333; 
    padding: 12px; 
    border-radius: 6px;
    color: var(--blanco);
    font-size: 1rem; 
  }
  
  .contact-form input::placeholder, 
  .contact-form textarea::placeholder { 
    background: transparent;
    border: 2px solid #333;
    padding: 12px; 
    border-radius: 6px; 
    color: #ddd;
    opacity: 1;
    font-size: 1rem; 
  } 
  
  .light-mode .contact-form input::placeholder, 
  .light-mode .contact-form textarea::placeholder { 
    color: #666;
    opacity: 1;
  } 
  
  .contact-form textarea { 
    height: 150px; 
    resize: none;
  } 
  
  .contact-form button {
    margin-top: 1rem; 
    padding: 12px; 
    background: var(--morado); 
    color: white;
    border: none; 
    border-radius: 6px; 
    font-size: 1.1rem;
    cursor: pointer;
    transition: 0.3s; 
  } 
  
  .contact-form button:hover { 
    background: var(--azul);
  } 
  
  .contact-links { 
    margin-top: 2rem; 
    display: flex; 
    justify-content: center;
    gap: 2rem; } 
  
  .contact-links a {
    color: var(--azul); 
    font-weight: 600; 
    text-decoration: none; 
  } 
  
  .contact-links a:hover { 
    color: var(--morado);
  }

 /* ------------------ NAV RESPONSIVE ------------------ */ 
 @media (max-width: 768px) {

  nav { 
    justify-content: center; 
  }

   section {
     padding-top: 80px;
   }

  .skills-list {
    gap: 0.6rem; /* Reducimos el espacio en móvil */
  }
   
  .skill-text {
    font-size: 0.9rem;
    padding: 8px 15px;
  }
  
  /* Evitar que el header suba debajo del nav */
  header { 
    margin-top: 40px; 
    width: 100%; 
    overflow: hidden;
}

   .typing {
    font-size: 1.6rem;
    white-space: nowrap; 
    overflow: hidden;
    text-align: center;
    border-right: 2px solid var(--azul);   
    animation: typingMobile 3s steps(27) forwards, blink 0.7s step-end infinite, hideCursor 0.1s forwards 2s;    
  }

  .typing2 {
    font-size: 1.1rem;
    white-space: nowrap; 
    overflow: hidden;
    text-align: center;
    border-right: 2px solid var(--azul); 
    animation: typingMobile 3s steps(23) forwards, blink 0.7s step-end infinite, hideCursor 0.1s forwards 2s;
  }

  @keyframes typingMobile {
    from { width: 0 }
    to { width: 27ch; }
  }