/* GLOBALES */
:root {
      --oscuro: #333333;
      --azul_cielo: #118dc7;
      --blanco: #f7fbfe;
      --verde: #024751;
      --limon: #00d47e;
      --color-texto: #333333;
      --fuente_principal: "Manrope", serif;
}
html,
body {
    box-sizing: border-box;
    overflow-x: hidden;
    background: hsla(63, 17%, 46%, 1);

    background: linear-gradient(135deg, hsla(63, 17%, 46%, 1) 1%, hsla(64, 10%, 34%, 1) 98%);
    
    background: -moz-linear-gradient(135deg, hsla(63, 17%, 46%, 1) 1%, hsla(64, 10%, 34%, 1) 98%);
    
    background: -webkit-linear-gradient(135deg, hsla(63, 17%, 46%, 1) 1%, hsla(64, 10%, 34%, 1) 98%);
    
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#878961", endColorstr="#5E5F4E", GradientType=1 );
    padding: 1.5!important;
    font-family: "Manrope", serif;;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
h1, h2, h3, h4, h5, h6 {
      color: var(--oscuro);
      font-size: 1rem;
}
h3.nombre {
      font-size: 1.6rem;
}
span.empresa {
      color: #727272;
}
p.telefono {
      color: #727272!important;
}
a {
      text-decoration: none;
}
a:hover {
      text-decoration: none;
}
ul {
      margin: 0!important;
      padding: 0!important;
}
ul li {
      list-style: none!important;
}
div.card {
      max-width: 35%;
      margin: 0 auto;
}

div.header {

background: hsla(206, 78%, 98%, 1);
    background: linear-gradient(90deg, hsla(206, 78%, 98%, 1) 0%, hsla(0, 0%, 92%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(206, 78%, 98%, 1) 0%, hsla(0, 0%, 92%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(206, 78%, 98%, 1) 0%, hsla(0, 0%, 92%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#F7FBFE", endColorstr="#EBEBEB", GradientType=1 );
    font-family: var(--fuente_principal);
}

div.foto img {
      position: absolute;
      top: -5%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      max-width: 30%;
      display: block;
      margin: 0 auto;
      border-radius: 50%;
      -webkit-box-shadow: 0px 0px 15px -7px rgba(0,0,0,0.75);
      -moz-box-shadow: 0px 0px 15px -7px rgba(0,0,0,0.75);
      box-shadow: 0px 0px 15px -7px rgba(0,0,0,0.75);
}
div.header img {
      max-width: 35%;
}

div.header, div.body {
      background-color: var(--blanco);
      border-radius: 50px;
      -webkit-box-shadow: 0px 0px 15px -7px rgba(0,0,0,0.75);
      -moz-box-shadow: 0px 0px 15px -7px rgba(0,0,0,0.75);
      box-shadow: 0px 0px 15px -7px rgba(0,0,0,0.75);
      margin-bottom: 1rem;
      text-align: center;
}
div.body {
      padding: 2rem 2rem 1.5rem 2rem;
      margin-top: 1rem;
      position: relative;
}
div.header {
      padding: 3rem 0 5.5rem 0;
}

div.enlaces div {
      background-color: var(--blanco);
      border-radius: 50px;
      -webkit-box-shadow: 0px 0px 15px -7px rgba(0,0,0,0.75);
      -moz-box-shadow: 0px 0px 15px -7px rgba(0,0,0,0.75);
      box-shadow: 0px 0px 15px -7px rgba(0,0,0,0.75);
      padding: .5rem 2rem;
      margin-bottom: 1rem;
}
/* div.enlaces div i {
      color: var(--oscuro);
} */

li h3 {
      font-size: 1.8rem;
      margin: 0rem;
      padding-top: 3.5rem;
}
li p.cargo {
      margin: 0;
      font-size: 1rem;  
      color: #393939;
}
li p.descripcion {
      color: #393939;
}
li p.telefono {
      color: #393939;
}
li span.empresa {
      margin: 0;
      font-size: .8rem;  
}

div.enlaces a div.enlace {
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: .5s all ease-in-out;
      color: var(--oscuro);
}
div.enlaces a div.enlace, div.enlaces div.enlace {
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: .5s all ease-in-out;
      color: var(--oscuro);
      cursor: pointer;
}
div.enlaces a div.enlace:hover, div.enlaces div.enlace:hover {
      background-color: var(--oscuro);
      color: var(--blanco)!important;
}
div.enlaces a div.enlace:hover {
      background-color: var(--oscuro);
      color: var(--blanco)!important;
}

hr {
      margin: 2rem auto;
      width: 200px;
}

div.redes {
      padding: 1rem 8rem;
}

div.redes {
      display: flex;
      align-items: center;
      justify-content: space-between;
}

div.redes a div {
      background-color: var(--blanco);
      padding: 1rem;
      border-radius: 10px;
      color: var(--oscuro);
      -webkit-box-shadow: 0px 0px 15px -7px rgba(0,0,0,0.75);
      -moz-box-shadow: 0px 0px 15px -7px rgba(0,0,0,0.75);
      box-shadow: 0px 0px 15px -7px rgba(0,0,0,0.75);
      min-width: 50px;
      text-align: center;
}
div.redes a div:hover {
      transition: .5s all ease-in-out;
      transform: scale(1.1);
}
div.redes div i {
      font-size: 1.3rem;
}

div.credit {
      text-align: center;
      font-family: var(--fuente_principal);
      font-size: .9rem;
      padding: 1rem 0;
      color: var(--blanco);
}
div.credit a {
      color: var(--limon);
}


@media (max-width: 575px) {

      body {
            background: hsla(63, 17%, 46%, 1);

    background: linear-gradient(135deg, hsla(63, 17%, 46%, 1) 1%, hsla(64, 10%, 34%, 1) 98%);
    
    background: -moz-linear-gradient(135deg, hsla(63, 17%, 46%, 1) 1%, hsla(64, 10%, 34%, 1) 98%);
    
    background: -webkit-linear-gradient(135deg, hsla(63, 17%, 46%, 1) 1%, hsla(64, 10%, 34%, 1) 98%);
    
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#878961", endColorstr="#5E5F4E", GradientType=1 );
            padding: .5rem 0!important;
        }

      h1, h2, h3, h4, h5, h6 {
            font-size: 1rem;
      }
      h3.nombre {
            font-size: 1.6rem;
      }
      span.empresa {
            color: #727272;
      }
      div.card {
            max-width: 95%;
      }
            
      div.foto img {
            position: absolute;
            top: -5%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            max-width: 35%;
      }
      div.header img {
            max-width: 70%;
      }
      
      div.header, div.body {
            margin-bottom: 1rem;
            text-align: center;
      }
      div.body {
            padding: 2rem 2rem 1.5rem 2rem;
            margin-top: 1rem;
      }
      div.header {
            padding: 3rem 0 5.5rem 0;
      }
      
      div.enlaces div {
            padding: .5rem 2rem;
            margin-bottom: 1rem;
      }

      li h3 {
            font-size: 1.8rem;
            margin: 0rem;
            padding-top: 3.5rem;
      }
      li p.cargo {
            margin: 0;
            font-size: 1rem;  
      }
      li span.empresa {
            margin: 0;
            font-size: .8rem;  
      }
            
      hr {
            margin: 2rem auto;
            width: 200px;
      }
      
      div.redes {
            padding: 1rem 4rem;
      }
            
      div.redes a div {
            padding: 1rem;
            border-radius: 10px;
            min-width: 50px;
            text-align: center;
      }
      div.redes div i {
            font-size: 1.3rem;
      }
      
      div.credit {
            text-align: center;
            font-size: .9rem;
            padding: 1rem 0;
      }

}