body{
  background-color: #070708;
}

.general {
  display: grid;
  grid-template-columns: 30% 70% ; /* suman 100% del contenedor */
  grid-template-areas:
    "banner  banner"
    "profPic profPic"
    "izquierda  content"
    "box1 box2";
  max-width: 1000px;   /* límite del contenedor */
  width: 100%;
  margin: 0 auto;
  gap: 20px;
  padding: 20px;
}

.Banner{
  grid-area: banner;
  margin: auto;
  margin-top: 15px;
}

/* BANNER PROFILE - BARRA HORIZONTAL - */
.profBan{
  grid-area: profPic;
  display: grid;
  grid-template-columns: 15% 85% ; /* suman 100% del contenedor */
  grid-template-areas:
    "pic  info";
  max-width: 900px;   /* límite del contenedor */
  width: 100%;
  margin: 0 auto;
  gap: 60px;
  padding: 20px;
}

.ProfPic{
  grid-area: pic;
  margin: auto;
  width: 150px;          /* tamaño fijo del contenedor */
  height: 150px;         /* mismo que el ancho */
  border-radius: 50%;    /* redondo */
  overflow: hidden;      /* recorta la imagen que sobresalga */
  background-color: #92A3B7;
  border: solid;
  border-color: #92A3B7;
  border-width: 2px;
}

.ProfPic img{
  width: 100%;           /* ocupa todo el div */
  height: 100%;          /* ocupa todo el div */
  object-fit: cover;     /* mantiene proporción y recorta si hace falta */
  display: block;
}

.profInfo{
  grid-area: info;
  background: #070708;
  padding: 10px;
  padding-top: 1px;
  border: double;
  border-color: #92A3B7;
  border-width: 4px;
  border-radius: 2px;
  border-color: #92A3B7;

  color: gray;
}

.profInfo h1{
  font-size: 20px;
  color: #CED5DB;
  font-family: Georgia, 'Times New Roman', Times, serif;
  letter-spacing: 2px;
  text-shadow: 1px 1px 8px #fff; 
  
}

.columnaizquierda{
  grid-area: izquierda;
  color: gray;
  background-color: #070708;
  text-align: center;
  padding: 10px;
  border: double;
  border-color: #92A3B7;
  border-width: 4px;
  border-radius: 2px;
}

.columnaizquierda a{
  color: #CED5DB;
  display: block;
  width: 90%;
  padding: 3px;
  margin: 3px;
  background-color: #38406F;
  border: solid 1px #5F6F91;
  border-radius: 2px;
}

.columnaizquierda a:hover{
  color: white;
  background-color: #191A4A;
}

/* CONTENEDOR DE INFO - CUADRADOTE - */

.AboutContent{
  grid-area: content;
  color: gray;
  background-color: #070708;
  text-align: center;
  font-size: 14px;
  border: double;
  border-color: #92A3B7;
  border-width: 4px;
  border-radius: 2px;
  letter-spacing: 2px;
  line-height: 1.5;
  padding: 20px;
}
  
/* IMAGENES FLOTANTES */

.imgFlotante{
  position: absolute;
  padding: 0px;
  top: 0px;
  left: 0px;
}
.imgFlotante2{
  position: fixed;
  padding: 0px;
  bottom: 0px;
  right: 0px;
}

/* LINKS */

  /* unvisited link */
a:link {
  text-decoration: none;
}

/* visited link */
a:visited {
  text-decoration: none;
}

/* mouse over link */
a:hover {
  text-decoration: none;
}

/* selected link */
a:active {
  text-decoration: none;
}

/* MUSIC PLAYER */
/* Contenedor estilo Win98 */
.music-player {
  width: 200px;
  height: 70px;;
  padding: 8px;
  background: #c0c0c0; /* gris clásico Win98 */
  border: 2px solid #fff;  /* borde superior izquierdo claro */
  border-right: 2px solid #000; /* borde inferior derecho oscuro */
  border-bottom: 2px solid #000;
  border-left: 2px solid #fff;
  box-shadow: 2px 2px 0 #000 inset;
  font-family: "Tahoma", sans-serif;
  font-size: 12px;
  text-align: center;
}

/* Título estilo Win98 */
.tituloCancion {
  background: pink;   /* azul oscuro */
  color: #fff;
  padding: 2px 0;
  margin-bottom: 1px;
  border: 2px solid #fff;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  border-left: 2px solid #fff;
  font-weight: bold;
  font-size: 10px;
  text-transform: uppercase;
}

/* Botones cuadrados estilo Win98 */
.botones button {
  background: #c0c0c0;
  border: 2px solid #fff;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  border-left: 2px solid #fff;
  padding: 4px 8px;
  margin: 0 4px;
  cursor: pointer;
  font-size: 12px;
  font-family: "Tahoma", sans-serif;
}

/* Efecto presionado */
.botones button:active {
  border: 2px solid #000;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #000;
}

/* Barra de progreso estilo Win98 */
.barra {
  width: 100%;
  height: 12px;
  background: #808080; /* gris medio */
  border: 2px solid #fff;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  border-left: 2px solid #fff;
  margin-top: 5px;
  position: relative;
}

.progreso {
  height: 100%;
  width: 0%;
  background: pink; /* azul clásico Win98 */
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .general {
    display: grid;
    grid-template-columns: 1fr; /* todo apilado */
    grid-template-areas:
      "banner"
      "izquierda"
      "log"
      "content"
      "derecha"
      "box1"
      "box2"
      "box3"
      "box4";
    gap: 10px;
    padding: 10px;
  }

  .Banner h1 {
    font-size: 1.5rem; /* más chico para móvil */
  }
}