* {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: var(--color3);
  }
  
  :root {
    --color1: hsla(240,100%,20%,0.6);
    --color2: hsla(205,100%,50%,0.6);
    --color3: hsla(60,100%,50%,1);
    --color4: hsla(205,100%,50%,0.4);
    --color5: hsla(60,75%,35%,0.4);
    --color6: hsla(240,100%,50%,0.7);
    --color7: hsla(30,100%,50%,0.7);
    
  
    --width1: 1000px;
    --width2: 800px;
    --width3: 600px;
    --width4: 550px;
    --width5: 380px;
    --width6: 450px;
    --width7: 120px;
    --width8: 300px;
    
    }
  
.imagen {
  max-width: 100%; }

.im2 {
  border: 2px solid #fff; }

.espacio {
  width: 50px;
  height: 50px;
  padding: 1rem 0; }

header {
  background: var(--color2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 95%;
  margin: 0 auto;
  padding: 1rem; }

/*...........menu...........*/
nav {
  margin: 0.5em 0; }

.menu {
  list-style: none;
  background: var(--color2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  width: 95%;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.menu li {
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
  padding-left: 3px;
  text-align: center;
  line-height: 2; }

.menu a {
  font-size: 1.3rem;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; 
  text-shadow: #000 2px 2px 3px;}

.menu a:hover {
  background:var(--color3);
  display: block;
  color:red;
  font-size: 1.1em; }

.fixed {
  text-shadow: 1px 1px 1px #000;
  position: fixed;
  margin: 0 auto;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 50;
  max-width: 100%;}

.fixed li {
  background: var(--color1); }

.fixed a {
  color: var(--color3); }
  

/*CONFIGURACION DE TEXTOS */
.txt-encabezado {
  margin: 0 2rem; 
  
  }

.titulo1 {
  text-align: center;
  font-size: 1.7rem;
  margin: 0 2rem;
  text-shadow: #000 2px 2px 3px; }
.titulo {
  font-size: 1.4rem;
  margin: 0 2rem;
  text-shadow: #000 2px 2px 3px; }

.subtitulo {
  margin: 0 2rem;
  text-shadow: #000 2px 2px 3px;
  text-align: center;
  padding: 1rem 0; }

.txt_blanco{
  text-shadow: #000 2px 2px 3px;
  text-align: center;
  color: #fff;
  font-size: 1.3em;
  margin-top: 1rem;
}

.txt-1 {
  font-size: 1.5rem;
  padding: 1rem;
  }
.txt-2 {
  font-size: 1rem;
  
  }

/*CONTENIDOS*/
[class*="contenido"] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 auto;
  padding: 0.5rem 2rem 0 0;
  width: 95%;
  
  }

[class*="caja"] {
  background: var(--color4);
  border-radius: 0.5em;
  -webkit-box-shadow: 1px 2px 2px #000;
  box-shadow: 1px 2px 2px #000;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  margin: 1em auto;
  text-align: center;
  max-width: 100%;
  padding-bottom: 1em;}

[class*="caja"]:hover {
  background: var(--color5);
  -webkit-transform: scale(1.02);
  -ms-transform: scale(1.02);
  transform: scale(1.02); }

.caja1 {
  width: var(--width1); }
  
 .caja2 {
    width: var(--width2); }

.caja3 {
  width: var(--width3); }

.caja4 {
  width: var(--width4);
   }

.caja5 {
  width: var(--width5);
   }
.caja6 {
  width: var(--width6);
   }
.caja7 {
  width: var(--width7);
  }
.caja8 {
  width: var(--  width8);
  }


/*seccion de CONTACTO Y email*/
.formulario {
  font-size: 1.3em; }

input, textarea {
  padding: 1em 1em;
  margin: 1em 1em;
  max-width: 100%;
  color: #000; }
  input:focus, textarea:focus {
    color: #000;
    background: #ffe04d; }

button {
  font-size: 1rem;
  padding: 0.3em;
  cursor: pointer;
  color: #000; 
  margin: 1em;}

.ir-arriba {
  display: none;
  font-size: 35px;
  position: fixed;
  bottom: 100px;
  right: 10px;
  z-index: 500; }

.ir-arriba:hover {
  cursor: pointer; }

.tarjeta img {
  padding: 1em 1em;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s; }
  .tarjeta img:hover {
    cursor: pointer;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }

.appweb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.5);
  width: 90%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.mrc {
  color: #ffe04d;
  font-size: 0.8rem; }

.boton {
  font-size: 12px; }

.rojo {
  color: red; }
  
  .redes{
    margin: 1em 2em;
  }

  .btn{
    background:hsla(100,20%,90%,1);
    border: 1px solid hsla(100,0%,50%,0.7);
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    padding: 2px 8px;
    color:black;
    /* margin: 0 auto; */
    /* width: 50px; */
}