/*Comentarios previos:
- Decidí no usar media queries en conjunto con bootstrap pues no conseguí actar los @include breakpoint-(size){...} con documentos css, por lo que conseguí entender, es preciso
crear anexar un documento .scss el cual transpila el contenido a css. De no ser así agradezco una explicación/corrección al respecto.

- Como se comenta en el fichero html, se recurrió a cambios de dsiplay, formato de columnas y filas en base a los breakpoints by default presentes en bootrstrap.

-Este ejercicio, se hizo en conjunto con su contraparte hecha sin bootstrap (The piano store, tienda santiago).

-Íntenté cumplir a mayor cantidad de puntos de la rúbrica, pero siento que no apliqué la materia correctamente ni estoy resolviendo la página de buena forma. No obstante, quise intentarlo para 
sacar algún aprendizaje del proceso. 

Por todo lo anterior, agradecería mucho cualquier sugerencia, orientación o consejo para poder trabajar con  media queries tipo @include en boostrap. 
*/

@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Danfo&family=Exile&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Lobster&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Share+Tech&family=WDXL+Lubrifont+TC&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "WDXL Lubrifont TC", sans-serif;
}

.wdxl-lubrifont-tc-regular {
  font-weight: 400;
  font-style: normal;
}

/*Contenedor general*/
.contenedor {
  height: 100dvh;
}

/*NAV*/
.mobile-title {
  margin-left: 1rem;
}

/*ÁNIMACIÓN*/
/*Animación título*/
.teclas {
  opacity: 1;
  margin-left: 0.9rem;
}

.tecla-blanca {
  display: inline-block;
  animation: tecleoblanco 0.5s infinite;
  animation-direction: alternate;
  border: 1px solid black;
  background-color: black;
  border-radius: 3px;
  padding: 1rem 0.3rem;
}
.tecla-negra {
  display: inline-block;
  animation: tecleonegro 0.5s infinite;
  animation-direction: alternate;
  border: 1px solid #333;
  background-color: #fff;
  color: #333;
  border-radius: 3px;
  padding: 1rem 0.3rem;
}

.teclas > :nth-child(1) {
  animation-delay: 0.1s;
}
.teclas > :nth-child(2) {
  animation-delay: 0.5s;
}
.teclas > :nth-child(3) {
  animation-delay: 0.9s;
}
.teclas > :nth-child(4) {
  animation-delay: 1.3s;
}
.teclas > :nth-child(5) {
  animation-delay: 1.7s;
}
.teclas > :nth-child(6) {
  animation-delay: 1.2s;
}
.teclas > :nth-child(7) {
  animation-delay: 2.3s;
}
.teclas > :nth-child(8) {
  animation-delay: 0.7s;
}
.teclas > :nth-child(9) {
  animation-delay: 0.9;
}
.teclas > :nth-child(10) {
  animation-delay: 0.9s;
}
.teclas > :nth-child(11) {
  animation-delay: 2.1s;
}
.teclas > :nth-child(12) {
  animation-delay: 0.3s;
}
.teclas > :nth-child(13) {
  animation-delay: 2.5s;
}

@keyframes tecleoblanco {
  from {
    transform: translateY(0) scale(0.9);
  }

  to {
    transform: translateY(-7px) scale(0.8);
    box-shadow: 2px 2px 3px black;
  }
}

@keyframes tecleonegro {
  from {
    transform: translateY(0) scale(0.9);
  }
  to {
    transform: translateY(7px) scale(0.8);
    box-shadow: 2px 2px 3px black;
  }
}

/*Fin animación*/

/* ASIDE */

.aside {
  background-color: #222;
}

.logo-menu {
  width: 1.8rem;
  border-radius: 50%;
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
}

.logo-menu:hover {
  opacity: 1;
  transform: scale(1.1);

  cursor: pointer;
}

li {
  transition: all 0.3s ease-in-out;
  border-radius: 5px;
}
li:hover {
  transform: translateY(-5px);
  filter: invert(100%);
}

/* MAIN */
.main {
  background-color: #222;
}

/* Carta producto */
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  filter: grayscale(100%);
  transition: all 0.5s ease-in-out, opacity 0.8s ease-in-out;
  background: linear-gradient(180deg, #fff 10%, #b1b1b1 100%);
  box-shadow: inset -3px -3px 15px #c1c1c1;
  opacity: 0.7;
}

.card:hover {
  filter: grayscale(0%);
  transform: scale(0.95);
  box-shadow: inset 3px 3px 5px #b1b1b1;
  opacity: 1;
  border: none;
}

.card img {
  object-fit: cover;
  object-position: center;
  width: 15rem;
  height: 15rem;
  padding: 1rem;
  border-radius: 20px;
}

.card h3 {
  font-size: 1rem;
}

.card button {
  transition: all 0.5s ease-in-out 0.1s;
  border-radius: 5px;
}
.card button:hover {
  transform: translateY(-10px);
  filter: invert(100%);
}

/*FOOTER*/
/*Pie de Página*/
.footer {
  background-color: black;
}

/*Íconos*/
.social img {
  width: 1.4rem;
  transition: all 0.5s ease-in-out;
}

.social img:hover {
  cursor: pointer;
  transform: scale(1.1);
}