* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
}

*::before,
*::after {
  box-sizing: border-box;
}

ul,
ol,
li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: peru;
}

img {
  max-width: 100%;
}

.navbar li a .active::after {
  transform: scale(1);
  width: 100%;
}

.contenedor {
  margin: 0 auto;
  max-width: 1200px;

}

.contenedor-titulos {
  margin: 0;
  margin-inline-start: 1.6rem;
  max-width: inherit;
}

body {
  background-color: white;
  transition: background-color .3s, color .3s;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;

}

body.dark-mode {
  background-color: black;
  color: white;
}

main {
  background-color: white;
  transition: background-color .3s, color .3s;
}

body.dark-mode main {
  background-color: black;
}

header {
  background-color: white;
  transition: background-color .3s, color .3s;


}

body.dark-mode header,
body.dark-mode footer {
  background-color: black;
}

body.dark-mode .bio,
body.dark-mode .galeria,
body.dark-mode .bio-titulo,
body.dark-mode .musica-titulo,
body.dark-mode .videos-titulo,
body.dark-mode .agenda-titulo,
body.dark-mode .contacto-titulo,
body.dark-mode .prensa,
body.dark-mode .videos-grilla,
body.dark-mode .grilla-contacto,
body.dark-mode .contacto-parrafo,
body.dark-mode .contacto-desktop,
body.dark-mode .contacto-redes,
body.dark-mode .redes-contacto,
body.dark-mode .donaciones-btn,
body.dark-mode .bio-secciones,
body.dark-mode .musica,
body.dark-mode .spotify,
body.dark-mode .videos,
body.dark-mode .videos p,
body.dark-mode .agenda,
body.dark-mode .agenda-lista,
body.dark-mode #eventos li

/* ,body.dark-mode .agenda button */
,
body.dark-mode .contacto,
body.dark-mode .partituras1,
body.dark-mode .partituras-grilla,
body.dark-mode .partituras-grilla p,
body.dark-mode .pedagogias,
body.dark-mode .pedagogia-pa,
body.dark-mode .pedagogia-pa2,
body.dark-mode .colaboraciones {
  background-color: black;
  color: white;
}

body.dark-mode .prensa,
body.dark-mode .contacto {
  border-top: 1px solid whitesmoke;
}

body.dark-mode .donaciones-btn {
  border: 1px solid whitesmoke;
}

body.dark-mode .donaciones-btn::before {
  color: black;
  border: 1px solid black;
}

body.dark-mode .btn-videos:hover {
  color: black;
}

body.dark-mode .btn-videos::before {

  border: 1px solid whitesmoke;
  background-color: black;
}

body.dark-mode .btn-musica:hover {
  color: black;
  border: 1px solid whitesmoke;
}

body.dark-mode .btn-musica:before {
  background-color: black;
  border: 1px solid whitesmoke;

}

body.dark-mode .bio {
  border-bottom: 1px solid whitesmoke;
}


/* BARRA DE NAVEGACION */

.navbar {
  background-color: rgb(15, 14, 14);
  color: whitesmoke;
  width: 100%;
}

@media (max-width: 480px) {
  .navbar-nav {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    font-size: 1.65rem;
    gap: .5rem;
    padding-top: 2rem;
  }

  .menu {
    display: flex;
    flex-direction: column;
    gap: .8rem;
  }

  .nav-item .lang-button {
    font-size: 1.8rem;
    padding-bottom: .3rem;
  }

  h1,
  .h1 {
    display: none;
  }

  .redes {
    padding-bottom: .3rem;
  }

  .navbar-brand {
    font-size: 1.65rem;
  }
}

@media (min-width :481px) and (max-width: 992px) {

  .menu {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    font-size: 1.8rem;
  }

  .nav-item .lang-button {
    font-size: 1.8rem;
    padding-bottom: .3rem;
  }

  .navbar-brand {
    font-size: 1.8rem;
  }

  h1,
  .h1 {
    display: none;
  }
}

/*   .navbar-nav .nav-link {
    font-size: 1.5rem;
    color: black; 
  }

   .navbar-nav .nav-item {
    width: 100%;
    text-align: center;
  } 
} 
 */
/* .navbar-nav{
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  font-size: 1.8rem; 
  gap: .5rem;
  margin-top: 1rem; 
}  */

.navbar-toggler {
  background-color: transparent;
  border: 0;
  border-radius: 0;
}

.open-icon,
.close-icon {
  border: 0;
  color: whitesmoke;
  background-color: transparent;
  transition: opacity 0.3s ease;
}

.d-none {
  opacity: 0;
  visibility: hidden;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler .open-icon:focus,
.navbar-toggler .close-icon:focus {
  outline: none;
  box-shadow: none;
  border: none;
}

.navbar li a {
  position: relative;
  color: whitesmoke !important;
  padding-top: .2rem;
  display: inline-block;
  transition: .2s;
  font-family: "Bowlby One", sans-serif;
}


.navbar li a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 80%;
  height: 2px;
  background-color: whitesmoke;
  transform: scaleX(0);
  transition: .2s;
  transform-origin: left;

}

.navbar li a:hover::after {
  transform: scaleX(1);

}

.navbar-brand {
  color: whitesmoke !important;
  text-align: center;
  font-family: "Bowlby One", sans-serif;
  font-weight: 400;
  /* font-size: 1.1rem; */
}

.navbar-brand:hover {
  color: whitesmoke;
}

.redes {
  display: flex;
  justify-content: start;
  align-items: center;
  margin: 0;
  gap: .5em;
}

.redes a::after {
  display: none;
}

.bi-moon-stars-fill::after {
  display: none;
}

.iconos {
  gap: .3rem;
}

.iconos::after {
  display: none;
}

.bi-translate {
  margin-left: .3rem;
}

.languages {
  display: flex;
  gap: .5rem;
}

.lang-button {
  font-size: 1rem;
  border: 0;
  cursor: pointer;
  background-color: transparent;
  color: whitesmoke;
  font-family: "Bowlby One", sans-serif;
  padding: 0;
}

.collapse {
  display: none;
  transition: height 1s ease;
}

.collapse.show {
  display: block;
  height: 100vh;
}

.img-container {
  position: relative;
  overflow: hidden;
  max-width: 100%;

}

.fade-in {
  opacity: 0;
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in.show {
  opacity: 1;
}

.fade-in1 {
  transform: translateY(20px);
  transition: transform 1s ease-out;
}

.fade-in1.show {
  transform: translateY(0);
}

/* GRILLA DE FOTOS GALERIA */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  padding: 10px;
  width: 90%;
  border: 1px solid whitesmoke;
  border-radius: 10px;
  margin-bottom: 1rem;
  margin-top: 1rem;
  justify-content: center;
  align-self: center;
}

.photo-grid img {
  width: 100%;
  height: auto;
  cursor: pointer;
  border-radius: 5px;
  transition: transform 0.3s ease;
  object-fit: cover;
}

.photo-grid img:hover {
  transform: scale(1.05);
}


/* Diferenciación de clases */
.photo-grid img.vertical {
  grid-row: span 2;
}

.photo-grid img.horizontal {
  grid-column: span 1;
}

.photo-grid img.horizontal1 {
  grid-column: span 2;
}


/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.modal.active {
  display: flex;
}


.swiper-container {
  width: 100%;
  max-width: 800px;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 500px;
  overflow: hidden;
}




.swiper-slide img {
  width: auto;
  height: 100%;
  object-fit: contain;
  border-radius: 5px;
}


.modal .close-button {
  position: absolute;
  top: 60px;
  right: 15px;
  color: #556B2F;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1100;
}

.modal .close-button:hover {
  font-family: 35px;
  transition: 0.3s;
}


.swiper-button-next,
.swiper-button-prev {
  color: #556B2F;
  padding: 10px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  transform: scale(1.1);
}


.swiper-pagination-bullet {
  background-color: #ffffff;
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.2s ease;
}

.swiper-pagination-bullet-active {
  background-color: #556B2F;
  opacity: 1;
  transform: scale(1.2);
}


.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 30px;
}


/* Íconos de navegación */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 30px;
}


/* header-tablet */
@media(min-width: 768px) {
  .nav-link {
    padding-left: .3rem;
  }

  .photo-grid img.horizontal1 {

    grid-column: span 2;
    object-fit: cover;
    height: 115px;
  }

  .photo-grid img.horizontal1:hover {
    transform: scale(01.01);
  }
}

@media(min-width:992px) {
  .contenedor-titulos {
    max-width: 992px;
    margin: 0 auto;
    margin-inline-start: 2rem;
  }

  .navbar-nav {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    color: whitesmoke;
  }

  .navbar-brand {
    font-size: 1.1rem;
    padding-top: .5rem;
    margin-left: .2rem;
    font-family: "Bowlby One", sans-serif;
  }

  .navbar li a {
    font-size: .9rem;
  }

  .navbar li a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 95%;
    height: 2px;
    background-color: whitesmoke;
    transform: scaleX(0);
    transition: .2s;
    transform-origin: left;
  }

  .menu {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nav-item {
    margin-right: 5px;
  }

  .nav-link {
    margin: 0;
    padding: 0;
  }

  .redes {
    display: flex;
    justify-content: end;
    align-items: center;
    margin: 0;
    gap: 0.1rem;

  }

  .iconos {
    gap: 0.9rem;
  }

  .bi-moon-stars-fill {
    margin-right: .3rem;
  }

  .navbar-toggler,
  .open-icon,
  .close-icon {
    display: none;
  }

  .photo-grid img.horizontal1 {

    grid-column: span 2;
    object-fit: cover;
    height: 135px;
  }

  .photo-grid img.horizontal1:hover {
    transform: scale(01.01);
  }
}

/********* HEADER DESKTOP NAV, PHOTO GRID Y SWIPPER*********/

@media (min-width: 1200px) {
  .navbar-nav {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    color: whitesmoke;
  }

  .navbar-brand {
    font-size: 1.1rem;
    padding-top: .5rem;
    margin-left: .2rem;
    font-family: "Bowlby One", sans-serif;
  }

  .navbar li a {
    font-size: .9rem;
  }

  .navbar li a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 95%;
    height: 2px;
    background-color: whitesmoke;
    transform: scaleX(0);
    transition: .2s;
    transform-origin: left;
  }

  .menu {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nav-item {
    margin-right: 5px;
  }

  .nav-link {
    margin: 0;
    padding: 0;
  }

  .redes {
    display: flex;
    justify-content: end;
    align-items: center;
    margin: 0;
    gap: 0.1rem;

  }


  .iconos {
    gap: 0.9rem;
  }

  .bi-moon-stars-fill {
    margin-right: .3rem;
  }

  .navbar-toggler,
  .open-icon,
  .close-icon {
    display: none;
  }

  /* swipper */
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.1);
  }

  .photo-grid img.horizontal1 {
    height: auto;
    grid-column: span 1;
    object-fit: cover;

  }

  .photo-grid img.horizontal1:hover {
    transform: scale(01.05);
  }

  .lang-button {
    padding-top: .2rem;
    margin-left: .2rem;
  }

  .swiper-wrapper {
    width: 100%;
  }

  .swiper-container {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  .swiper-slide img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 5px;
  }


  .modal.active {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* index-mobile */


.portada {
  position: relative;
  z-index: 1;
  height: 100vh;
  overflow: hidden;

}

.portada-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% top
}

/* h1 {
  font-size: 1.6rem;
  font-weight: 400;
  font-family: "Bowlby One", sans-serif;
  position: absolute;
  top: 25%;
  left: 3%;
  z-index: 1;
  color: whitesmoke;
  animation: titulo 2s 1s ease-in-out 1 forwards;
} */

/* h1 {
  font-size: 3rem;
  font-weight: 400;
  font-family: "Bowlby One", sans-serif;
  position: absolute;
  bottom: 10%;
  left: 5%;
  z-index: 1;
  color: whitesmoke;
  animation: titulo 2s 1s ease-in-out 1 forwards;

  letter-spacing: 2px;
}

.h1 {
  display: flex;
  justify-content: center;
  font-size: 3rem;
  font-weight: 400;
  font-family: "Bowlby One", sans-serif;
  color: whitesmoke;
  letter-spacing: 2px;
} */


@keyframes titulo {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
    color: whitesmoke;
    letter-spacing: 1px;
  }
}







/* BOTONES */

.piano-descargas {
  position: relative;
  background-color: transparent;
  padding: 10px;
  color: peru;
  border: 1px solid peru;
  cursor: pointer;
  border-radius: 5px;
  margin-top: .5rem;
  margin-bottom: .5rem;
  transition: background-color .2s, color .2s, trasforrm .2s;
  margin-left: .3rem;
  font-family: "Bowlby One", sans-serif;
  font-weight: 200;
}

.piano-descargas:hover {
  background-color: peru;
  color: white;
  transform: scale(1.1);
}

.btn-musica,
.btn-videos,
.btn-prensa {
  border: 1px solid white;
  color: white;
  position: relative;
  background-color: transparent;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
  margin-top: .5rem;
  margin-bottom: 1.5rem;
  margin-left: 2rem;
  transition: background-color .2s, color .2s, trasforrm .2s;
  font-family: "Bowlby One", sans-serif;
  font-weight: 200;

}

.prensa a {
  display: flex;
  justify-content: center;
  align-self: center;
}

.btn-prensa {
  display: flex;
  justify-content: center;
  align-self: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: 0;
  width: 200px;

}


.btn-musica:hover {
  color: peru;
  background-color: whitesmoke;
  transform: scale(1.1);
  border: 1px solid peru;
}

.btn-videos:hover {
  color: #556B2F;
  background-color: white;
  transform: scale(1.1);
  border: 1px solid #556B2F;
}

.btn-prensa:hover {
  color: #2b212b;
  background-color: white;
  transform: scale(1.1);
  border: 1px solid #2b212b;
  ;
}

.piano-descargas::before {
  position: absolute;
  content: "Douwnload";
  font-size: .7rem;
  top: 80%;
  left: 30%;
  padding: 0 .1rem;
  color: peru;
  border: 1px solid peru;
  background-color: whitesmoke;
  border-radius: 5px;
  transform: scale(0);
  transform-origin: top;
  transition: .3s;

}

.btn-musica::before {
  position: absolute;
  content: "See more";
  font-size: .7rem;
  top: 70%;
  left: 30%;
  padding: 0 .1rem;
  color: whitesmoke;
  border: 1px solid whitesmoke;
  background-color: peru;
  border-radius: 5px;
  transform: scale(0);
  transform-origin: top;
  transition: .3s;
}

.btn-videos::before {
  position: absolute;
  content: "See all";
  font-size: .7rem;
  top: 70%;
  right: 0;
  padding: 0 .1rem;
  color: whitesmoke;
  border: 1px solid whitesmoke;
  background-color: #556B2F;
  border-radius: 5px;
  transform: scale(0);
  transform-origin: top;
  transition: .3s;

}

.donaciones-btn {
  position: relative;
  background-color: white;
  padding: 10px;
  color: #7e3333;
  border: 1px solid #7e3333;
  cursor: pointer;
  border-radius: 5px;
  margin-top: .5rem;
  margin-bottom: .5rem;
  transition: background-color .2s, color .2s, trasforrm .2s;
  font-family: "Bowlby One", sans-serif;
  font-weight: 200;
}

.donaciones-btn:hover {
  background-color: #7e3333;
  color: white;
  transform: scale(1.1);
}

.donaciones-btn::before {
  position: absolute;
  content: "Donations";
  top: 75%;
  color: #7e3333;
  border: 1px solid #7e3333;
  background-color: whitesmoke;
  padding: .1rem .2rem;
  border-radius: 5px;
  transform: scale(0);
  transform-origin: top;
  transition: .3s;
  margin-top: .2rem;
}

.donaciones-btn:hover::before,
.piano-descargas:hover::before,
.btn-videos:hover::before,
.btn-musica:hover::before {
  transform: scale(1);

}





/* SECCION BIO */

.bio {
  margin-top: 0;
  width: 100%;
  /* position: relative; */
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
  /*   margin-bottom: 2rem; */
  background-color: gray;


}


.galeria {

  margin-top: 0;
  width: 100%;
  /* position: relative; */
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
  /*   margin-bottom: 2rem; */
  background-color: #2b212b;
}

.bio-titulo,
.galeria-titulo {
  color: whitesmoke;
  display: flex;
  flex-direction: column;
  justify-content: start;
  margin-bottom: .5rem;

  /*  position: absolute; */
  font-weight: 400;
  font-size:
    2.3rem;
  /*   overflow: hidden; */
  /*  margin-left: 1rem;   */
  background-color: grey;
  letter-spacing: 1px;
  font-family: "Bowlby One", sans-serif;
}

.galeria-titulo {
  background-color: transparent;

}

.bio-parrafo1 {
  margin-top: 1rem;
  color: whitesmoke;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  text-align: start;
  margin-bottom: 0;
}


.bio-parrafo1 h3 {
  color: white
}

.about {
  color: white;
}

.p-about {
  color: rgb(66, 66, 66);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  text-align: start;
}

.bio-parrafo {
  margin-top: .2rem;
  gap: .5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  text-align: start;
  /*   border-top: 1px solid white; */
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  color: whitesmoke;

}

.bio-parrafo.open p {
  max-height: 1000px;
  transition: max-height 1s ease-out;
}

.bio-parrafo p {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-out;

}

.bio-parrafo h4,
.span-bio {
  color: white;
  display: flex;
  justify-content: start;
  align-items: start;
  border-top: 1px solid white;
  padding-top: .5rem;
  font-family: "Bowlby One", sans-serif;
  letter-spacing: 1px;
  font-size: 1.5rem;
}


.span-bio {
  margin-bottom: .5rem;
}

.span-bio .toggle-icon {
  cursor: pointer;
  margin-left: 10px;
}

.bio-secciones {
  background-color: grey;
  width: 90vw;
}


/* SECCION MUSICA */

.musica {
  /*   position: relative; */
  display: flex;
  flex-direction: column;
  margin-top: 0;
  width: 100%;
  overflow: hidden;
  padding-top: 1rem;
  background-color: peru;
}

.musica::before,
.musica::after {
  content: "";
  position: absolute;
  background-color: peru;
  transition: width 1s ease-in-out, height 1s ease-in-out;
  width: 0;
  height: 0;
}

.musica::before {
  top: 0;
  right: 0;
  width: 0;
  height: 1px;
}

.musica::after {
  top: 0;
  left: 0;
  width: 1px;
  height: 0;
}

.musica-visible-top::before {
  width: 100%;
}

.border-visible-left::after {
  height: 100%;
}

.musica-titulo {
  color: whitesmoke;
  display: flex;
  justify-content: start;
  /*  margin-left: 1rem; */
  margin-bottom: 1rem;
  font-weight: 400;
  font-size:
    2.3rem;
  background-color: peru;
  /* font-family: "Bowlby One", sans-serif; */
  font-family: "Bowlby One", sans-serif;
  overflow: hidden;
}


.musica-copete {
  margin-top: 1rem;
  margin-bottom: 1rem;
}





.musica-copete h3 {
  color: white;
  display: flex;
  justify-content: start;
  align-items: start;
}

.discos,
.colaboracione {
  color: peru;
  font-size: 1.3rem;
  margin-top: 1.5em;
  border-top: 1px solid peru;
  padding-top: .5rem;
  /* margin-left: 2rem; */
  margin-bottom: 1rem;
  font-family: "Bowlby One", sans-serif;
}

.discos {
  margin-top: 0;
  padding-top: 0;
  color: rgb(8, 4, 0);
}

.colaboraciones {
  padding-top: .5rem;
}

.suite,
.piano {
  /*  margin-top: 1rem; */
  display: flex;
  flex-direction: column;
  gap: .3rem;
  justify-content: center;
  width: 85vw;
  border: 1px solid white;
  border-radius: 12px;
  padding: 1rem;
  /* background-color: rgb(66, 66, 66); */
}

.suite img,
.piano img {
  border-radius: 12px;
}

.spotify {
  display: flex;
  flex-direction: column;
  width: 85vw;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
  background-color: peru;
  margin-bottom: .5rem;
  box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.1);
}

.boton-colab {
  display: flex;
  gap: .4rem;
  margin-top: 1rem;
  font-size: 20px;
  color: white;
  cursor: pointer;
}



/* SECCION VIDEOS */

.videos {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background-color: #556B2F;

}

.videos::before,
.videos::after {
  content: "";
  position: absolute;
  background-color: peru;
  transition: width 1s ease-in-out, height 1s ease-in-out;
}

.videos::before {
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
}

.videos::after {
  top: 0;
  right: 0;
  width: 1px;
  height: 0;
}

.border-visible-top::before {
  width: 100%;
}

.border-visible-left::after {
  height: 100%;
}

.videos-titulo {
  color: whitesmoke;
  justify-content: start;
  font-weight: 400;
  font-size: 2.3rem;
  margin-top: 1rem;
  background-color: #556B2F;
  letter-spacing: 1px;
  font-family: "Bowlby One", sans-serif;
  margin-bottom: .5rem;
}


.videos-copete {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  text-align: start;
  margin-top: 1.5rem;
}

.videos-copete h4 {
  color: peru;
  display: flex;
  justify-content: start;
  align-items: start;
}

.videos-grilla {
  margin-top: 1rem;
  margin-bottom: .5rem;
  border: 1px solid whitesmoke;
  padding: 1rem;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 85%;
  background-color: #556B2F;
  box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.1);

}

.videos-grilla p {
  color: whitesmoke;
  padding-left: .2rem;
}

iframe {
  border-radius: 10px;
}

.video1,
.video2,
.video3,
.video4,
.video5,
.video6,
.video7 {
  margin-bottom: .5rem;
  height: 200px;
  border:
    /* 2px solid peru; */
    none;
  width: 100%;

}

.video8 {
  height: 200px;
  border:
    /*  2px solid peru */
    none;
  width: 100%;
}





/* SECCION AGENDA */
.agenda {
  width: 100%;
  background-color: #964b00;
  margin-top: 0;
  padding-bottom: 1rem;
  margin-bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;

}

.agenda-titulo {
  font-weight: 400;
  font-size: 2.3rem;
  letter-spacing: 1px;
  color: whitesmoke;
  background-color: #964b00;
  display: flex;
  justify-content: start;
  align-items: start;
  text-align: center;
  padding-top: 1rem;

  letter-spacing: 1px;
  font-family: "Bowlby One", sans-serif;
  /*   overflow: hidden; */
  margin-bottom: .5rem;
}

.agenda-lista {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 2rem;
  background-color: peru;
  width: 90vw;
  margin-top: 1rem;
  box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.1);
}

body.dark-mode .agenda-lista {
  border: 1px solid whitesmoke;
}

#eventos {
  padding-left: 0px;
}

body.dark-mode #eventos li {
  border: 1px solid whitesmoke;

}

#eventos .nombre {
  color: peru;
}

.nombre span {
  font-family: "Bowlby One", sans-serif;
}

body.dark-mode #eventos .nombre {
  color: whitesmoke;
}

#eventos li {
  background: white;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 5px;
  position: relative;
  gap: .3rem;
  border: 1px solid peru;
}

#eventos li {
  margin-bottom: 15px;
}

.view-more-btn {
  background-color: white;
  color: peru;
  border: 1px solid peru;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 10px;
  transition: background-color .2s, color .2s;
  font-family: "Bowlby One", sans-serif;
  font-weight: 100;
}

.view-more-btn:hover {
  background-color: peru;
  color: white;
}

body.dark-mode .view-more-btn {
  background-color: black;
  color: whitesmoke;
  border: 1px solid whitesmoke;
}

body.dark-mode .view-more-btn:hover {
  background-color: whitesmoke;
  color: black;
}

.event-details {
  margin-top: 10px;
}

.evento-pasado {
  opacity: 0.6;
  color: #aaa;
}

.location-image {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 5px;
}

.location-map {
  display: block;
  margin-top: 10px;
  color: peru;
  text-decoration: none;
  font-family: "Bowlby One", sans-serif;
  ;
}

body.dark-mode .location-map {
  color: whitesmoke;
}

.location-map:hover {
  text-decoration: underline;
  color: peru;
}

/* SECCION CONTACTO*/

.contacto {
  width: 100%;
  overflow: hidden;
  padding-top: 1rem;
  padding-bottom: .5rem;
  margin-top: 0;
  background-color: #7e3333;
  display: flex;
  flex-direction: column;

}


.contacto-redes {
  color: whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  padding: 0;
  background-color: #7e3333;

}

.contacto-redes a:hover {
  transition: 1s ease;
  color: #2b212b;
  /* rgb(8, 4, 0); */
  transform: scale(1.1);
}

body.dark-mode .contacto-redes a:hover {
  color: #2b212b;
}

.redes-contacto {
  gap: 1.6rem;
  display: flex;
  justify-content: center;
  align-self: center;
  flex-direction: row;
  font-size: 1.3rem;
  text-align: center;
  background-color: #7e3333;
}

.grilla-contacto {
  background-color: #7e3333;
  width: 90%;
  border: 1px solid whitesmoke;
  margin-bottom: 2rem;
  padding-top: .5rem;
  border-radius: 10px;
  justify-content: start;
  padding-left: .9rem;
  padding-right: .9rem;
  padding-bottom: .5rem;
  display: flex;
  flex-direction: column;
}



.contacto-parrafo {
  color: whitesmoke;
  display: flex;
  flex-direction: start;
  justify-self: start;
  align-items: start;
  text-align: center;
  margin-top: .5rem;
  gap: .3rem;
  border: 0;
  text-wrap: wrap;
  background-color: #7e3333;
}

.contacto-titulo {
  color: whitesmoke;
  display: flex;
  font-weight: 400;
  font-family: "Bowlby One", sans-serif;
  font-size: 2.3rem;
  letter-spacing: 1px;
  background-color: #7e3333;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

.contact {
  color: whitesmoke;
  position: absolute;
  font-weight: 300;
  font-size: 7.3vw;
  top: 12%;
  left: 4.5%;
}

.resalta {
  font-weight: bold;
}

/* SECCION PRENSA */

.prensa {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #2b212b;
  height: auto;

}

/************FOOTER***********/


.footer {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  background-color: whitesmoke;
  font-weight: 200;
  color: #7e3333;
  padding-left: .5rem;
}

footer h2 {
  display: flex;
  color: #7e3333;
  margin-top: 1rem;
  margin-left: 1rem;
  justify-content: start;
  align-self: start;
  margin-bottom: 1rem;
  font-weight: 200;
  margin-top: 1.5rem;
  font-family: "Bowlby One", sans-serif;

}

footer h2:hover {
  color: #2b212b;
  transition: color 1s;
}

body.dark-mode .footer-titulo:hover {
  font-weight: 400;
  color: peru;
}

body.dark-mode .body.dark-mode .redes-footer2:hover {
  color: peru;
}

body.dark-mode .prensa {
  border-bottom: 1px solid whitesmoke;
}

body.dark-mode .donaciones,
body.dark-mode .colaboraciones,
body.dark-mode .pedagogias {
  border-bottom: 1px solid peru;
}

.footer-parrafo {
  color: #7e3333;
  display: flex;
  align-self: start;
  flex-direction: nowrap;
  font-weight: 100;
  font-size: .9rem;
  margin-left: 1rem;
  padding-right: .2rem;
}

.encabezado {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-family: "Bowlby One", sans-serif;
  font-weight: 200;

}

.mi-mail {
  font-size: .8rem;
  margin-bottom: 2rem;
  font-weight: 400;


}

.copi {
  font-size: .8rem;
  font-weight: 400;
  margin-top: .5rem;
  color: #7e3333;
  text-wrap: balance;
  margin-left: 1rem;
  margin-bottom: 2rem;
  padding-left: .2rem;
}


/********* INDEX-TABLET******* */

@media (min-width:768px) {
  .contenedor-titulos {
    max-width: 768px;
    margin: 0 auto;
    margin-inline-start: 2rem;
  }

  /* PORTADA */
  h1 {
    font-size: 3.5rem;
    top: 35%;
    left: 8%;
    font-weight: 400;
    font-family: "Bowlby One", sans-serif;

  }

  .h1 {
    font-size: 3.5rem;
    font-weight: 400;
    font-family: "Bowlby One", sans-serif;

  }

  /* h1,.h1{
  display: block;
} */
  .portada {
    position: relative;
    z-index: 1;
    height: 100vh;
    overflow: hidden;

  }

  .portada-img {
    position: absolute;
    height: 100vh;
    object-fit: cover;
    width: 100%;
    object-position: 75% top;
  }

  /* MUSUCA */
  .spotify {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding-top: .5rem;
    margin: 1rem;
    margin-bottom: 0;
    /* margin-left: 0; */
    justify-self: center;
    align-self: center;
    border: 1px solid whitesmoke;
    border-radius: 10px;
    width: 100%;
  }

  .suite,
  .piano {
    width: auto;
    border: none;
  }

  .suite iframe,
  .piano iframe {
    height: 400px;
  }


  .discos {
    border-top: 1px solid peru;
    padding-top: .5rem;
    font-size: 1.8rem;

  }

  .tablet {
    margin-left: 5rem;
  }

  .colab {
    margin-left: 5rem;
    margin-top: 1rem;
  }

  /* VIDEOS */
  .videos-titulo,
  .agenda-titulo,
  .bio-titulo,
  .contacto-titulo,
  .musica-titulo,
  .galeria-titulo {
    color: whitesmoke;
    font-weight: 400;
    font-size: 3rem;
    letter-spacing: 1px;

  }

  .galeria-titulo {
    color: whitesmoke;
    background-color: transparent;
  }


  .videos-grilla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-content: center;
    margin-top: 1rem;
    gap: 1.4rem;
    border: 1px solid whitesmoke;
    width: 100%;
  }

  .video1,
  .video2,
  .video3,
  .video4,
  .video5,
  .video6,
  .video7,
  .video8 {
    display: grid;
    justify-content: center;
    width: 100%;
  }

  iframe {
    height: 300px;
    border-radius: 10px;
  }

  .video8 {
    margin-bottom: .2rem;
  }

  /*  .tablet {
    margin-left: 4.5rem;
  } */

  /* AGENDA */

  #eventos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;

  }

  .agenda-lista {
    background-color: peru;
    width: 85vw;
  }

  #eventos .nombre {
    color: peru;
  }


  /* CONTACTO */
  .contacto {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-bottom: 1rem;
  }

  .grilla-contacto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: start;
    align-self: center;
    margin-top: 2rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 3rem;
    gap: 3rem;
    width: 100%;
  }

  .foto {
    max-width: 50%;
    position: unset;
  }

  .contacto-desktop {
    /*   justify-content: start;
  text-align: center;
  align-items: en;
  display: flex;
  flex-direction: column;
  ; */
    background-color: #7e3333;
  }

  .redes-contacto {
    gap: 1rem;
    padding-right: 0;
  }

  .contacto-redes {

    font-size: 21px;
    margin-bottom: 0;
    /*  padding-right: 3rem; */
    flex-direction: row;
    display: flex;
    justify-self: end;
    align-items: center;
    padding-top: .2rem;
    margin-right: 1rem;
  }

  .contacto-parrafo {
    color: whitesmoke;
    display: flex;
    justify-content: center;
    align-items: end;
    text-align: center;
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.1rem;

  }


  .contact {
    color: peru;
    font-size: 3rem;
    top: 11%;
    left: 4%;
    position: absolute;
    font-weight: 300;
  }

  /*  SECCION PEDAGOGIA*/
  .pedagogia-grilla {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
    padding-bottom: .3rem;
    margin-top: 1rem;
  }

  .workshop1,
  .workshop2 {
    margin-bottom: .3rem;
  }


}

/*********** INDEX DESKTOP ************/

@media(min-width: 1200px) {
  .contenedor-titulos {
    margin: 0 auto;
    margin-inline-start: 4.1rem;
    max-width: inherit;
  }

  /* PORTADA */
  h1 {
    font-size: 4.5rem;
    top: 40%;
    left: 10%;
    font-weight: 400;
    font-family: "Bowlby One", sans-serif;

  }

  .h1 {
    font-size: 4.5rem;
    font-weight: 400;
    font-family: "Bowlby One", sans-serif;
  }

  /* h1,.h1{
  display:none
} */
  .portada {
    position: relative;
    z-index: 1;
    height: 100vh;
    overflow: hidden;
  }

  .portada-img {
    position: absolute;
    height: 100vh;
    object-fit: cover;
    object-position: top;

  }

  /* SECCION BIO */

  .bio {
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
    /*   gap: 1.5rem; */
    width: 100%;
  }

  .bio-foto {
    width: 100%;
    height: 410px;
    object-fit: cover;
    object-position: center;
    filter: opacity(0.9)
  }

  .bio-secciones {
    display: flex;
    flex-direction: column;
    width: 100%;

  }

  .bio-parrafo,
  .bio-parrafo2 {
    margin-top: .1rem;
    padding-top: .3rem;
    color: whitesmoke;
    padding-bottom: .5rem;

  }

  .bio-parrafo2 {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .bio-parrafo p {
    font-size: 1rem;
    padding-top: .2rem;
    padding-right: .2rem;
  }

  .bio h3 {
    font-size: 1.5rem;
    display: flex;
    margin-bottom: .8rem;
    color: peru;

  }


  .bio-parrafo1 {
    font-size: 1rem;
    color: whitesmoke;
    /*  margin-top: 1rem; */

  }


  .bio-titulo,
  .galeria-titulo {
    color: whitesmoke;
    display: flex;
    justify-content: start;
    font-weight: 400;
    font-family: "Bowlby One", sans-serif;
    font-size: 5rem;
    letter-spacing: 1px;
    /*   margin-left: 2rem;  */
    background-color: grey;
    letter-spacing: 1px;
  }

  .galeria-titulo {
    color: whitesmoke;
    background-color: transparent;
  }

  .container-bio {
    padding-left: .2rem;
  }

  /* SECCION MUSICA */

  .musica {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 1rem;
    /*  display: grid; */

    overflow: hidden;
    padding-bottom: .5rem;
  }

  .encabezado-grilla {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    gap: 1rem;
    justify-content: space-between;
    padding-bottom: .7rem;
  }

  .musica-foto {
    /*  display: grid;
    grid-column: span 2;
    grid-row: span 2;
    align-content: start;
    justify-content: start;
    justify-self: start;
    justify-items: start; */
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
    filter: opacity(0.9)
  }

  .musica-copete {
    font-size: 1rem;
    padding-top: .2rem;
    padding-right: .2rem;
    align-items: start;
    justify-content: start;
    padding-top: 0px;
    margin-top: 0px;
    display: grid;
    grid-column: span 2;
    border-bottom: none;

  }

  .musica-titulo {
    color: whitesmoke;
    /*  position: absolute; */
    display: flex;
    font-weight: 400;
    font-family: "Bowlby One", sans-serif;

    font-size: 5rem;
    /*  margin-left: 2rem; */
    z-index: 1;
    background-color: transparent;
    letter-spacing: 1px;
  }

  .spotify {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    /*   margin: 1rem;  */
    margin-bottom: 1rem;
    /* margin-left: 0; */
    justify-content: center;
    align-self: center;
    border-radius: 10px;
    width: 100%;
    background-color: transparent;
  }

  .suite,
  .piano {
    /*   border: 1px solid peru; */
    width: auto;
  }

  .suite img,
  .piano img {
    display: none;
  }

  .suite iframe,
  .piano iframe {
    height: 400px;
  }



  .discos {
    border-top: 1px solid peru;
    padding-top: .5rem;
    font-size: 1.8rem;

  }

  .colab {
    margin-left: 4rem;
    margin-top: 1rem;
  }


  /* SECCION VIDEOS */

  .videos {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    padding-top: 0;

    margin-top: 0;
    background-color: #556B2F;
    padding-bottom: .5rem;
  }

  .videos-titulo {
    color:
      /*  rgb(231, 138, 45) */
      whitesmoke;
    font-weight: 400;
    font-family: "Bowlby One", sans-serif;
    display: flex;
    flex-direction: start;
    letter-spacing: 1px;
    font-size: 5rem;
    margin-bottom: 1rem;
    /*   margin-left: 2rem; */
    letter-spacing: 1px;
  }

  .videos-copete h3 {
    font-size: 1.5rem;
    color: peru;
    margin-bottom: .8rem;
  }

  .videos-copete {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    padding-top: .2rem;
    padding-right: .2rem;

  }

  .videos-fotos {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
  }

  .videos-copete1 {
    display: grid;
    grid-column: span 2;
    align-content: start;
    justify-self: start;
    align-self: start;
  }

  .videos-copete {
    display: flex;
    align-items: start;
    justify-content: start;
    padding-top: 0px;
    margin-top: 0px;
  }

  .videos-grilla {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    align-content: center;
    margin-top: 1rem;
    gap: 1.4rem;
    width: 100%;
    background-color: #556B2F;
    border: 1px solid whitesmoke;
    padding-bottom: .5rem;
  }

  .video1,
  .video2,
  .video3,
  .video4,
  .video5,
  .video6,
  .video7,
  .video8 {
    display: grid;
    justify-content: center;
    width: 100%;
    border:
      /* 2px solid peru */
      none;
    height: 200px;

  }

  .video8 {
    margin-bottom: .15rem;
  }

  iframe {
    height: 300px;
    border-radius: 10px;
  }

  .videos-grilla p {
    color: whitesmoke;
  }



  .btn-videos {
    margin-left: 4rem;
  }

  /* SECCION  AGENDA */
  .agenda-titulo {
    font-weight: 400;
    font-family: "Bowlby One", sans-serif;
    display: flex;
    flex-direction: start;
    letter-spacing: 1px;
    font-size: 5rem;
    margin-bottom: 0;
    /*  margin-left: 2rem; */
    margin-bottom: 2rem;

  }

  #eventos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
  }

  .agenda {
    padding-bottom: 2rem;
    display: flex;
    flex-direction: column;

  }

  .agenda-lista {
    background-color: peru;
    width: 100%;
  }

  #eventos .nombre {
    color: peru;
  }

  /* SECCION CONTACTO */

  .contacto {
    display: flex;
    flex-direction: column;
    width: 100%;
    /*  height: 55vh; */
    padding-top: 1rem;
    padding-left: 1rem;
    padding-bottom: 1rem;
  }

  .grilla-contacto {
    border: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: start;
    align-self: center;
    margin-top: 2rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 3rem;
    gap: 5rem;
    width: 100vw;
  }

  .foto {
    max-width: 50%;
    position: unset;
  }

  .contacto-desktop {
    justify-content: start;
    text-align: center;
    align-items: en;
    display: flex;
    flex-direction: column;
    ;
    background-color: #7e3333;
  }

  .contacto-redes {

    font-size: 21px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 3rem;
    flex-direction: row;
    display: flex;
    justify-self: center;
    align-items: end;
    padding-top: .2rem;
    margin-right: 0;
  }

  .redes-contacto {
    gap: 3rem;
    padding-right: 0;
    font-size: 18px;
  }

  .contacto p {
    margin-bottom: 0;
  }

  .contacto-parrafo {
    color: whitesmoke;
    display: flex;
    justify-content: center;
    align-items: end;
    text-align: center;
    font-family: "Bebas Neue", sans-serif;
    font-size: 1rem;
    margin-left: 0;
    padding-bottom: 0;
    text-wrap: nowrap;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: .5rem;
    text-wrap: nowrap;
  }

  .contacto-titulo {
    font-weight: 400;
    font-family: "Bowlby One", sans-serif;
    display: flex;
    flex-direction: start;
    letter-spacing: 1px;
    font-size: 5rem;
    margin-bottom: 0;
    /*  margin-left: 2vw;  */
    margin-bottom: 2rem;
    letter-spacing: 1px;
  }

  .contact {
    color: peru;
    font-size: 3rem;
    top: 11%;
    left: 4%;
    position: absolute;
    font-weight: 300;
  }

  /* FOOOTER INDEX */
  .footer {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    font-weight: 200;
    color: #7e3333;
    padding-left: .5rem;
    margin-left: 1rem;
  }
}

/* BARRA DE NAVEGACION PARTITURAS, PEDAGOGIA Y COLABORACIONES */


.close-icon {
  border: 0;
  color: whitesmoke;
  background-color: transparent;
}

.navbar-toggler {
  background-color:
    /* rgba(245, 222, 179, 0.16); */
    transparent;
  border: 0;
}

/********SECCION PARTITURAS MOBILE *********/

.partituras1 {
  margin-top: 1rem;
  width: 90vw;
  position: relative;
  overflow: hidden;
  padding-top: 1rem;
  margin-bottom: 2rem;
}

.partituras1::before,
.partituras1::after {
  content: "";
  position: absolute;
  background-color: peru;
  transition: width 2s ease-in-out, height 2s ease-in-out;
  width: 0;
  height: 0;
}

.partituras1::before {
  top: 0;
  right: 0;
  width: 0;
  height: 1px;
}

.partituras1::after {
  top: 0;
  right: 0;
  width: 1px;
  height: 0;
}

.border-visible-top::before {
  width: 100%;
}

.border-visible-left::after {
  height: 100%;
}


.partituras1-titulo {
  color: peru;
  position: absolute;
  font-weight: 400;
  font-family: "Bowlby One", sans-serif;
  font-size: 1.5rem;
  top: 5%;
  left: 4%;
  letter-spacing: 1px;
}



.partituras-grilla {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
}

.partituras-pa {
  margin-top: 1rem;
  color: #7e3333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  text-align: start;
  font-size: 1rem;
  font-family: "Bowlby One", sans-serif;
}

.partituras-pa1 {
  margin-top: 1rem;
  color: black;
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: start;
  text-align: start;
  font-size: 1rem;

}

.donations {
  margin-top: .5rem;
  padding-top: .2rem;
  color: rgb(66, 66, 66);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  text-align: start;
  font-size: .9rem;

}

.arreglos {
  border-top: 1px solid peru;
  padding-top: 1rem;
  text-wrap: balance;
}

.partituras1 h4 {
  color: peru;
  font-size: 1.3rem;
  font-family: "Bowlby One", sans-serif;
}

.partituras-piano {
  display: flex;
  flex-direction: column;
}

.piano-titulo {
  color: peru;
  margin-top: 1.5rem;
  justify-content: start;
  align-items: center;
  display: flex;
  border-top: 1px solid peru;
  padding-top: 1rem;
  font-family: "Bowlby One", sans-serif;
}

.piano-portada {
  position: relative;

}

.piano-partes img {
  margin-top: .5rem;
  border: 1px solid peru;
  border-radius: 5px;
  position: relative;
}

.previsualizacion {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}


body.dark-mode .piano-descargas {
  background-color: black;
}

body.dark-mode .piano-descargas:hover {
  background-color: peru;
  color: black;
}

body.dark-mode .piano-descargas::before {
  background-color: black;
  color: peru;
}

.mostrar-icono {
  cursor: pointer;
  margin: 10px;
  position: absolute;
  font-size: 20px;
  color: peru;
  bottom: 0;
  right: 1%;
  z-index: 10;
}

.suite-titulo,
.quinteto-titulo,
.arreglos-titulo,
.surera-titulo,
.donaciones-titulo {
  color: peru;
  margin-top: 2.5rem;
  justify-content: start;
  align-items: center;
  display: flex;
  margin-bottom: 1rem;
  border-top: 1px solid peru;
  padding-top: 1rem;
  text-wrap: balance;
  font-family: "Bowlby One", sans-serif;
}

.donaciones-titulo {
  color: #7e3333;
  border-top: 1px solid #7e3333;
}

.donaciones {
  padding: 1rem;
  text-align: start;
  width: 90vw;
}

.donaciones-icon {
  display: flex;
  gap: .5rem;
}

.img-icon {
  font-size: 24px;
}

.donaciones-icon h3 {
  font-family: "Bowlby One", sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
}

.donaciones-p {
  font-family: "Bowlby One", sans-serif;
  /*  color: #7e3333; */
}

/* PARTIRURAS DESKTOP */
@media(min-width: 1200px) {

  .partituras1-titulo {
    font-size: 5rem;
    font-weight: 400;
    font-family: "Bowlby One", sans-serif;
    top: 2%;
    left: 4%;
  }


  .partituras-pa {
    margin-bottom: 1.6rem;
    font-size: 1rem;
    border-top: none;
  }

  .partituras-pa1,
  .donaciones-parrafo {
    margin-top: 1.1rem;
    color: black;
    /*   display: flex;
    flex-direction: column; */
    justify-content: center;
    align-items: start;
    text-align: start;
    font-size: 1rem;

  }



  .partituras1 h4 {
    color: peru;
    font-size: 1.6rem;
  }



  .piano-partes {
    display: flex;
    flex-direction: column;
    width: 100%;
  }




  .mostrar-icono {
    cursor: pointer;
    margin: 10px;
    position: absolute;
    font-size: 20px;
    color: peru;
    bottom: 0;
    right: 8%;
  }

  .partituras-piano {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    width: 980px;
  }

  .piano-partes img {
    height: 400px;
    object-fit: cover;
    object-position: center;
  }

  .suite-titulo,
  .quinteto-titulo,
  .arreglos-titulo,
  .donaciones-titulo {
    color: peru;
    margin-top: 2.5rem;
    justify-content: start;
    align-items: center;
    display: flex;
    margin-bottom: 1rem;
    border-top: 1px solid peru;
    padding-top: 1rem;

  }

  .donaciones-titulo {
    color: #7e3333;
    border-top: 1px solid #7e3333;
  }
}


/********SECCION PEDAGOGIA MOBILE *********/

.pedagogias {
  margin-top: 1rem;
  width: 90vw;
  position: relative;
  overflow: hidden;
  padding-top: 1rem;
  /* margin-bottom: 2rem; */
  padding-bottom: 1rem;
  margin-bottom: 0;
}

.pedagogias:before,
.pedagogias::after {
  content: "";
  position: absolute;
  background-color: peru;
  transition: width 2s ease-in-out, height 2s ease-in-out;
  width: 0;
  height: 0;
}

.pedagogias::before {
  top: 0;
  right: 0;
  width: 0;
  height: 1px;
}

.pedagogias::after {
  top: 0;
  right: 0;
  width: 1px;
  height: 0;
}

.border-visible-top::before {
  width: 100%;
}

.border-visible-left::after {
  height: 100%;
}


.pedagogias-titulo {
  color: peru;
  position: absolute;
  font-weight: 400;
  font-family: "Bowlby One", sans-serif;
  font-size: 1.5rem;
  top: 4%;
  left: 4%;
}

.pedagogia-contenedor {
  margin-top: 2rem;
}

.pedagogia-pa {
  margin-top: 1rem;
  color: #7e3333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  text-align: start;
  font-size: 1rem;
  font-family: "Bowlby One", sans-serif;
}

.pedagogia-pa2 {
  margin-top: 1rem;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  text-align: start;
  font-size: 1rem;
  margin-bottom: 1rem;

}

.workshop {
  color: peru;
  font-size: 1.3rem;
  border-top: 1px solid peru;
  padding-top: 1rem;
  font-family: "Bowlby One", sans-serif;
  text-wrap: balance;
}

.pedagogia-grilla {
  border: 1px solid peru;
  border-radius: 5px;
  padding: 16px;
  margin-top: 1.5rem;
}

.mostrar-icono1 {
  cursor: pointer;
  margin: 10px;
  position: absolute;
  font-size: 20px;
  color: peru;
  bottom: 0;
  right: 1%;
  z-index: 10;
}

.portada-img1,
.piano-portada1 {
  position: relative;
}

.workshop1,
.workshop2,
.workshop3 {
  margin-bottom: 1rem;
}

.work-contra {
  margin-top: 1.5rem;
}

.orquesta {
  margin-top: 1rem;
}

.piano-portada {
  position: relative;

}

.piano-partes1 img {
  margin-top: .5rem;
  border: 1px solid peru;
  border-radius: 5px;
  /*  min-width: 100%; */
  position: relative;
}

.previsualizacion1 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;

}

.pedagogias {
  margin-bottom: 1rem;

}

/* PEDAGOGIA DESKTOP */
@media(min-width :1200px) {
  .pedagogias-titulo {
    font-size: 5rem;
    top: 2%;
    left: 2%;
    font-weight: 400;
    font-family: "Bowlby One", sans-serif;
    color: peru;
  }


  .workshop {
    color: peru;
    font-size: 1.5rem;
  }

  .partituras-piano1 {
    position: relative;
    display: flex;
    width: 400px;
  }

  .piano-portada1 {
    position: relative;
  }

  .piano-partes1 img {
    border: 1px solid peru;
    height: 400px;
    position: relative;
  }


  .pedagogia-grilla {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
    padding-bottom: .3rem;
    margin-top: 2rem;

  }

  .workshop1,
  .workshop2 {
    margin-bottom: .3rem;
  }

}

/* COLABORACIONES MOBILE */
/* COLABORACIONES MOBILE */
.colaboraciones-titulo {
  color: peru;
  font-weight: 400;
  font-family: "Bowlby One", sans-serif;
  font-size: 1.5rem;

  top: 2%;
  left: 4%;
  position: absolute;
}


.colaboraciones {
  margin-top: 1rem;
  width: 90vw;
  position: relative;
  overflow: hidden;
  padding-top: 1rem;
  margin-bottom: 2rem;
}

.colaboraciones::before,
.colaboraciones::after {
  content: "";
  position: absolute;
  background-color: peru;
  transition: width 2s ease-in-out, height 2s ease-in-out;
  width: 0;
  height: 0;
}

.colaboraciones::before {
  top: 0;
  right: 0;
  width: 0;
  height: 1px;
}

.colaboraciones::after {
  top: 0;
  right: 0;
  width: 1px;
  height: 0;
}


.border-visible-top::before {
  width: 100%;
}

.border-visible-left::after {
  height: 100%;
}

.rock {
  margin-bottom: 1rem;
}

.spotify1 {
  display: flex;
  flex-direction: column;
  width: 80vw;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
  background-color: transparent;
  margin-bottom: .5rem;
  border-radius: 10px;

}

.piano1 {
  /*  margin-top: 1rem; */
  display: flex;
  flex-direction: column;
  gap: .3rem;
  justify-content: center;
  border: 1px solid peru;
  border-radius: 12px;
  padding: 1rem;
  /* background-color: rgb(66, 66, 66); */
}

@media(min-width :768px) {
  .spotify1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    margin: 1rem;
    margin-bottom: 0;
    /* margin-left: 0; */
    justify-self: center;
    align-content: center;
    border-radius: 10px;
    background-color: transparent;
    width: 80vw;
  }

  .piano1 {
    /*  margin-top: 1rem; */
    display: flex;
    flex-direction: column;
    gap: .3rem;
    justify-content: center;
    border: 1px solid peru;
    border-radius: 12px;
    padding: 1rem;

  }

  .piano1 iframe {
    height: 400px;
  }
}

/* COLABORACIONES DESKTOP */
@media(min-width :1200px) {
  .colaboraciones-titulo {
    font-size: 5rem;
    top: 2%;
    left: 2%;
    font-weight: 400;
    font-family: "Bowlby One", sans-serif;
  }

  .colaboraciones {
    margin-bottom: 1rem;
  }

  .spotify1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.3rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    margin: 1rem;
    margin-bottom: 0;
    /* margin-left: 0; */
    justify-self: center;
    align-content: center;
    border-radius: 10px;
    width: 85vw;
    background-color: transparent;
  }


  .collab {
    background-image: none;

  }

  .collab1 {
    height: 400px;

  }

  .collab1 img {
    display: initial;
    object-fit: cover;

    width: 100%;
    height: 300px;
  }

  .colaboracione,
  .discos {
    font-size: 1.7rem;
    padding-top: 1rem;
  }

  .piano1 {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    justify-content: center;
    align-items: center;
    border: 1px solid peru;
    border-radius: 12px;
    padding: 1rem;
    height: 500px;

  }

  .piano1 iframe {
    height: 400px;
  }
}

/* FOOTER PARTITURAS Y PEDAGOGIA  COLABORACIONES*/

.footer2 {
  display: flex;
  width: 100%;
  flex-direction: column;
  background-color: whitesmoke;
  font-weight: 200;
  padding-left: .5rem;
  justify-content: start;
  align-items: start;
}

.footer-parrafo2 {
  font-size: .9rem;

}

.encabezado2 {
  margin-left: 1rem;
  color: #7e3333;
  font-family: "Bowlby One", sans-serif;
  margin-bottom: 0;

}

.footer-redes2 {
  color: #7e3333;
  margin-top: .3rem;
  padding-left: 0;
  flex-direction: row;
}

.copi2 {
  font-size: .8rem;
  font-weight: 400;
  margin-top: .2rem;
  color: #7e3333;
  text-wrap: nowrap;
  margin-left: 1rem;
  margin-bottom: 1.5rem;
  padding-left: .2rem;
}

.footer2-wrapp {
  display: flex;
  justify-content: start;
  align-content: start;
  margin-top: 0;
  margin-left: 1rem;
  padding-left: .2rem;
}

.redes-footer2 {
  gap: 2.1rem;
  display: flex;
  justify-content: center;
  flex-direction: row;
  margin-top: .5rem;
  /*  margin-right: 4rem; */
  font-size: 17px;
  align-content: end;
  justify-content: end;

}

.redes-footer2 a:hover {
  transition: 1s ease;
  color: #2b212b;
  transform: scale(1.1);
}

body.dark-mode .redes-footer2 a:hover {
  color: #964b00;
}

.bi-whatsapp:hover {
  color: green;
}



@media(min-width:768px) {

  .redes-footer2 {
    gap: 1.3rem;
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin-top: 1rem;
    /*  margin-right: 4rem; */
    font-size: 16px;
    align-content: end;
    justify-content: end;
  }
}

@media(min-width:1200px) {
  .footer2 {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    background-color: whitesmoke;
    font-weight: 200;

  }

  .footer2 h2 {
    margin-left: 4rem;
  }

  .footer-parrafo2 {
    margin-left: 4rem;
  }

  .encabezado2 {
    margin-left: 4rem;
    color: #7e3333;
    font-family: "Bowlby One", sans-serif;
  }

  .footer-redes2 {
    color: #7e3333;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-self: end;
    margin-top: .3rem;
    padding-left: 0;
  }

  .footer2-wrapp {
    display: grid;
    justify-content: center;
    align-content: end;
    margin-top: 3rem;
  }

  .redes-footer2 {
    gap: 2.5rem;
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin-top: 1rem;

    font-size: 18px;

  }

  .redes-footer2 a:hover {
    transition: 1s ease;
    color: #2b212b;
    transform: scale(1.1);
  }

  .bi-whatsapp:hover {
    color: green;
  }
}

@media (min-width: 1440px) and (max-width: 1600px) {
  .contenedor {
    max-width: 1440px;
  }

  .contenedor-titulos {
    margin-inline-start: 4.7rem;
  }

  .portada {
    height: 100vh;

  }

  .portada img {
    height: 100vh;
    object-position: 30% top;
  }

  /* PEDAGOGIA /PARTITURAS */
  .portada-img1 {
    max-height: 600px;
    object-fit: cover;
  }


  /* BOTONES */
  .colab,
  .btn-videos {
    margin-left: 4.4rem;
  }

  /* COLABORACIONES */
  .collab1 img {
    height: 350px;
  }

  .piano1 {
    height: 550px;
  }

  /* galeria */
  .photo.grid {
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  }

  /* FOOTER */
  .footer2-wrapp {
    margin-top: 3.3rem;
  }
}




/*  .mi-mail{
  margin-left: o;
  font-size: 1rem;
  margin-bottom: 2rem;
  font-weight: 400;
}
.copi {
  font-size: 1rem;
  margin-bottom: 2rem;
  font-weight: 400;
  margin-left: 1rem; 

}