#intro .infoContent{padding-bottom:80px}
#intro h1{float:left;width:100%;font-weight:300;font-size:90px;color:#7005BD;line-height:63px;margin-bottom:15px;letter-spacing:-4px;text-align:left}
#intro h2{float:left;width:100%;font-weight:300;font-size:70px;line-height:60px;margin-bottom:10px;letter-spacing:-4px;text-align:left;background: #6764F1;background:linear-gradient(to right,#6764F1 0%,#D647F0 50%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#banner{height:360px;background:url("../images/contacto/banner.jpg") 50% 50%;background-size:cover}
#banner .infoContent{position:relative;height:calc(100% - 80px)}
#banner h3{position:absolute;bottom:40px;color:#FFF;font-weight:normal;font-size:50px;text-shadow:2px 2px 6px rgb(16,18,63)}
#datos .infoContent{padding-bottom:80px}
#datos .grid{float:left;width:100%;display:grid;grid-template-columns:calc(32% - 40px) calc(32% - 40px) 36%;grid-template-rows:1fr;gap:40px;grid-auto-flow:row}
#datos span,#datos p{float:left;width:100%;text-align:center}
#datos p{line-height:25px}
#datos h2{margin-bottom:5px}
#areas .infoContent{background:#F6F8FC;padding-bottom:80px}
#areas .grid{float:left;width:calc(100% - 40px);padding:0 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;grid-auto-flow:row}
#areas a{position:relative;float:left;width:100%;max-width:100%;border-radius:0;height:100%;padding:0;line-height:inherit;background:none;color:inherit;font-size:inherit;font-weight:200;border:1px solid #D7DDE7}
#areas a:hover{background:#5F59F8;transition:all ease-in-out 0.5s}
#areas a span{float:left;width:100%;position:relative}
#areas a:hover span:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(95,89,248,0.15);transition:all ease-in-out 0.5s}
#areas a p{float:left;width:calc(100% - 40px);padding:20px;text-align:center;border-top:2px solid #5F59F8}
#areas a:hover p{color:#FFF;transition:all ease-in-out 0.5s}
#tienes .grid{float:left;width:840px;max-width:100%;display:grid;grid-template-columns:248px calc(100% - 348px);grid-template-rows:1fr;gap:100px;grid-auto-flow:row;margin-left:50%;transform:translateX(-50%);align-items:center}
#tienes .grid li{position:relative;float:left;width:calc(100% - 67px);margin-bottom:15px;padding-left:67px}
#tienes .grid li span{position:absolute;top:0;left:0;width:26px;height:100%;border-right:1px solid #9F9FBF;padding-right:20px}
#text p{font-size:46px;line-height:46px;font-weight:400;color:#47476C;text-align:center}
/*RESPONSIVE*/
@media (max-width:1680px){
#intro h1{font-size:75px;line-height:53px}
#intro h2{font-size:60px;line-height:50px}
#banner{height:320px}
#banner h3{font-size:40px}}
@media (max-width:1540px){
#intro .infoContent{padding-bottom:40px}}
@media (max-width:1440px){
#intro h1{font-size:65px;line-height:46px;margin-bottom:5px}
#intro h2{font-size:50px;line-height:42px}
#banner{height:280px}
#banner h3{font-size:36px}
#tienes .grid{width:700px;grid-template-columns:190px calc(100% - 270px);gap:80px}
#tienes .grid .img{height:150px}
#tienes .grid .img img{max-height:100%}
#text p{font-size:40px;line-height:42px}}
@media (max-width:1366px){
#banner{height:240px}
#datos .grid{grid-template-columns:300px 400px calc(100% - 780px)}
#areas a p{width:calc(100% - 30px);padding:15px;line-height:26px}}
@media (max-width:1260px){
#datos .grid{grid-template-columns:250px 400px calc(100% - 730px)}
#datos h2{font-size:24px;margin-bottom:0}
#datos p{line-height:25px;font-size:20px;letter-spacing:-1px}}
@media (max-width:1180px){
#text p{font-size:36px;line-height:38px}}
@media (max-width:1140px){
#datos .grid{grid-template-columns:200px 340px calc(100% - 620px)}
#datos span{height:80px}
#datos span img{max-height:100%}
#areas .grid{gap:30px}
#areas a p{width:calc(100% - 20px);padding:10px}}
@media (max-width:1024px){
#banner{height:200px}
#banner h3{bottom:0;font-size:30px}
#datos .grid{grid-template-columns:180px 340px calc(100% - 600px)}}
@media (max-width:980px){
#datos .grid{grid-template-columns:150px 340px calc(100% - 570px)}}
@media (max-width:940px){
#datos .grid{grid-template-columns:repeat(1,1fr);gap:40px}
#areas .grid{grid-template-columns:repeat(2,1fr);width:640px;max-width:calc(100% - 40px);margin-left:50%;transform:translateX(-50%)}
#tienes .grid{width:620px;grid-template-columns:190px calc(100% - 230px);gap:40px}}
@media (max-width:940px) and (min-width:500px){
#datos .grid{width: 460px;max-width: 100%;margin-left: 50%;transform: translateX(-50%)}
#datos span{width:80px;margin-right:40px}
#datos h2,#datos p{width:calc(100% - 120px);text-align:left}}
@media (max-width:720px) {
#tienes .grid{width:560px;grid-template-columns:150px calc(100% - 190px);gap:40px}
#tienes .grid li{width:calc(100% - 47px);padding-left:47px}
#tienes .grid li span{padding-right:10px}}
@media (max-width:700px){
#banner h3{font-size:28px;line-height:24px}}
@media (max-width:680px){
#intro h1{font-size:52px;line-height:40px}
#intro h2{font-size:42px;line-height:38px}
#text p{font-size:30px;line-height:32px}}
@media (max-width:620px){
#tienes .grid{grid-template-columns:repeat(1,1fr);width:360px}
#tienes .grid .img{text-align:center}}
@media (max-width:520px){
#intro h1{font-size:46px;line-height:34px}
#intro h2{font-size:38px;line-height:34px;margin-bottom:4px}}
@media (max-width:500px){
#areas .grid{grid-template-columns:repeat(1,1fr);width:260px}}
@media (max-width:480px){
#text p{font-size:26px;line-height:28px}}
@media (max-width:420px){
#tienes .grid li{line-height:20px}}
@media (max-width:380px){
#datos p{font-size:18px;letter-spacing:-1.6px}}