* {
  font-family: system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
  margin: 0px;
}
.contenedor-gral {
  display: flex;
  flex-flow: column nowrap;
}
.header-contenedor {
  background: #FF0099;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #493240, #FF0099);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #493240, #FF0099); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  

  display: flex;
  flex-flow: column nowrap;
}
.barrasuperior {
  background-color: rgba(255, 255, 255, 0.2);

  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  position: sticky;
  top: 0px;
  align-items: center;
}
.barrasuperior .logo {
  vertical-align: middle;
  padding: 5px 5px 5px 5px;
}
.logo img {
  height: 30px;
}
.logo span {
  background-color: #0cae4a;
  height: 2sm;
}
.barrasuperior .links {
  padding: 5px 20px 5px 18px;
  border: 0px solid #ccc;
  border-radius: 20px;
  margin: 8px;
  background-color: #222;
  color: #fff;
  font-weight: bold;
  height: 1.5em;
}
.barrasuperior .links:hover {
  background-color: #960909;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}
.contenidoprincipal {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  text-align: center;
  color: aliceblue;
  height: 250px;
}
.contenidoprincipal h1 {
  font-size: 36px;
  padding-bottom: 20px;
}
.contenidoprincipal h1 img {
  width: 1em;
}
.contenidoprincipal h2 {
  font-size: 20px;
}
.section-contenedor {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  padding-top: 0px;
  padding-bottom: 30px;
  align-items: center;
}
.section-contenedor h2{
  padding: 0px 0px 50px 0px;
  text-align: center;
}

.box-enlaces-contenedor {
  padding: 20px;
  border-radius: 20px;
  box-shadow: -2px 3px 20px -7px rgba(0, 0, 0, 0.49);
  -webkit-box-shadow: -2px 3px 20px -7px rgba(0, 0, 0, 0.49);
  -moz-box-shadow: -2px 3px 20px -7px rgba(0, 0, 0, 0.49);
  
}
.footer-contenedor {
  background-color: #ccc;
  flex-flow: row;
  justify-content: center;
  padding: 30px;
  display: flex;
}
.footer-contenedor div img{
  width: 200px
}
/* formulario */
.PhoneInputInput {
  border-radius: 5px;
  background-color: #eee;
  height: 2em;
  border: 0px;
  margin-top: 5px;
  width: 250px;
}
.PhoneInputInput:focus-visible{
  
  outline: 1px solid #007aeb;
  
}

.telefono{

  width: 100%
}

.formMensaje,
.formLink {
  display: flex;
  flex-flow: column;
}
.walinker-contenedor{

  padding: 10px
}
#form-contenedor {
  display: flex;
  
}

.formMensaje span {
  font-size: 0.8em;
  color: #888;
  padding: 5px;
}
.textAreaContenedor{
  width: 100%;
  display: flex;
}
#form-contenedor textarea {
  border-radius: 5px;
  background-color: #eee;
  border: 0px;
  height: 20em;
  padding: 10px;
  width: 100%
}
#form-contenedor textarea:focus-visible{
  outline: 1px solid #007aeb;
}

.formLink span {
  font-size: 0.8em;
  color: #888;
  padding: 5px;
}
.formLink input {
  border-radius: 5px;
  background-color: #eee;
  height: 2em;
  border: 0px;
  color: #444;
  padding: 0px 10px 0px 10px;
  margin: 5px;
}
.formLink input:focus-visible{
  outline: 1px solid #007aeb;
}

.emojiPicker {
  padding: 10px;
  width:100%
}

.formTelefono span {
  font-size: 0.8em;
  color: #888;
  padding: 5px;
  
}

/* BOTONES */

.botonesLink {
  display: flex;
  flex-flow: column;
}
.btn-CopiarLink,
.btn-EnviarMensaje {
  border: 0px #21984f solid;
  border-radius: 10px;
  color: #fff;
  height: 3em;
  font-weight: bold;

  margin: 5px 0px 0px 0px;
  background-color: #0cae4a; /* fallback for old browsers */
  font-size: medium;
}

.btn-CopiarLink:hover,
.btn-EnviarMensaje:hover {
  background-color: #222;
  cursor: pointer;
  transition: 0.5s;
}


@media only screen and (max-width: 700px) {
  #form-contenedor {
    display: flex;
    flex-flow: column-reverse;
    
  }
}
@media only screen and (max-width: 700px) {
  .section-contenedor h2{
    padding: 0px 20px 20px 20px;
    text-align: center;
    font-size: medium;
  }
}
@media only screen and (max-width: 400px) {
  .walinker-contenedor{

    padding: 20px
  }
  .emojiPicker{
    padding: 20px
  }
}