/* ============================================================
   RESET BÁSICO
============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* ============================================================
   BODY - DISEÑO MOBILE FIRST Y RESPONSIVO
============================================================ */
body {
  background: linear-gradient(135deg, #0f0f1a, #1a1a2e);
  color: #f0f0f0;
  min-height: 100vh;
  margin: 0;

  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 1rem;
  justify-content: flex-start;
}

/* ============================================================
   CONTENEDORES PRINCIPALES
============================================================ */

.container1,
.container2 {
  background: #161622;
  border-radius: 16px;
  padding: 1.5rem;
  width: 100%;
  box-shadow: 0 0 20px rgba(128, 0, 255, 0.3);
  transition: box-shadow 0.3s ease;
}

.container1:hover,
.container2:hover {
  box-shadow: 0 0 25px rgba(138, 43, 226, 0.6);
}

/* Scrollbar - OCULTAR */
.container1::-webkit-scrollbar,
.container2::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.container1,
.container2 {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE y Edge */
}

/* ============================================================
   PERFIL / CARD
============================================================ */
.card {
  background: #1c1a29;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 20px rgba(128, 0, 226, 0.4);
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 0 25px rgba(138, 43, 226, 0.6);
}

.banner {
  width: 100%;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: 250px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* Perfil dentro de la card */
.profile-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem;
  gap: 1rem;
  background: #1c1a29;
  flex-wrap: wrap;
}

.img1 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #8a2be2;
  box-shadow: 0 0 15px rgba(138, 43, 226, 0.8);
  flex-shrink: 0;
}

.nombre {
  color: #cbb2ff;
  font-size: clamp(1rem, 4vw, 1.25rem);
  font-weight: bold;
  text-shadow: 0 0 8px rgba(138, 43, 226, 0.9);
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
  line-height: 1.3;
}

/* ============================================================
   NAV
============================================================ */
.main-nav ul {
  list-style: none;
  margin: 1rem 0;
}

.main-nav li {
  background: #1f1f35;
  margin: 0.5rem 0;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.main-nav li:hover {
  background: #2a2a44;
  color: #c084fc;
  transform: translateX(5px);
}

/* ============================================================
   SECCIONES GENERALES
============================================================ */
.info,
#conexiones,
#nota,
.actividad {
  background: #1f1f35;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  transition: box-shadow 0.3s ease;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.info:hover,
#conexiones:hover,
#nota:hover,
.actividad:hover {
  box-shadow: 0 0 15px rgba(192, 132, 252, 0.5);
}

.secondary-header {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #a855f7;
}

h1 {
  font-size: clamp(1.5rem, 5vw, 2rem);
  color: #a855f7;
}

h2 {
  color: #a855f7;
  margin-bottom: 0.75rem;
  font-size: clamp(1.1rem, 3.5vw, 1.4rem);
  line-height: 1.3;
  text-align: center;
}

.titulo{
  color: #cbb2ff;
  text-shadow: 0 0 8px rgba(138, 43, 226, 0.9);
}

/* ============================================================
   TEXTO Y ENLACES
============================================================ */
p,
a {
  font-size: clamp(0.9rem, 2.5vw, 1rem);
  line-height: 1.6;
}

.link{
  text-align: none;
}

.link2{
  text-align: center;
}

p {
  color: #e0e0e0;
  margin: 0.5rem 0;
  transition: all 0.3s ease;
}

p:hover {
  color: #c084fc;
  text-shadow: 0 0 8px #c084fc;
  transform: translateX(4px);
}

a {
  display: block;
  color: #e0e0e0;
  margin: 0.5rem 0;
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  color: #c084fc;
  text-shadow: 0 0 8px #c084fc;
  transform: translateX(4px);
}

/* ============================================================
   IMÁGENES / LENGUAJES / HERRAMIENTAS
============================================================ */
.contenedor-lenguajes,
.contenedor-herramientas {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  flex-wrap: wrap;
  padding: 1rem;
}

.lenguajes {
  flex: 0 1 auto;
  width: clamp(60px, 15vw, 80px);
  height: auto;
  max-width: 100%;
  transition: transform 0.3s ease;
  object-fit: contain;
}

.lenguajes:hover {
  transform: scale(1.1);
}

.herramientas,
.herramientas-drawdb,
.herramientas-apache {
  flex: 0 1 auto;
  width: clamp(60px, 15vw, 80px);
  height: auto;
  max-width: 100%;
  transition: transform 0.3s ease;
  object-fit: contain;
}

.herramientas-vscode,
.herramientas-xampp {
  flex: 0 1 auto;
  width: clamp(50px, 12vw, 65px);
  height: auto;
  max-width: 100%;
  transition: transform 0.3s ease;
  object-fit: contain;
}

.herramientas:hover,
.herramientas-drawdb:hover,
.herramientas-vscode:hover,
.herramientas-apache:hover,
.herramientas-xampp:hover {
  transform: scale(1.1);
}

/* ============================================================
   MEDIA QUERIES (RESPONSIVO)
============================================================ */

/* 480px - Teléfonos grandes */
@media (min-width: 480px) {
  body {
    padding: 1.5rem;
    gap: 1.5rem;
  }

  .banner img {
    height: 200px;
  }
  .img1 {
    width: 75px;
    height: 75px;
  }
  .lenguajes {
    width: clamp(70px, 14vw, 90px);
    max-width: 90px;
  }
  .herramientas,
  .herramientas-drawdb,
  .herramientas-apache {
    width: clamp(70px, 14vw, 90px);
    max-width: 90px;
  }
  .herramientas-vscode,
  .herramientas-xampp {
    width: clamp(55px, 11vw, 70px);
    max-width: 70px;
  }
}

/* 768px - Tablets y pantallas medianas */
@media (min-width: 768px) {
  body {
    flex-direction: row;
    align-items: flex-start;
    padding: 2rem;
    gap: 2rem;
  }

  .container1 {
    flex: 0 0 auto;
    width: 350px;
    max-height: 90vh;
    overflow-y: auto;
    position: sticky;
    top: 2rem;
  }

  /* Agregada altura máxima y scroll automático para container2 */
  .container2 {
    flex: 1;
    min-width: 0;
    max-height: 90vh;
    overflow-y: auto;
  }

  .banner img {
    height: 220px;
  }
  .img1 {
    width: 80px;
    height: 80px;
  }
  .lenguajes {
    width: clamp(80px, 10vw, 100px);
    max-width: 100px;
  }
  .herramientas,
  .herramientas-drawdb,
  .herramientas-apache {
    width: clamp(80px, 10vw, 100px);
    max-width: 100px;
  }
  .herramientas-vscode,
  .herramientas-xampp {
    width: clamp(63px, 8vw, 78px);
    max-width: 78px;
  }
}

/* 1024px - Laptops */
@media (min-width: 1024px) {
  body {
    padding: 2.5rem;
    gap: 2.5rem;
  }

  .container1 {
    width: 380px;
  }
  .banner img {
    height: 250px;
  }
  .img1 {
    width: 85px;
    height: 85px;
  }

  .lenguajes {
    width: clamp(90px, 8vw, 110px);
    max-width: 110px;
  }
  .herramientas,
  .herramientas-drawdb,
  .herramientas-apache {
    width: clamp(90px, 8vw, 110px);
    max-width: 110px;
  }
  .herramientas-vscode,
  .herramientas-xampp {
    width: clamp(70px, 6.5vw, 86px);
    max-width: 86px;
  }
}

/* 1440px - Pantallas grandes */
@media (min-width: 1440px) {
  body {
    padding: 3rem;
    gap: 3rem;
  }

  .container1 {
    width: 420px;
  }
  .banner img {
    height: 280px;
  }
  .img1 {
    width: 90px;
    height: 90px;
  }

  .lenguajes {
    width: clamp(100px, 7vw, 120px);
    max-width: 120px;
  }
  .herramientas,
  .herramientas-drawdb,
  .herramientas-apache {
    width: clamp(100px, 7vw, 120px);
    max-width: 120px;
  }
  .herramientas-vscode,
  .herramientas-xampp {
    width: clamp(78px, 5.5vw, 94px);
    max-width: 94px;
  }
}

/* 1920px - Pantallas muy grandes */
@media (min-width: 1920px) {
  body {
    padding: 4rem;
    gap: 4rem;
  }

  .container1 {
    width: 500px;
  }
  .banner img {
    height: 320px;
  }
  .img1 {
    width: 100px;
    height: 100px;
  }

  .lenguajes {
    width: clamp(115px, 6vw, 140px);
    max-width: 140px;
  }
  .herramientas,
  .herramientas-drawdb,
  .herramientas-apache {
    width: clamp(110px, 6vw, 135px);
    max-width: 135px;
  }
  .herramientas-vscode,
  .herramientas-xampp {
    width: clamp(86px, 4.8vw, 106px);
    max-width: 106px;
  }
}

/* Orientación horizontal móviles */
@media (max-height: 500px) and (orientation: landscape) {
  body {
    flex-direction: row;
    padding: 1rem;
    gap: 1rem;
  }

  .container1,
  .container2 {
    max-height: 85vh;
    overflow-y: auto;
  }

  .container1 {
    width: 300px;
    flex-shrink: 0;
  }

  .banner img {
    height: 150px;
  }

  .img1 {
    width: 60px;
    height: 60px;
  }
}