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

/* ----- Menú -------*/

.contenedor {
  width: 99%;
  max-width: 1000px;
  margin: auto;
}

header nav {
  margin-bottom: 4%;
  background-color: rgba(255, 116, 56, 0.49);
  border-radius: 10px;
  height: inherit;
}

header nav ul {
  list-style: none;
  overflow: hidden;
  display: flex;
  height: inherit;
}

header nav ul li {
  float: left;
  width: 16%;
  height: inherit;
  font-family: "Catamaran 900", sans-serif;
  font-size: 90%;
  text-align: center;
  width: 100%;
}

header nav ul li a {
  display: block;
  padding: 20%;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  height: inherit;
}

.menu-fixed {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;
  max-width: 1000px;
}

#home {
  width: 50%;
  height: auto;
}
/* ----- Principal o Home -------*/

#principal {
  background-image: url(https://images.unsplash.com/photo-1460667262436-cf19894f4774?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);
  background-repeat: no-repeat;
  background-size: 100% auto;
}

#root {
  width: 45%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 5%;
  padding-top: 20%;
  overflow: hidden;
}

#m {
  width: 27%;
}

h1 {
  font-size: 1100%;
  color: rgba(255, 255, 255, 1);
  font-family: "Righteous", cursive;
  display: block;
  float: left;
}

#botones-principalbox {
  width: 28%;
  height: auto;
  padding: 1%;
  padding-bottom: 18%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.botones-principal {
  width: 46%;
  padding: 5% 3%;
  margin: 2%;
  background-color: rgba(255, 116, 56, 1);
  color: rgba(255, 255, 255, 1);
  box-shadow: 3px 3px 10px rgba(171, 171, 171, 1);
  font-family: "Catamaran 900", sans-serif;
  font-size: 1em;
  border: none;
  border-radius: 10px;
  float: left;
  text-decoration: none;
  text-align: center;
}
/* ----- ¿Qué es SCML? -------*/
#que-es {
  background-image: url(../images/imagnes_aplicacion/quees.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

#quees-titulo {
  width: 30%;
  height: auto;
  padding: 5%;
  padding-top: 12%;
  margin-left: auto;
  margin-right: auto;
}

#quees-parr {
  color: rgba(255, 255, 255, 1);
  font-family: "Catamaran 500", sans-serif;
  font-size: 1.5em;
  text-align: center;
}

#parrafo {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10em;
  padding-bottom: 15em;
}
/* ----- ¿Cómo funciona? -------*/
#funciona {
  background-image: url(../images/imagnes_aplicacion/funciona.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

#funciona-titulo {
  width: 30%;
  height: auto;
  padding: 5%;
  padding-top: 12%;
  margin-left: auto;
  margin-right: auto;
}

#funciona-parr {
  color: rgba(255, 255, 255, 1);
  font-family: "Catamaran 500", sans-serif;
  font-size: 1em;
  text-align: justify;
}

#parrafo-funciona {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 1em;
}
/* ----- Conciertos -------*/
#conciertos {
  background-image: url(../images/imagnes_aplicacion/cabecera_concietos.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

#coci-titulo {
  width: 30%;
  height: auto;
  padding: 5%;
  padding-top: 12%;
  margin-left: auto;
  margin-right: auto;
}

#cuadros-conciertos {
  overflow: hidden;
}

.cuadro {
  width: 18em;
  height: 18em;
  margin: 6em 4em 5em 4em;
  border-width: 0.4em;
  border-style: solid;
  border-color: rgba(255, 116, 56, 1);
  border-radius: 10px;
  text-align: center;
  padding: 1em;
  float: left;
}
.pista {
  font-family: "Catamaran 700", sans-serif;
  font-weight: 700;
  font-size: 1.5em;
  color: rgba(38, 38, 38, 1);
}
.fech-hr {
  font-family: "Catamaran 700", sans-serif;
  font-weight: 700;
  font-size: 1.5em;
  color: rgba(38, 38, 38, 1);
}

p {
  font-family: "Catamaran 400", sans-serif;
  font-weight: 400;
  font-size: 1.5em;
  color: rgba(38, 38, 38, 1);
}
.cont-boto {
  overflow: hidden;
}
.botones-cuadros {
  width: 46%;
  padding: 5% 3%;
  margin: 13% 2%;
  background-color: rgba(255, 116, 56, 1);
  color: rgba(255, 255, 255, 1);
  box-shadow: 3px 3px 10px rgba(171, 171, 171, 1);
  font-family: "Catamaran 900", sans-serif;
  font-size: 1em;
  border: none;
  border-radius: 10px;
  float: left;
  text-decoration: none;
}
/* ----- Generador de código secreto -------*/
#generador-mensaje {
  background-image: url(../images/imagnes_aplicacion/cabecera_generador.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

#g-men {
  width: 60%;
  height: auto;
  padding: 5%;
  padding-top: 12%;
  margin-left: auto;
  margin-right: auto;
}

.caja-ch {
  width: 5em;
  margin-right: 5%;
  height: 5em;
  border-radius: 10px;
  border-color: rgba(38, 38, 38, 1);
  display: block;
}

#caja-offsetcod {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.5%;
  margin-bottom: 1%;
  font-family: "Catamaran 400", sans-serif;
  display: block;
}
.caja-cipher {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5%;
  margin-bottom: 2%;
  font-family: "Catamaran 400", sans-serif;
  overflow: hidden;
}
/* ----- Agradecimiento -------*/
.desaparecer {
  background-image: url(../images/imagnes_aplicacion/gracias.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  display: none;
}

#gracias-inst {
  width: 60%;
  padding: 21em 5em 15em 5em;
  margin-left: auto;
  margin-right: auto;
}

h3 {
  font-family: "Catamaran 900", sans-serif;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  font-size: 8em;
}

#resp-correo {
  font-family: "Catamaran 100", sans-serif;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  font-size: 1.5em;
}

.boton-ok {
  width: 20%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  padding: 1em 0.5em;
  display: block;
  background-color: rgba(255, 116, 56, 1);
  color: rgba(255, 255, 255, 1);
  box-shadow: 3px 3px 10px rgba(171, 171, 171, 1);
  font-family: "Catamaran 900", sans-serif;
  font-size: 100%;
  border: none;
  border-radius: 10px;
}

/* ----- Tengo un código -------*/
#tengo-codigo {
  background-image: url(../images/imagnes_aplicacion/cabecera.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

#t-codigo {
  width: 30%;
  height: auto;
  padding: 5%;
  padding-top: 12%;
  margin-left: auto;
  margin-right: auto;
}

h2 {
  font-family: "Catamaran 900", sans-serif;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}

.botones {
  width: 10%;
  padding: 1em 0.5em;
  display: block;
  background-color: rgba(255, 116, 56, 1);
  color: rgba(255, 255, 255, 1);
  box-shadow: 3px 3px 10px rgba(171, 171, 171, 1);
  font-family: "Catamaran 900", sans-serif;
  font-size: 100%;
  border: none;
  border-radius: 10px;
  float: left;
  text-decoration: none;
  text-align: center;
}

#caja-offsetde {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.5%;
  font-family: "Catamaran 400", sans-serif;
  display: block;
}

.caja {
  width: 80%;
  margin-right: 5%;
  height: 13em;
  border-radius: 10px;
  border-color: rgba(38, 38, 38, 1);
  float: left;
}

.caja-boton {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1%;
  margin-bottom: 2%;
  overflow: hidden;
  font-family: "Catamaran 400", sans-serif;
}