*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: azure;
    /* background-color: black; */

    /* tipografia family styles */
    /* font-family: 'Cinzel', serif; */
    /* font-family: 'Ysabeau', sans-serif; */
}

body{
    font-family: 'Ysabeau', sans-serif; 
}
h1{
    font-family: 'Cinzel', serif;
    font-size: 2.5vw;
}
h2{
    font-family: 'Cinzel', serif;
    font-size: 6vw;
}
h3{
    font-family: 'Cinzel', serif;
    font-size: 10vw;
}
/* AGREGRAR EN LOS DEMÁS */
h4{
    font-family: 'Cinzel', serif;
    font-size: 3vw;
}
/* AGREGRAR EN LOS DEMÁS */
h5{
  font-family: 'Cinzel', serif;
  font-size: 3vw;
}


html{
    scroll-behavior: smooth;
    }
/* AGREGRAR EN LOS DEMÁS */
.container{
  margin: 0 auto;
  width: 90%;
  max-width: 1200px;
  overflow: hidden;
}

/* AGREGRAR EN LOS DEMÁS */
.hero{
    display: flex;
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.215)),
    url(imagesfin/main/encabezado.png);
    width: 100%;
    height: 90vh;
    background-position: center;
    background-size: cover;
    margin: 0;
}
.nav{
  --state-close: scale(0);
  --state-hamburguer: scale(1);
  --state-menu: translate(-100%);
padding: 40px 0;
margin: 50px;
display: grid;
justify-content: space-between;
align-items: top;
grid-template-columns: repeat(2, max-content);
}
.nav:target{
  --state-menu: translate(0);
  --state-close: scale(1);
  --state-hamburguer: scale(0);
}
.nav_logo{
  font-size: 2.5rem;
  z-index: 1;
}
.nav_link{
  display: none;
}
.nav_hamburguer,
.nav_close{
  cursor: pointer;
  grid-column: -2/1;
  grid-row: 1/2;
  transition: .4s transform;
}
.nav_hamburguer{
  transform: var(--state-hamburguer);
}
.nav_close{
  transform: var(--state-close);
}
.nav_icon{
  width: 40px;
}
.nav_item{
  list-style: none;
}
.nav_links{
  background-color: rgba(30, 30, 30, 0.882);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;

  display: grid;
  align-content: center;
  gap: 2em;
  padding-left: 5%;

  transform: var(--state-menu);
  transition: .3s transform;

}
.nav_link{
  display: block;
  color: azure;
  text-decoration: none;
  font-size: 1.2rem;
  letter-spacing: 2px;
}


#s1_intro_main{
    max-width: 1400px;
    min-height: 500px;
    box-sizing: border-box;
    padding: 0;
    margin: 0 auto;
    font-size: 1.1vw;
    line-height: 2em;
    text-align: center;
    /* background-color: rgb(233, 13, 97); */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 24px;
}
#intd1{
    background-color: rgb(213, 100, 70);
    padding: 40px;
}
#intd2{
    /* background-color: rgb(5, 81, 38); */
    background-image: url(imagesfin/main/picsquare.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}


#s2_frase_main{
    display: flex;
    width: 100%;
    height: 65vh;
    background-image: url(../imagesfin/main/frase.png);
    overflow: hidden;
    background-position: center;
    background-size: cover;
}


#s3_caract_main_d1{
    display: flex;
    width: 100%;
    max-height: 50vh;
    padding: 20px;
    margin: 0 auto;
    font-size: 1.1vw;
    line-height: 1.5em;
    text-align: center;
    column-gap: 30px;
}
#s3_caract_main_d1 img{
    width: 100%;
}

#s4_artistprev_main{
    max-width: 1800px;
    min-height: 715px;
    box-sizing: border-box;
    padding: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0px;
    /* background-color: blueviolet; */
}
#artprevd1{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-image: url(imagesfin/main/artistprevwith.png);
    background-position: 80%;
    background-size: cover;
}
#artprevd2{
    /* background-color: rgb(86, 2, 55); */
    padding: 48px;
    margin: 0 auto;
    font-size: 2.4vw;
    text-align: center;
}

#s5_galeriaprev_main{
    max-width: 1800px;
    min-height: 500px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 140px;
    background-image: url(imagesfin/main/glaeriaprev.png);
    background-position: left;
    background-size: cover;
    /* background-color: blue; */
}
#galprevd1{
    display: flex;
    text-align: center;
    flex-direction: column;
    text-align: center;
    width: 50%;
    justify-content: flex-end;
}
/* #galprevd2{
    padding: 20px 65px;
    display: flex;
    justify-content: flex-end;  
} */


#s6_spootify_main{
    padding: 0;
    margin: 0 auto;
    max-width: 82%;
}
/* AGREGRAR EN LOS DEMÁS */
.btn {
    font-family: 'Cinzel', serif;
    margin: 0 auto;
    border-radius: 90px;
    letter-spacing: 1.25px;
    background: initial;
    block-size: 50px;
    display: block;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    line-height: 50px;
    border: 2px solid  white;
    font-weight: bold;
    padding: 0 1.5em;
  }
/* AGREGRAR EN LOS DEMÁS */

.form {
    max-inline-size: 1240px;
    margin: 0 auto;
    padding: 30px;
  }
  /* AGREGRAR EN LOS DEMÁS */

  .form label {
    display: block;
    margin-block-start: 1em;
    margin-block-end: .5em;
    padding-inline-start: .5em;
  }
  /* AGREGRAR EN LOS DEMÁS */

  .form label span {
    color: #dc960b;
  }
  /* AGREGRAR EN LOS DEMÁS */

  .form input, .form textarea {
    box-sizing: border-box;
    width: 100%;
    font-size: 1rem;
    padding: .8em;
    border-radius: .5em;
    border: 1px solid #c65b09;
  }
  /* AGREGRAR EN LOS DEMÁS */

  .form textarea {
    margin-block-end: 2em;
    color: rgb(108, 103, 103);
    font-family: 'Ysabeau', sans-serif; 
  }
  /* AGREGRAR EN LOS DEMÁS */

  input::-webkit-input-placeholder {
    color: #867d7d88;
  }
  /* AGREGRAR EN LOS DEMÁS */

.contact {
    margin-block-end: 0em;
  }
  /* AGREGRAR EN LOS DEMÁS */

  #trucazo {
    opacity: 100%;
  }

  /* FOOTER */
  footer{
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 2rem 8%;
    background-color: #313131;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .logo{
    /* height: 25px 25px 25px 25px; */
    margin: 0 auto;
    margin-bottom: 1rem;
  }
  .social_icons_contenedor{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }
  .social_icon{
    height: 100px;
    width: 100px;
    /* border-radius: 50px;
    border: 1px solid honeydew; */
    background-image: url(imagesfin/behance.png);
    background-position: center;
    background-size: 40%;
    background-repeat: no-repeat;
    margin: 1rem;
  }
  .social_icon:hoover{
    background-color: blue;
    filter: invert(1);
  }
  .social_icon:nth-of-type(2){
    background-image: url(imagesfin/linkedin.png);
  }
  .social_icon:nth-of-type(3){
    background-image: url(imagesfin/instagram.png);
  }
  .social_icon:nth-of-type(4){
    background-image: url(imagesfin/artstation.png);
  }
  .progra_web{
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;  
}

/* BONTON UP */
.gotopbtn{
  position: fixed;
  width: 50px;
  height: 50px;
  background: #666666;
  border-radius: 30px;
  bottom: 40px;
  right: 50px;

  text-decoration: none;
  text-align: center;
  line-height: 50px;
  color: white;
  font-size: 22px;
}


@media screen and (max-width: 600px) {
  .hero{
    width: 100%;
    height: 40vh;
    background-position: center;
    background-size: cover;
    margin: 0;
  }
  #s1_intro_main{
    max-width: 400px;
    min-height: 100px;
    box-sizing: border-box;
    padding: 0;
    margin: 0 auto;
    font-size: 1vw;
    line-height: 1em;
    text-align: center;
    /* background-color: rgb(233, 13, 97); */
    display: grid;
    grid-template-columns: repeat(1fr,2fr);
    grid-template-areas: 
    "intd1"
    "intd2";
    grid-gap: 10px;
  }
  #s2_frase_main{
    width: 600px;
    height: 40vh;
    overflow: scroll;
    box-sizing:border-box;
    padding-bottom: 0;
}
#s3_caract_main_d1{
  padding-bottom: 0;
}
#artprevd1{
  display: none;
}
#artprevd2{
padding-left: 150px;
padding-bottom: 0;
}
.social_icons_contenedor{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
}