body {
  margin: 0;
  background-color: white;
}

/* CUADRADO ACERCA DE MI */
.acerca {
  position: absolute;
  top: 20px;
  left: 60px;

  width: 435px;
  height: 75px;

  background-color: rgb(255, 255, 255);
  border: 2px solid rgb(0, 0, 0);
  border-radius: 20px;
 box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* sombra */


  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 30px;
  color: rgb(0, 0, 0);

  
}

/* RECTÁNGULO GRIS LARGO */
.barra-gris {
  position: absolute;
  top: 120px;
  left: 60px;

  width: 430px;
  height: 510px;

  background-color: rgb(233, 231, 231);
  border-radius: 15px;
}

/* BOTÓN MÚSICA */
.musica {
  position: absolute;
  top: 120px;
  left: 60px;

  width: 430px;
  height: 56px;

  background-color: rgb(0, 0, 0);
  border: 2px solid rgb(255, 255, 255);
  border-radius: 0px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 28px;
  color: rgb(255, 255, 255);
}

.Artistas {
  position: absolute;
  top: 240px;
  left: 60px;

  width: 200px;
  height: 47px;

  background-color: rgb(0, 0, 0);
  border: 2px solid rgb(255, 255, 255);
  border-radius: 0px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 28px;
  color: rgb(255, 255, 255);
}





.Canciones {
  position: absolute;
  top: 469px;
  left: 60px;

  width: 200px;
  height: 47px;

  background-color: rgb(0, 0, 0);
  border: 2px solid rgb(255, 255, 255);
  border-radius: 0px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 28px;
  color: rgb(255, 255, 255);
}


.mi-imagen {
  width: 228px;        /* tamaño */
  height: 300;        /* mantiene proporción */
   top: 250px;
  left: 60px;
  position: relative;

}



.carousel-vertical {
  width: 200px;
  height: 339px;
  overflow: hidden;
  position: relative;
  border-radius: 0px;
  border: 2px solid black;
  background: rgb(230, 230, 230);
  left: 270px;
  top: 130px;
}

.track-vertical {
  display: flex;
  flex-direction: column;
  animation: scrollUp 14s linear infinite;
}

/* 👇 AQUÍ están más pequeñas */
.track-vertical img {
  width: 85%;
  height: 189px;
  margin: 10px auto;
  object-fit: cover;
  display: block;
  border-radius: 0px;
}

@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

.caja-hover {
  width: 98px;
  height: 40px;
  background: black;
  border: 2px solid white;
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  font-size: 13px;

  border-radius: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
  left: 63px;
  top: 338px;
}

/* 🖱️ cuando pasas el mouse */
.caja-hover:hover {
  transform: scale(1.2);
  background: white;
  border: 2px solid black;
  color: black;
}

/* texto */
.caja-hover p {
  margin: 0;
  transition: color 0.3s ease;
}




.caja-hover-reverse {
  width: 98px;
  height: 40px;
  background: white;
  border: 2px solid black;
  color: black;
  font-size: 13px;
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  border-radius: 15px;
  left: 63px;
  top: 293px;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* 🖱️ hover inverso */
.caja-hover-reverse:hover {
  transform: scale(1.2);
  background: black;
  border: 2px solid white;
  color: white;
}

/* texto */
.caja-hover-reverse p {
  margin: 0;
  transition: color 0.3s ease;
}




.soad {
  width: 98px;
  height: 40px;
  background: black;
  border: 2px solid white;
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  font-size: 13px;

  border-radius: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
  left: 63px;
  top: 425px;
}

/* hover */
.soad:hover {
  transform: scale(1.2);
  background: white;
  border: 2px solid black;
  color: black;
}

.soad p {
  margin: 0;
  transition: color 0.3s ease;
}


.ly {
   width: 98px;
  height: 40px;
  background: white;
  border: 2px solid black;
  color: black;
  font-size: 13px;
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  border-radius: 15px;
  left: 63px;
  top: 382px;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* hover invertido */
.ly:hover {
  transform: scale(1.2);
  background: black;
  border: 2px solid white;
  color: white;
}

.ly p {
  margin: 0;
  transition: color 0.3s ease;
}





.yuri img {
  width: 205px;
  height: 56px;
  left: 63px;
  top: 182px;
  position: absolute;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* efecto hover */
.yuri:hover img {
  transform: scale(1.1);
}




.the {
 width: 98px;
  height: 40px;
  background: black;
  border: 2px solid white;
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  font-size: 13px;

  border-radius: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
  left: 165px;
  top: 290px;
}

/* hover inverso */
.the:hover {
  transform: scale(1.2);
  background: white;
  border: 2px solid black;
  color: black;
}

.the p {
  margin: 0;
  transition: color 0.3s ease;
}

.gir {
width: 98px;
  height: 40px;
  background: white;
  border: 2px solid black;
  color: black;
  font-size: 13px;
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  border-radius: 15px;
  left: 165px;
  top: 335px;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* hover */
.gir:hover {
  transform: scale(1.2);
  background: black;
  border: 2px solid white;
  color: white;
}

.gir p {
  margin: 0;
  transition: color 0.3s ease;
}


.kara {
  width: 95px;
  height: 40px;
  background: black;
  border: 2px solid white;
  color: white;
  font-size: 13px;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  border-radius: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
  left: 165px;
  top: 380px;
  position: absolute;
}

/* hover */
.kara:hover {
  transform: scale(1.2);
  background: white;
  border: 2px solid black;
  color: black;
}

.kara p {
  margin: 0;
  transition: color 0.3s ease;
}

.junko {
  width: 95px;
  height: 40px;
  background: white;
  border: 2px solid black;
  color: black;
  font-size: 13px;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  border-radius: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
  left: 165px;
  top: 423px;
  position: absolute;
}

/* hover */
.junko:hover {
  transform: scale(1.2);
  background: black;
  border: 2px solid white;
  color: white;
}

.junko p {
  margin: 0;
  transition: color 0.3s ease;
}


.foto {
  width: 200px;
  overflow: hidden;
  border-radius: 20px;
}

.foto img {
  width: 250px;
  height: auto;
  border-radius: 20px;
  transition: all 0.3s ease;
  position: absolute;
  top: 523px;
  left: 60px;
}

/* ✨ hover glow */
.foto img:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
  box-shadow: 0 0 70px white;
}




.sop {
  width: 200px;
  overflow: hidden;
  border-radius: 20px;
}

.sop img {
  width: 219px;
  height: auto;
  border-radius: 20px;
  transition: all 0.3s ease;
  position: absolute;
  top: 524px;
  left: 58px;
}

/* ✨ hover glow */
.sop img:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
  box-shadow: 0 0 70px white;
}

.loveu {
  width: 200px;
  overflow: hidden;
  border-radius: 20px;
}

.loveu img {
  width: 219px;
  height: auto;
  border-radius: 20px;
  transition: all 0.3s ease;
  position: absolute;
  top: 573px;
  left: 58px;
}

/* ✨ hover glow */
.loveu img:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
  box-shadow: 0 0 70px white;
}

.junk {
  width: 200px;
  overflow: hidden;
  border-radius: 20px;
}

.junk img {
  width: 210px;
  height: 46px;
  border-radius: 20px;
  transition: all 0.3s ease;
  position: absolute;
  top: 523px;
  left: 280px;
}

/* ✨ hover glow */
.junk img:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
  box-shadow: 0 0 70px white;
}


.ios {
  width: 200px;
  overflow: hidden;
  border-radius: 20px;
}

.ios img {
  width: 210px;
  height: 46px;
  border-radius: 20px;
  transition: all 0.3s ease;
  position: absolute;
  top: 573px;
  left: 280px;
}

/* ✨ hover glow */
.ios img:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
  box-shadow: 0 0 70px white;
}

.rectangulo-gris {
  width: 780px;
  height: 260px;
  background: rgb(241, 241, 241);

  border-radius: 20px;

  position: absolute;

  top: 20px;     /* mueve arriba/abajo */
  left: 530px;   /* mueve a la derecha */
}

.rectangulo-blanco {
  width: 780px;
  height: 329px;
  background: rgb(241, 241, 241);

  border-radius: 20px;

  position: absolute;

  top: 290px;     /* mueve arriba/abajo */
  left: 530px;   /* mueve a la derecha */
}

.media {
  position: absolute;
  top: 20px;
  left: 530px;

  width: 780px;
  height: 56px;

  background-color: rgb(0, 0, 0);
  border: 2px solid rgb(255, 255, 255);
  border-radius: 0px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 28px;
  color: rgb(255, 255, 255);
}

.hevi {
  position: absolute;
  top: 82px;
  left: 530px;

  width: 270px;
  height: 40px;

  background-color: rgb(255, 255, 255);
  border: 2px solid rgb(0, 0, 0);
  border-radius: 0px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 28px;
  color: rgb(0, 0, 0);
}

.hevi2 {
  position: absolute;
  top: 82px;
  left: 780px;

  width: 270px;
  height: 40px;

  background-color: rgb(255, 255, 255);
  border: 2px solid rgb(0, 0, 0);
  border-radius: 0px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 28px;
  color: rgb(0, 0, 0);
}

.hevi3 {
  position: absolute;
  top: 82px;
  left: 1040px;

  width: 270px;
  height: 40px;

  background-color: rgb(255, 255, 255);
  border: 2px solid rgb(0, 0, 0);
  border-radius: 0px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 28px;
  color: rgb(0, 0, 0);
}

.carousel-horizontal {
  width: 510px;
  height: 20px;

  overflow: hidden;
  position: absolute;

  top: 130px;
  left: 532px;

  border: 2px solid black;
  background: white;
}

.track-horizontal {
  display: flex;
  width: max-content;

  animation: scrollLeft 40s linear infinite;
}

/* 📸 imágenes largas pero pequeñas */
.track-horizontal img {
  width: 180px;
  height: 20px;

  margin-right: 0px;

  object-fit: cover;
  display: block;

  transition: all 0.3s ease;
}

/* ✨ hover */
.track-horizontal img:hover {
  transform: scale(1.05);

  box-shadow:
    0 0 20px white,
    0 0 40px white;
}

/* 🔁 movimiento infinito */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}


.lista-box {
  width: 220px;
  height: 87px;

  padding: 15px;

  background: rgb(255, 255, 255);
  border: 2px solid rgb(0, 0, 0);
  border-radius: 15px;

  color: rgb(0, 0, 0);

  overflow-y: auto;

  position: absolute;
  top: 154px;
  left: 531px
}

/* scrollbar */
.lista-box::-webkit-scrollbar {
  width: 6px;
}

.lista-box::-webkit-scrollbar-thumb {
  background: white;
  border-radius: 10px;
}

/* lista */
.lista-box ul {
  list-style: none;

  padding: 0;
  margin: 0;
}

/* items */
.lista-box li {
  padding: 8px;
  margin: 8px 0;

  border: 1px solid rgb(0, 0, 0);
  border-radius: 8px;

  font-size: 13px;

  transition: all 0.3s ease;
}

/* hover */
.lista-box li:hover {
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);

  transform: scale(1.03);
}


.hasa {
  width: 220px;
  height: 87px;

  padding: 15px;

  background: rgb(255, 255, 255);
  border: 2px solid rgb(0, 0, 0);
  border-radius: 15px;

  color: rgb(0, 0, 0);

  overflow-y: auto;

  position: absolute;
  top: 154px;
  left: 788px;
}

/* scrollbar */
.hasa::-webkit-scrollbar {
  width: 6px;
}

.hasa::-webkit-scrollbar-thumb {
  background: rgb(255, 255, 255);
  border-radius: 10px;
}

/* lista */
.hasa ul {
  list-style: none;

  padding: 0;
  margin: 0;
}

/* items */
.hasa li {
  padding: 8px;
  margin: 8px 0;

  border: 1px solid rgb(0, 0, 0);
  border-radius: 8px;

  font-size: 13px;

  transition: all 0.3s ease;
}

/* hover */
.hasa li:hover {
  background: white;
  color: black;

  transform: scale(1.03);
}





.foto-color {
  width: 60px;
  height: 100px;
  top: -260px;
  left: 1050px;

  position: relative;

  overflow: hidden;

  border-radius: 5px;
}

/* imágenes */
.foto-color img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  position: absolute;
  top: 0;
  left: 0;

  transition: all 0.4s ease;
}

/* color oculto */
.foto-color .color {
  opacity: 0;
}

/* hover */
.foto-color:hover .color {
  opacity: 1;

  transform: scale(1.1);
}

/* ocultar bn */
.foto-color:hover .bn {
  opacity: 0;
}



.digital {
   width: 60px;
  height: 100px;
  top: -360px;
  left: 1113px;

  position: relative;

  overflow: hidden;

  border-radius: 5px;
}

/* imágenes */
.digital img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  position: absolute;
  top: 0;
  left: 0;

  transition: all 0.4s ease;
}

/* imagen color oculta */
.digital .color {
  opacity: 0;
}

/* hover */
.digital:hover .color {
  opacity: 1;

  transform: scale(1.1);
}

/* ocultar blanco y negro */
.digital:hover .bn {
  opacity: 0;
}





.saint {
   width: 60px;
  height: 100px;
  top: -460px;
  left: 1176px;

  position: relative;

  overflow: hidden;

  border-radius: 5px;
}

/* imágenes */
.saint img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  position: absolute;
  top: 0;
  left: 0;

  transition: all 0.4s ease;
}

/* imagen color oculta */
.saint .color {
  opacity: 0;
}

/* hover */
.saint:hover .color {
  opacity: 1;

  transform: scale(1.1);
}

/* ocultar blanco y negro */
.saint:hover .bn {
  opacity: 0;
}

.kami {
   width: 60px;
  height: 100px;
  top: -559px;
  left: 1241px;

  position: relative;

  overflow: hidden;

  border-radius: 5px;
}

/* imágenes */
.kami img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  position: absolute;
  top: 0;
  left: 0;

  transition: all 0.4s ease;
}

/* imagen color oculta */
.kami .color {
  opacity: 0;
}

/* hover */
.kami:hover .color {
  opacity: 1;

  transform: scale(1.1);
}

/* ocultar blanco y negro */
.kami:hover .bn {
  opacity: 0;
}


.metal {
    width: 120px;
  height: 40px;
  top: -559px;
  left: 1050px;

  position: relative;

  overflow: hidden;

  border-radius: 5px;
}

/* imágenes */
.metal img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  position: absolute;
  top: 0;
  left: 0;

  transition: all 0.4s ease;
}

/* imagen color oculta */
.metal .color {
  opacity: 0;
}

/* hover */
.metal:hover .color {
  opacity: 1;

  transform: scale(1.1);
}

/* ocultar blanco y negro */
.metal:hover .bn {
  opacity: 0;
}


.death {
  width: 130px;
  height: 40px;
  top: -599px;
  left: 1175px;

  position: relative;

  overflow: hidden;

  border-radius: 5px;
}

/* imágenes */
.death img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  position: absolute;
  top: 0;
  left: 0;

  transition: all 0.4s ease;
}

/* imagen color oculta */
.death .color {
  opacity: 0;
}

/* hover */
.death:hover .color {
  opacity: 1;

  transform: scale(1.1);
}

/* ocultar blanco y negro */
.death:hover .bn {
  opacity: 0;
}

body {
  margin: 0;
  overflow: hidden;
}

.estilo {
  position: absolute;
  top: 282px;
  left: 530px;

  width: 780px;
  height: 56px;

  background-color: rgb(0, 0, 0);
  border: 2px solid rgb(255, 255, 255);
  border-radius: 0px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 28px;
  color: rgb(255, 255, 255);
}







.miku {
  width: 250px;

  position: absolute;

  top: 100px;   /* mueve arriba/abajo */
  left: 300px;  /* mueve a la derecha */
}


.miku {
  width: 190px;

  position: absolute;

  top: 260px;   /* mueve arriba/abajo */
  left: 478px;  /* mueve a la derecha */
}



.encaje {
  width: 427px;
  height: 295px;

  position: absolute;

  top: 320px;   /* mueve arriba/abajo */
  left: 578px;  /* mueve a la derecha */
}







.texto-hover {
width: 285px;
height: 100px;
  color: rgb(0, 0, 0);

  font-size: 13px;
  line-height: 1.6;

  position: absolute;

  top: 350px;   /* arriba/abajo */
  left: 648px;  /* derecha */

  transition: all 0.35s ease;

  cursor: pointer;
}

/* ✨ hover */
.texto-hover:hover {
  transform: scale(1.05);

  text-shadow:
    0 0 10px white,
    0 0 20px white,
    0 0 40px white;
}

.video-aesthetic {
  width: 250px;

  position: absolute;

  top: 350px;   /* arriba/abajo */
  left: 1030px;  /* derecha */

  border-radius: 8px;

  object-fit: cover;
}

.imagen-box {
  width: 60px;      /* ancho */
  height: 620px;     /* altura */

  position: absolute;

  top: 0px;
  left: 0px;           /* ✨ totalmente pegado a la izquierda */

  overflow: hidden;
}

/* imagen */
.imagen-box img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  display: block;
}



.regresar-btn {
  position: absolute;

  top: 50px;   /* arriba/abajo */
  left: 75px;  /* izquierda/derecha */

  padding: 10px 20px;

  background: black;
  color: white;

  border: 0px solid white;
  border-radius: 15px;

  text-decoration: none;

  font-size: 14px;
  letter-spacing: 1px;

  transition: all 0.3s ease;
}

/* ✨ hover */
.regresar-btn:hover {
  background: white;
  color: black;

  transform: scale(1.05);

  box-shadow:
    0 0 20px white,
    0 0 40px white;
}