html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: #004C68;
  background-image: url(../imgs/bg.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  height: 100vh;
}

div#contenedor {
  width: 90%;
  height: 100vh;
  padding: 8% 2%;
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  align-items: center;
}

img#logo {
  width: 100%;
}

p {
  margin-top: 10%;
  text-align:justify;
}

a {
  margin-top: 5%;
  display: inline-block; /* O 'block' si quieres que ocupe todo el ancho */
  width: 80px; /* Ancho del enlace */
  height: 80px; /* Alto del enlace */
  border-radius: 80px;
  background-color: white;
  background-image: url('../imgs/download.png'); /* Imagen de fondo */
  background-size: 80%; /* Ajusta la imagen al tamaño del enlace */
  background-position: center; /* Centra la imagen de fondo */
  text-decoration: none; /* Opcional: quita el subrayado */
  color: white; /* Color del texto del enlace */
  text-align: center; /* Centra el texto horizontalmente */
  line-height: 80px; /* Centra el texto verticalmente */
  font-size: 0;
}


/*////////////////////////////////////////////////////////////////////*/
@media (min-width: 640px) {
  div#contenedor {
    width: 80%;
    padding: 0;
  }

  img#logo {
    width: 90%;
  }
}
/*////////////////////////////////////////////////////////////////////*/
@media (min-width: 768px) {
   body {
     background-image: url(../imgs/bg.jpg);
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
     align-items: center
   }

   div#contenedor { width: 60%; }

   img#logo {
     width: 80%;
   }
}
/*////////////////////////////////////////////////////////////////////*/
@media (min-width: 1024px) {
  body {
    background-image: url(../imgs/bg.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-size: 85%;
    align-items: center;
  }

  div#contenedor {
    width: 60%;
    padding: 5%;
  }

  img#logo {
     width: 75%;
  }
 }
/*////////////////////////////////////////////////////////////////////*/
 @media (min-width: 1280px) {
   body {
     background-image: url(../imgs/bg.jpg);
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
     font-size: 80%;
     align-items: center;
   }

   div#contenedor {
     max-width: 50%;
     height: auto;
     padding: 0;
   }

   img#logo {
      width: 75%;
   }
 }
/*////////////////////////////////////////////////////////////////////*/
 @media (min-width: 1600px) {
   body {
     background-image: url(../imgs/bg.jpg);
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
     font-size: 70%;
     align-items: center;
   }

   div#contenedor {
     width: 55%;
     padding: 1% 0;
   }

   img#logo {
     width: 90%;
   }
 }