/* COPIAR TODO ÉSTO EN CSS --------------------- */
/* FUENTES --------------------- */
/* font prompt negrita*/
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400&display=swap');
/* font Montserrat light*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
/* font QUICKSAND normal*/
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&family=Sonsie+One&display=swap');
/* font Poppins muy negrita*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
/* Archivo Block extremo negrita*/
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black:wght@500&display=swap');
/* font-family: 'Montserrat', sans-serif; */
/* font-family: 'Prompt', sans-serif; */
/* font-family: 'Poppins', sans-serif; */
/* font-family: 'Archivo Black', sans-serif; */
/* font-family: 'Quicksand', sans-serif; */


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

html, body {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

.light{
   font-family: 'Montserrat', sans-serif; 
}

/* -----------------------------------------------
╔═..══════════════════════════════════════════╗

Encabezado

╚══════════════════════════════════════════..═╝
-----------------------------------------------
 */


.encabezado{
   display: grid;
   grid-template-columns: repeat(4, 20vw);
   grid-template-rows: repeat(4, 12vh);
   color: white;
   background-image: linear-gradient(rgba(51, 43, 58, 0.6), rgba(45, 34, 55, 0.9)),
                  url("../imagen/piano.jpg");
   background-size: cover;
   background-attachment: fixed;
   height: 50vh;
   width: 100vw;
}

.encabezado .titulo{
   display: flex;
   justify-content: center;
   align-items: flex-end;
   grid-column: 2 / 5;
   grid-row: 2/3;
   /* background-color: antiquewhite; */
   padding-bottom: 10px;
   font-family: 'Poppins', sans-serif;
   font-size: calc(18px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
   letter-spacing: 0.05em;
}

.encabezado .boton-regresar{
   display: flex;
   justify-content: center;
   align-items: flex-start;
   grid-column: 2/5;
   grid-row: 3/4;
   padding-top: 10px;
   font-family: 'Prompt', sans-serif; 
   letter-spacing: 0.2em;
}

.boton-regresar p{
   border: 1px rgb(252, 252, 252) solid;
   padding: 10px;
   border-radius: 4px;
   font-size: calc(10px + (19 - 14) * ((100vw - 300px) / (1600 - 300)));
}

.boton-regresar a{
   text-decoration: none;
   color: white;
}

.boton-regresar p:hover{
   border: 1px rgb(252, 252, 252) solid;
   padding: 10px;
   border-radius: 4px;
   font-size: calc(12px + (19 - 14) * ((100vw - 300px) / (1600 - 300)));
   transition: 0.3s ease-out;
   background-color: rgba(240, 248, 255, 0.199);
}



/* -----------------------------------------------
╔═..══════════════════════════════════════════╗

Banner 1 (A continuación repertorios y videos)

╚══════════════════════════════════════════..═╝
-----------------------------------------------
 */

 .banner-uno{
   display: grid;
   grid-template-columns: repeat(4, 20vw);
   grid-template-rows: repeat(5, 6vh);
/*    border: 1px black solid;*/   
   background-color: rgb(102, 176, 162);
   height: 25vh;
   width: 100vw;
 }

 .banner-uno .titulo-banner_uno{
   display: flex;
   justify-content: center;
   align-items: flex-end;
   grid-column: 2 / 5;
   grid-row: 2/3;
   /* background-color: antiquewhite; */
   padding-bottom: 10px;
   font-family: 'Poppins', sans-serif;
   font-size: calc(18px + (24 - 14) * ((100vw - 300px) / (1600 - 300)));
   letter-spacing: 0.05em;
   color: white;
 }

 .banner-uno .subtitulo-banner_uno{
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   grid-column: 2 / 5;
   grid-row: 3/4;
   color: white;
   /* background-color: antiquewhite; */
 }

 .banner-uno .subtitulo-banner_uno p{
   font-family: 'Quicksand', sans-serif;
   font-size: calc(15px + (18 - 14) * ((100vw - 300px) / (1600 - 300)));
   font-weight: 900;
   letter-spacing: 0.05em;
 }


  /* -----------------------------------------------
╔═..══════════════════════════════════════════╗

Banners de fotografías 

╚══════════════════════════════════════════..═╝
-----------------------------------------------
 */

 .foto{
   display: grid;   
   background-image: linear-gradient(rgb(51, 43, 58), rgb(45, 34, 55));
   width: 100vw;
   height: 40vh;
   grid-template-rows: repeat(4, 1fr);
}
.foto.izquierda {
   grid-template-columns: 45vw 1fr;
 }

.foto.derecha {
 grid-template-columns: 1fr 45vw;
}

.titulo {
   display: flex;
   align-items: center;
   font-family: 'Archivo Black', sans-serif;
   font-weight: 900;
   font-size: calc(18px + (24 - 14) * ((100vw - 300px) / (1600 - 300)));
   letter-spacing: 0.1em;
   color: white;
   grid-row: 2/3;
}

.titulo.izquierda{
   grid-column: 2/3;
   margin-left: 6vw;
}

.titulo.derecha{
   grid-column: 1/2;
   margin-right: 6vw;
   justify-content: right;
}


.subtitulo{
   display: flex;
   font-family: 'Quicksand', sans-serif;
   font-weight: 900;
   font-size: calc(14px + (19 - 14) * ((100vw - 300px) / (1600 - 300)));
   grid-row: 3/4;
   color: white;
}

.subtitulo.izquierda{
   grid-column: 2/3;
   margin-left: 6vw;
}

.subtitulo.derecha{
   grid-column: 1/2;
   margin-right: 6vw;
   justify-content: right;
}

  /* -----------------------------------------------
╔═..══════════════════════════════════════════╗

Botones de fotografías 

╚══════════════════════════════════════════..═╝
-----------------------------------------------
 */
.botones-foto{
   grid-row: 4/5;
}
.botones-foto.derecha{
   display: flex;
   margin-left: 6vw;
   justify-content: flex-start;
}

.botones-foto.izquierda{
   display: flex;
   margin-right: 6vw;
   justify-content: flex-end;

}

.botones-foto a{
   text-decoration: none;
   font-family: 'Quicksand', sans-serif;

}

button{
   cursor: pointer;
   width: 150px;
   margin-right: 10px;
   text-transform: uppercase;
}

.botones-foto .boton-transparente{
   padding: 10px;
   border: 1px white solid;
   border-radius: 4px;
   background-color: rgba(0, 0, 0, 0);
   color: white;
}

.botones-foto .boton-transparente:hover{
   transition: 0.3s ease-out;
   background-color: rgba(240, 248, 255, 0.199);
}

.botones-foto .boton-blanco{
   padding: 10px;
   border: 1px white solid;
   border-radius: 4px;
}

.botones-foto .boton-blanco:hover{
   transition: 0.3s ease-out;
   background-color: rgba(240, 248, 255, 0.199);
}

 /* -----------------------------------------------
╔═..══════════════════════════════════════════╗

Fotos de vocalistas 

╚══════════════════════════════════════════..═╝
-----------------------------------------------
 */
 .foto-paulina{
   grid-column: 1/2;
   grid-row: 1/6;
   background: url(../imagen/pauREPER.jpg);
   alt: "foto de la cantante Paulina";
   background-size: cover;
   background-position: 50%;
}
 .foto-daniela{
   grid-column: 2/3;
   grid-row: 1/6;
   background: url(../imagen/daniREPER.jpg);
   alt: "foto de la cantante Daniela";
   background-size: cover;
   background-position: 50%;
}

.foto-stela{
   grid-column: 1/2;
   grid-row: 1/6;
   background: url(../imagen/stelaREPER.jpg);
   alt: "foto de la cantante Stela";
   background-size: cover;
   background-position: 50%;
}

.foto-javier{
   grid-column: 1/2;
   grid-row: 1/6;
   background: url(../imagen/javiREPER.jpg);
   alt: "foto del cantante Javier";
   background-size: cover;
   background-position: 50%;
}

.foto-michelle{
   grid-column: 2/3;
   grid-row: 1/6;
   background: url(../imagen/micheREPER.jpg);
   alt: "foto de la cantante Michelle";
   background-size: cover;
   background-position: 50%;
}

.foto-julie{
   grid-column: 2/3;
   grid-row: 1/6;
   background: url(../imagen/julieREPER.jpg);
   alt: "foto del cantante Javier";
   background-size: cover;
   background-position: 50%;
}

.foto-david{
   grid-column: 1/2;
   grid-row: 1/6;
   background: url(../imagen/davidREPER.jpg);
   alt: "foto del saxofonista David";
   background-size: cover;
   background-position: 50%;
}

.foto-cristina{
   grid-column: 2/3;
   grid-row: 1/6;
   background: url(../imagen/cristinaREPER.jpg);
   alt: "foto de la violinista Cristina";
   background-size: cover;
   background-position: 50%;
}

.foto-gustavo{
   grid-column: 1/2;
   grid-row: 1/6;
   background: url(../imagen/gustavoREPER.jpg);
   alt: "foto del pianista Gustavo";
   background-size: cover;
   background-position: 80%;
}

 /* -----------------------------------------------
╔═..══════════════════════════════════════════╗

Footer

╚══════════════════════════════════════════..═╝
-----------------------------------------------
 */

 footer{
   display: grid;
   grid-template-columns: repeat(5, 20vw);
   grid-template-rows: repeat(5, 6vh);
   height: 30vh;
   background-color: rgb(94, 94, 141);
 }

 footer .socialmedia{
   grid-column: 2/5;
   grid-row: 2;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   margin-bottom: 20px;

 }
 footer .socialmedia a{
  text-decoration: none;
  color: white;
  letter-spacing: 12px;
 }

.socialmedia a:hover{
   scale: 1.3;
   transition: 0.3s ease;
   opacity: 0.8;
}

 footer .contacto{
   grid-column: 2/5;
   grid-row: 3;
   display: flex;
   align-items: center;
   justify-content: center;
   
 }

 footer .contacto h2{
   font-family: 'Montserrat', sans-serif;
   color: white;
   font-size: 20px;
 }

 footer .boton{
   grid-column: 2/5;
   grid-row: 4;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 footer .boton button{
  padding: 10px;
 }

 .boton .boton-transparente{
   padding: 10px;
   border: 1px white solid;
   border-radius: 4px;
   background-color: rgba(0, 0, 0, 0);
   color: white;
}

.boton .boton-transparente:hover{
   scale: 1.04;
   transition: 0.3s ease;
   background-color: rgba(240, 248, 255, 0.077);
}