@font-face {
  font-family: "MixYonder";
  src: url("../fonts/MixYonder.woff2") format('woff2'),
       url("../fonts/MixYonder.woff") format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "LibreFranklin";
  src: url("../fonts/librefranklin-medium-webfont.woff2") format("woff2"),
  url("../fonts/librefranklin-medium-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
  background-image: url("../assets/img/palabras_suelo.png"),
    url("../assets/img/Ami.png");
  background-size: auto 50px, 75px;
  background-repeat: no-repeat, no-repeat;
  background-position: 50% calc(100% - 50px), 85px calc(100% - 50px);
  padding-top: 65px;
  min-height: 100vh;
  position: relative;
  padding-bottom: 115px;
}

.roboto {
  font-family: "Roboto";
  font-size: 0.85em;
}

#header {
  padding-top: 25px;
  padding-bottom: 0;
}

#header span {
  font-family: "MixYonder";
  font-size: 2em;
  color: #3e4342;
  padding-bottom: 0;
}

#contenedor {
  /* 50px del footer, 65px del navbar, 48px del header y 25 de su padding */
  min-height: calc(100vh - 50px - 65px - (48px + 25px));
  padding-top: 51px;
}

div.bloque-curso.ep1 div.titulo-curso,
div.bloque-curso.ep1 a.bloque-proyecto div.titulo-proyecto {
  background-color: #e46953;
}

div.bloque-curso.ep1 a.bloque-guia div.img-guia {
  background-image: url("../assets/img/icono_guia2.png");
}

div.bloque-curso.ep2 div.titulo-curso,
div.bloque-curso.ep2 a.bloque-proyecto div.titulo-proyecto {
  background-color: #70b1c8;
}

div.bloque-curso.ep2 a.bloque-guia div.img-guia {
  background-image: url("../assets/img/icono_guia3.png");
}

div.bloque-curso.ep3 div.titulo-curso,
div.bloque-curso.ep3 a.bloque-proyecto div.titulo-proyecto {
  background-color: #b9bb15;
}

div.titulo-proyecto-negro {
  background-color: #3F4341;
}

div.bloque-curso.ep3 a.bloque-guia div.img-guia {
  background-image: url("../assets/img/icono_guia1.png");
}

div.bloque-curso div.titulo-curso {
  margin-top: 1rem;
  width: 85%;
  border-radius: 4px;
  font-size: 1.25rem;
  text-align: center;
}

div.bloque-curso div.titulo-curso span {
  color: white;
  font-family: "MixYonder";
  font-size: 1.6em;
}

.bloqueado {
  opacity: 0.5;
  cursor: not-allowed;
}

div.bloque-curso a.bloque-guia.bloqueado {
  opacity: 0.5;
  cursor: not-allowed;
}

div.bloque-curso .bloque-proyecto {
  text-decoration: none;
}

div.bloque-curso .bloque-proyecto img.portadaProyectos {
  width: 90%;
  position: relative;
  z-index: 1;
  box-shadow: 7px -6px 13px 0px lightgray;
  border-radius: 8px;
}

div.bloque-curso .bloque-proyecto div.titulo-proyecto {
  margin-top: -0.25rem;
  border-radius: 4px;
}

div.bloque-curso .bloque-proyecto div.titulo-proyecto span {
  color: white;
  font-size: 1.4em;
}

div.bloque-curso .bloque-proyecto div.titulo-proyecto-negro {
  margin-top: -0.25rem;
  border-radius: 4px;
}

div.bloque-curso .bloque-proyecto div.titulo-proyecto-negro span {
  color: white;
  font-size: 1.4em;
}

div.bloque-curso a.bloque-guia {
  text-decoration: none;
  margin-top: 1.25rem;
  width: auto;
  position: relative;
}

div.bloque-curso img.bloque-guia {
  text-decoration: none;
  margin-top: 1.25rem;
  width: auto;
  position: relative;
}

div.bloque-curso a.bloque-guia div.guia-proyecto {
  background-color: #3e4342;
  border-radius: 4px;
  padding: 0.15rem 0.5rem 0.15rem 1.5rem;
}

div.bloque-curso a.bloque-guia div.guia-proyecto span {
  color: white;
  font-size: 0.75rem;
}

div.bloque-curso a.bloque-guia div.img-guia {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  /* z-index: 3; */
}

.bannerPersonajes {
  box-shadow: 1px 1px 10px gray;
  border-radius: 5px;
}