@font-face {
    font-family: 'Geomanist';
    src: url('/font/Geomanist-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Geomanist Book';
    src: url('/font/Geomanist-Book.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bariol Regular';
    font-style: normal;
    font-weight: normal;
    src: url('/font/bariol_regular-webfont.ttf') format('woff');
    }

@font-face {
    font-family: 'Bariol Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Bariol Bold'), url('../font/bariol_bold-webfont.ttf') format('woff');
    }    

:root {
    --white: white;
    --lila-lyrics: #9F66DB;
    --lila-line: #DFCCF3;
    --gray-lyric: #676767;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Bariol Regular", sans-serif;
}

a{
    text-decoration: none;
}

/* Estilo de miga de pan */

.nav-crumbs { 
    display: flex;
    align-items: center;
    padding-top: 9px;
    padding-left: 10px;
}

.nav-crumbs p {
    font-family: 'Bariol Regular';
    font-size: 10px;
    color: white;
}

/* Estilos de la portada de la página */

.cover-page {
    position: relative;
    background: url(/img/portada-huella.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 633px;
}

.information {
   display: flex;
   align-items: center;
   flex-direction: column;
   color: var(--white);
}

.information h1 {
    font-size: 31px;
    font-family: 'Geomanist';
    line-height: 34px;
    text-align: center;
    margin-bottom: 6px;
    padding: 25px 70px 0px 70px;
    line-height: 31px;
}

.information span {
   font-weight: 600;
}

.information p {
    font-family: 'Bariol Regular';
    font-size: 13px;
    text-align: center;
    padding: 0px 70px 0px 70px;
    line-height: 150%;
}

.info-container {
  padding: 5% 5%;
}

.title-info {
  font-family: 'Bariol Bold';
  font-size: 16px;
  color: var(--gray-lyric);
}

/* Lista */

li {
  list-style: none;
}

.list-container {
  display: flex;
  margin-top: 7%;
  gap: 3%;
}

.list-container li {
  font-size: 13px;
  color: var(--gray-lyric);
  padding-right: 10%;
}

/* DROPDOWN BUTTONS */

.page1-drop {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}

.drop1 {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px; 
    width: 366px;
    height: 65px;
    background-color: #00B1BB;
    box-shadow: 5px 7px 30px rgba(159, 102, 219, 0.18);
    border-radius: 7px;
    z-index: 2;
    cursor: pointer;
}

.info-drop1{
  position: relative;
  bottom: 35px;
  width: 366px;
  height: 260px;
  background: #FFFFFF;
  box-shadow: 5px 7px 30px rgba(159, 102, 219, 0.18);
  border-radius: 7px;  
  line-height: 19.5px;
  z-index: 1;
  padding: 0 5% 0 5%;
}

.drop1 p {
    font-family: 'Bariol Regular';
    font-size: 13px;
    color: var(--white);
    padding-right: 80px
}

.page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.inscribe-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 7%;
}

button {
  width: 124px;
  height: 30.53px;
  background: #00B1BB;
  border-radius: 4.27119px;
  border: none;
  color: var(--white);
}

button:hover {
  background: var(--white);
  border-radius: 4.27119px;
  border: 2px solid #00B1BB;
  color: #00B1BB;
}

#dropdown-menu {
    display: none;
  }
  
  #dropdown-menu.show {
    display: block;
  }

  .list-characters2 li:nth-child(1) {
    margin-bottom: 5%;
  }

  .list-characters2 li:nth-child(2) {
    margin-bottom: 9%;
  }


/* ///////////////////////////////// 🖥️ Desktop //////////////////////// */

@media (min-width: 1024px) {

  .nav-cover a {
    text-decoration: none;
    font-size: 20px;
    color: var(--lila-lyrics);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Bariol Regular";
    pointer-events: none;
  }

  .nav-crumbs {
    display: none;
  }
  
  .cover-page {
    position: relative;
    background: url(/img/portada-huella.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 634px;
  }
  
  .information {
    display: flex;
    flex-direction: column;
    width: 30%;
    margin-left: 59%;
    padding-top: 11%;
  }

  .information > div{
    display: flex;
    flex-direction: column;
    justify-content: start;
  }
  
  .information h1 {
    font-size: 49px;
    font-family: "Geomanist";
    line-height: 49px;
    text-align: left;
    width: 100%;
    margin-bottom: 6px;
    /* margin-left: -149px; */
    /* padding: 115px 0px 0px 500px; */
    padding: 0;
  }
  
  .information p {
    font-family: "Bariol Regular";
    font-size: 22.72px;
    text-align: start;
    /* padding: 0px 0px 0px 530px; */
    line-height: 29px;
    width: 100%;
    padding: 0;
  }

  .title-info{
    font-size: 25px;
  }

  .list-container li {
    font-size: 20px;
  }

  .list-characters2 li:nth-child(1) {
    margin-bottom: 3.5%;
}

.list-characters2 li:nth-child(2) {
  margin-bottom: 3.5%;
}

  .drop1{
    width: 1262px;
    
    padding: 40px 35px;
  }

  .drop1 p {
    font-size: 25px;
    font-weight: 400;
    padding: 10px;
  }

  #dropdown-menu.show {
    width: 1262px;
    height: 372px;
  }


}