/* B O D Y  */

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
}

/* H E A D E R */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 60px;
  padding: 10px;
  background-color: #7f19fc0c;
  width: 100%vh;

  
}

.texto-logo {
  display: flex;
  align-items: center;
  border-bottom: 2px solid #B57bda;
  
}

.logo {
  display: flex;
}

.logo img {
  margin-top: 10px;
  display: flex;
  width: 40px;
  height: 40px;
}

a {
  display: flex;
  text-decoration: none;
  color: #2f2e40;
}

nav {
  display: flex;
  align-items: center;

}

.nav-link {
  justify-items: center;
  padding-right: 25px;
  font-size: 18px;
  color: #2f2e40;
  font-weight: 600;

}
nav span {
  color: inherit;
  justify-items: center;
  font-size: 18px;
  color: #2f2e40;
  font-weight: 600;
  position: relative;
  transition: color 0.1s, background-color 0.1s, padding 0.2s ease-in;
  padding: 16px 0px;
  letter-spacing: 1px;
  line-height: 16px;
 

}

nav span::before {
  content: "";
  bottom: 10px;
  transform: scaleX(0);
  transition: color 0.1s, transform 0.2s ease-out;
  position: absolute;
  background-color: #B57bda;
  display: block;
  left: 0;
  height: 2px;
  width: 100%;

}

nav span:hover::before,
.nav span:focus::before {
  transform: scaleX(1);
  
}

/* 
/* F I N     H E A D E R */


/* S E C T I O N   1 */

.section1{
  width: 100%;
  height: 600px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1025%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(47%2c 46%2c 64%2c 1)'%3e%3c/rect%3e%3cpath d='M116.917%2c267.503C166.267%2c265.494%2c200.79%2c222.176%2c221.854%2c177.502C239.702%2c139.648%2c234.805%2c97.172%2c214.473%2c60.592C193.44%2c22.751%2c160.107%2c-8.291%2c116.917%2c-11.293C68.271%2c-14.674%2c18.062%2c3.553%2c-7.345%2c45.174C-33.695%2c88.341%2c-28.611%2c142.545%2c-3.937%2c186.692C21.403%2c232.031%2c65.02%2c269.615%2c116.917%2c267.503' fill='rgba(181%2c 123%2c 218%2c 0.33)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M74.138%2c175.136C110.265%2c174.534%2c145.233%2c156.862%2c161.842%2c124.774C177.378%2c94.759%2c166.413%2c59.874%2c148.698%2c31.091C132.01%2c3.976%2c105.968%2c-16.958%2c74.138%2c-17.725C41.015%2c-18.523%2c10.916%2c-0.583%2c-6.916%2c27.342C-26.364%2c57.797%2c-36.159%2c96.103%2c-18.783%2c127.786C-0.867%2c160.455%2c36.884%2c175.757%2c74.138%2c175.136' fill='rgba(181%2c 123%2c 218%2c 0.33)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M43.596%2c108.713C69.582%2c110.306%2c97.516%2c104.742%2c111.765%2c82.953C127.185%2c59.374%2c126.183%2c28.446%2c112.012%2c4.096C97.924%2c-20.111%2c71.553%2c-35.872%2c43.596%2c-34.182C17.958%2c-32.632%2c-0.313%2c-11.364%2c-11.849%2c11.585C-22.089%2c31.955%2c-22.793%2c55.6%2c-11.49%2c75.4C-0.088%2c95.374%2c20.64%2c107.306%2c43.596%2c108.713' fill='rgba(181%2c 123%2c 218%2c 0.33)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1373.911%2c118.373C1399.734%2c117.741%2c1424.659%2c104.996%2c1436.388%2c81.982C1447.266%2c60.638%2c1438.818%2c36.087%2c1426.238%2c15.7C1414.431%2c-3.435%2c1396.33%2c-17.546%2c1373.911%2c-19.271C1347.879%2c-21.274%2c1319.737%2c-15.472%2c1305.491%2c6.408C1290.137%2c29.99%2c1291.234%2c61.161%2c1305.907%2c85.173C1320.005%2c108.243%2c1346.883%2c119.034%2c1373.911%2c118.373' fill='rgba(181%2c 123%2c 218%2c 0.33)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1385.286%2c138.474C1416.723%2c139.567%2c1450.222%2c131.095%2c1466.336%2c104.08C1482.757%2c76.549%2c1475.375%2c42.287%2c1459.148%2c14.642C1443.153%2c-12.608%2c1416.881%2c-34.391%2c1385.286%2c-34C1354.243%2c-33.616%2c1329.298%2c-10.873%2c1314.523%2c16.431C1300.523%2c42.304%2c1298.688%2c73.316%2c1313.444%2c98.765C1328.155%2c124.136%2c1355.977%2c137.455%2c1385.286%2c138.474' fill='rgba(181%2c 123%2c 218%2c 0.33)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1464.771%2c302.244C1523.4%2c304.777%2c1575.886%2c268.678%2c1605.951%2c218.281C1636.831%2c166.518%2c1649.015%2c99.831%2c1615.351%2c49.834C1584.199%2c3.567%2c1520.403%2c4.581%2c1464.771%2c8.606C1417.807%2c12.003%2c1372.326%2c29.046%2c1347.725%2c69.195C1322.002%2c111.176%2c1321.154%2c162.934%2c1343.251%2c206.932C1368.015%2c256.239%2c1409.646%2c299.862%2c1464.771%2c302.244' fill='rgba(181%2c 123%2c 218%2c 0.33)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M31.987%2c549.042C55.01%2c548.98%2c73.017%2c530.151%2c82.682%2c509.255C90.915%2c491.456%2c84.686%2c472.188%2c75.567%2c454.826C65.502%2c435.661%2c53.632%2c412.993%2c31.987%2c412.73C10.117%2c412.465%2c-3.243%2c434.409%2c-13.464%2c453.746C-22.826%2c471.458%2c-27.805%2c491.446%2c-19.181%2c509.529C-9.238%2c530.376%2c8.89%2c549.104%2c31.987%2c549.042' fill='rgba(181%2c 123%2c 218%2c 0.33)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M19.993%2c511.223C35.815%2c510.7%2c51.033%2c504.19%2c59.238%2c490.651C67.744%2c476.615%2c68.838%2c458.738%2c60.294%2c444.725C52.051%2c431.206%2c35.808%2c427.067%2c19.993%2c426.285C2.196%2c425.405%2c-18.083%2c425.468%2c-27.854%2c440.369C-38.271%2c456.255%2c-34.65%2c477.659%2c-24.019%2c493.403C-14.525%2c507.462%2c3.038%2c511.783%2c19.993%2c511.223' fill='rgba(181%2c 123%2c 218%2c 0.33)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M118.076%2c691.828C165.865%2c691.221%2c213.722%2c676.404%2c239.809%2c636.359C268.359%2c592.533%2c277.576%2c534.322%2c249.379%2c490.268C222.702%2c448.589%2c167.536%2c444.591%2c118.076%2c446.17C72.173%2c447.635%2c25.775%2c459.845%2c0.532%2c498.212C-27.281%2c540.486%2c-35.395%2c596.265%2c-9.135%2c639.521C16.366%2c681.526%2c68.94%2c692.452%2c118.076%2c691.828' fill='rgba(181%2c 123%2c 218%2c 0.33)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1405.551%2c625.68C1439.916%2c624.608%2c1468.999%2c601.855%2c1485.054%2c571.452C1500.05%2c543.055%2c1496.638%2c510.017%2c1481.619%2c481.633C1465.386%2c450.954%2c1440.256%2c420.677%2c1405.551%2c421.201C1371.401%2c421.717%2c1350.268%2c454.196%2c1333.361%2c483.872C1316.691%2c513.133%2c1301.687%2c546.685%2c1316.965%2c576.696C1333.372%2c608.925%2c1369.404%2c626.808%2c1405.551%2c625.68' fill='rgba(181%2c 123%2c 218%2c 0.33)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1435.552%2c689.138C1481.688%2c690.26%2c1520.381%2c657.816%2c1543.166%2c617.683C1565.634%2c578.109%2c1569.568%2c530.685%2c1548.378%2c490.413C1525.631%2c447.181%2c1484.403%2c413.206%2c1435.552%2c413.163C1386.639%2c413.12%2c1344.109%2c446.391%2c1322.382%2c490.213C1302.819%2c529.67%2c1314.863%2c574.379%2c1336.641%2c612.659C1358.729%2c651.485%2c1390.896%2c688.052%2c1435.552%2c689.138' fill='rgba(181%2c 123%2c 218%2c 0.33)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1355.658%2c524.331C1375.22%2c525.4%2c1396.155%2c521.606%2c1407.11%2c505.364C1419.256%2c487.357%2c1420.909%2c463.052%2c1409.43%2c444.613C1398.467%2c427.005%2c1376.4%2c422.68%2c1355.658%2c422.721C1335.009%2c422.762%2c1312.194%2c426.727%2c1302.256%2c444.827C1292.55%2c462.506%2c1301.859%2c483.485%2c1313.104%2c500.227C1322.847%2c514.732%2c1338.211%2c523.378%2c1355.658%2c524.331' fill='rgba(181%2c 123%2c 218%2c 0.33)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1025'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: cover;
}




.saludo {
  position: absolute;
  top: 30%;
  left: 20%;
  font-size: 40px;
  line-height: 0px;
  color:#FFFFFF;
}

.presentacion{
  position: absolute;
  top: 35%;
  left: 20%;
  font-size: 38px;
  line-height: 60px;
  color:#FFFFFF;
}

.iconhtml{
  width: 50px;
  position: relative;
  left: 15%;
display: flex;

}
.iconcss{
  width: 50px;
  position: relative;
  left: 25%;
display: flex;
}

.iconjs{
  width: 50px;
  position: relative;
  left: 36%;

}

.iconvscode{
  width: 50px;
  position: relative;
  left: 48%;
display: flex;
}

.container{
  position: absolute;
  background: linear-gradient(to right, rgb(255, 255, 255), rgb(223, 223, 220));
  top: 55%;
  left: 19.6%;
  display: flex;
  width: 550px;
  height: 60px;
  padding: 20px 0px;
  border-radius: 20px 100px;
}

.words {
  -webkit-text-fill-color: transparent;
  text-emphasis-color: transparent;
  background: -o-linear-gradient(left, #B57BDA 20%, #ff5e69 60%, #ff8a56 80%, #ffa84b);
  background: -webkit-gradient(linear, left top, right top, color-stop(20%, #B57BDA), color-stop(60%, #ff5e69), color-stop(80%, #ff8a56), to(#ffa84b));
  background: linear-gradient(90deg, #B57BDA 20%, #ff5e69 60%, #ff8a56 80%, #ffa84b);
  -webkit-background-clip: text;
}

/* FIN    S E C T I O N   1 */

/* S E C T I O N   2 */

.section2{
  width: 100%;
  height: 600px;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1416%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='url(%23SvgjsRadialGradient1417)'%3e%3c/rect%3e%3cpath d='M1095.159%2c427.081C1137.888%2c426.148%2c1176.898%2c402.604%2c1197.519%2c365.169C1217.45%2c328.987%2c1214.348%2c284.944%2c1192.906%2c249.637C1172.284%2c215.68%2c1134.877%2c195.708%2c1095.159%2c196.616C1056.956%2c197.489%2c1025.396%2c221.711%2c1004.855%2c253.934C982.269%2c289.365%2c965.323%2c332.558%2c984.753%2c369.814C1005.301%2c409.213%2c1050.735%2c428.051%2c1095.159%2c427.081' fill='rgba(47%2c 46%2c 64%2c 0.25)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1230.699%2c186.305C1258.396%2c185.237%2c1283.317%2c170.376%2c1297.239%2c146.408C1311.227%2c122.326%2c1311.85%2c93.257%2c1299.139%2c68.477C1285.144%2c41.194%2c1261.337%2c17.93%2c1230.699%2c16.687C1198.165%2c15.367%2c1167.875%2c34.124%2c1151.912%2c62.503C1136.246%2c90.354%2c1137.482%2c124.946%2c1154.639%2c151.905C1170.651%2c177.066%2c1200.897%2c187.454%2c1230.699%2c186.305' fill='rgba(47%2c 46%2c 64%2c 0.25)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M969.766%2c310.866C987.548%2c310.86%2c1001.152%2c296.981%2c1009.991%2c281.552C1018.767%2c266.233%2c1023.846%2c247.489%2c1014.739%2c232.364C1005.838%2c217.581%2c987.003%2c213.945%2c969.766%2c214.749C954.107%2c215.479%2c939.605%2c222.818%2c931.515%2c236.245C923.148%2c250.131%2c922.104%2c267.15%2c929.499%2c281.577C937.614%2c297.407%2c951.977%2c310.872%2c969.766%2c310.866' fill='rgba(47%2c 46%2c 64%2c 0.25)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1390.131%2c343.728C1431.737%2c344.187%2c1479.103%2c339.029%2c1499.063%2c302.52C1518.576%2c266.828%2c1494.69%2c226.21%2c1473.292%2c191.615C1453.431%2c159.506%2c1427.885%2c126.675%2c1390.131%2c126.407C1352.05%2c126.137%2c1324.577%2c157.815%2c1304.902%2c190.421C1284.325%2c224.522%2c1265.934%2c265.351%2c1285.286%2c300.161C1304.996%2c335.614%2c1349.57%2c343.28%2c1390.131%2c343.728' fill='rgba(47%2c 46%2c 64%2c 0.25)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1416'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cradialGradient cx='0%25' cy='100%25' r='1545.06' gradientUnits='userSpaceOnUse' id='SvgjsRadialGradient1417'%3e%3cstop stop-color='rgba(255%2c 138%2c 86%2c 1)' offset='0.12'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 94%2c 105%2c 1)' offset='0.5'%3e%3c/stop%3e%3cstop stop-color='rgba(181%2c 123%2c 218%2c 1)' offset='1'%3e%3c/stop%3e%3c/radialGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
}


.informacion{
  
  font-size: 24px;
 font-weight: 600;
 text-align:left;
 color: #e8e7ee;
 padding: 0px 28px;
 position: relative;
}

.div-info{
  background-color: rgba(47, 46, 64, 0.486);
  max-width: 40%;
  height: auto;
  top: 15%;
  left: 15%;
  position: relative;
  border-radius: 50px 30px 200px 50px;
 display: flex;
  
}

.svg1{
  position: absolute;
  width: 20%;
  top: 60%;
  left: 20%;
}
/* 
.bancolombia{
  -webkit-text-fill-color: transparent;
  text-emphasis-color: transparent;
  background: linear-gradient(90deg, #00448f 31%, #ffd301 45%,  #ed1d2e);
  -webkit-background-clip: text;
}

.mastercard{
  -webkit-text-fill-color: transparent;
  text-emphasis-color: transparent;
  background: linear-gradient(90deg, #EB0018 30%, #FF5F00 40%,  #F79E1B);
  -webkit-background-clip: text;
}

.comfenalco{
  -webkit-text-fill-color: transparent;
  text-emphasis-color: transparent;
  background: linear-gradient(90deg, #0d614a 50%, #a9c13f);
  -webkit-background-clip: text;
}

.html{
  -webkit-text-fill-color: transparent;
  text-emphasis-color: transparent;
  background: linear-gradient(90deg, #fa4213 20%, #eb7644);
  -webkit-background-clip: text;
}

.css{
  -webkit-text-fill-color: transparent;
  text-emphasis-color: transparent;
  background: linear-gradient(90deg, #2177fe 20%, #319afc);
  -webkit-background-clip: text;
}

.javascript{
  -webkit-text-fill-color: transparent;
  text-emphasis-color: transparent;
  background: linear-gradient(90deg, #fcb513 20%, #fdd013);
  -webkit-background-clip: text;
} */


/* FIN    S E C T I O N   2 */

/* INICIO SECTION 3*/

.section3{
  width: 100%;
  height: 790px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1002%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='url(%23SvgjsRadialGradient1003)'%3e%3c/rect%3e%3cpath d='M 0%2c101 C 72%2c112.2 216%2c157.8 360%2c157 C 504%2c156.2 576%2c87.8 720%2c97 C 864%2c106.2 936%2c221.6 1080%2c203 C 1224%2c184.4 1368%2c43.8 1440%2c4L1440 560L0 560z' fill='rgba(47%2c 46%2c 64%2c 1)'%3e%3c/path%3e%3cpath d='M 0%2c411 C 72%2c423.4 216%2c494.6 360%2c473 C 504%2c451.4 576%2c310 720%2c303 C 864%2c296 936%2c434.4 1080%2c438 C 1224%2c441.6 1368%2c344.4 1440%2c321L1440 560L0 560z' fill='rgba(47%2c 46%2c 64%2c 1)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1002'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cradialGradient cx='0%25' cy='0%25' r='1545.06' gradientUnits='userSpaceOnUse' id='SvgjsRadialGradient1003'%3e%3cstop stop-color='rgba(255%2c 138%2c 86%2c 1)' offset='0.09'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 94%2c 105%2c 1)' offset='0.42'%3e%3c/stop%3e%3cstop stop-color='rgba(181%2c 123%2c 218%2c 1)' offset='0.91'%3e%3c/stop%3e%3c/radialGradient%3e%3c/defs%3e%3c/svg%3e");
 padding-bottom: 50px;
 background-repeat: no-repeat;
 background-size: cover;
 

}

.hdv{
padding-left: 36%;
padding-top: 60px;
width: 30%;
height:90%;
}

.download, .ingresar, .svg3, .svg-3{
  display: none;
}


/* FIN    S E C T I O N   3 */

/* SECTION 4*/

.section4{

background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg clip-path='url(%26quot%3b%23SvgjsClipPath1221%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(47%2c 46%2c 64%2c 1)'%3e%3c/rect%3e%3ccircle r='21.97' cx='1439.7' cy='239.65' fill='url(%23SvgjsLinearGradient1222)'%3e%3c/circle%3e%3ccircle r='32.265' cx='566.63' cy='417.58' fill='url(%23SvgjsRadialGradient1223)'%3e%3c/circle%3e%3ccircle r='30.085' cx='1330.86' cy='239.51' fill='url(%23SvgjsLinearGradient1224)'%3e%3c/circle%3e%3ccircle r='49.49' cx='790.22' cy='50.12' fill='url(%23SvgjsLinearGradient1225)'%3e%3c/circle%3e%3c/g%3e%3cdefs%3e%3cclipPath id='SvgjsClipPath1221'%3e%3crect width='1440' height='560' x='0' y='0'%3e%3c/rect%3e%3c/clipPath%3e%3clinearGradient x1='1395.76' y1='239.65' x2='1483.6399999999999' y2='239.65' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1222'%3e%3cstop stop-color='rgba(255%2c 94%2c 105%2c 1)' offset='0.16'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 168%2c 75%2c 1)' offset='0.91'%3e%3c/stop%3e%3c/linearGradient%3e%3cradialGradient cx='502.1' cy='417.5799999999999' r='144.29' gradientUnits='userSpaceOnUse' id='SvgjsRadialGradient1223'%3e%3cstop stop-color='rgba(181%2c 123%2c 218%2c 1)' offset='0.18'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 168%2c 75%2c 1)' offset='0.67'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 138%2c 86%2c 1)' offset='0.96'%3e%3c/stop%3e%3c/radialGradient%3e%3clinearGradient x1='1270.6899999999998' y1='239.51' x2='1391.0299999999997' y2='239.51' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1224'%3e%3cstop stop-color='rgba(255%2c 94%2c 105%2c 1)' offset='0.04'%3e%3c/stop%3e%3cstop stop-color='rgba(181%2c 123%2c 218%2c 1)' offset='0.71'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='691.24' y1='50.12' x2='889.2' y2='50.12' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1225'%3e%3cstop stop-color='rgba(255%2c 94%2c 105%2c 1)' offset='0.04'%3e%3c/stop%3e%3cstop stop-color='rgba(181%2c 123%2c 218%2c 1)' offset='0.71'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
  background-repeat: no-repeat;
 background-size: cover;
  height: 630px;
  width: auto;
  color: #FFFFFF;
  padding: 30px;
  position: relative;
}

form{
  width: 430px;
padding: 20px;
background-color: #2f2e40;
 border: 2px solid #B57BDA;
 font-size: 14px;
 border-radius: 5px;
 color: #FFFFFF;
 margin-left: 50px;
 box-shadow: -20px 25px 1px #171725;

}

input{
  background-color: #fbfbfb; 
  width: 408px; 
  height: 30px; 
  border-radius: 5px;  
  border: 2px solid #B57BDA; 
  padding-left: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  margin-top: 5px;
}


textarea{
  background-color: #fbfbfb; 
  width: 408px; 
  height: 150px; 
  border-radius: 5px;  
  border: 2px solid #B57BDA; 
  margin-top: 5px;  
  margin-bottom: 20px; 
  padding-top: 5px; 
  padding-left: 10px;
  resize: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}


label{
  display: block; 
  float: center;  
  font-weight: 600;
}


button{
  height: 50px; 
  padding-left: 5px;
  padding-right: 5px;   
  margin-bottom: 20px; 
  margin-top: 10px;   
  text-transform: uppercase;
  background-color: #B57BDA; 
  border-color: #B57BDA; 
  border-style: solid; 
  border-radius: 10px;  
  width: 420px;   
  cursor: pointer;
 
}


button p{
  color: #fff; 
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: 0.25em;
 
}


form span{
  color: #B57bda; 
}


.aviso{
  font-size: 13px;  
  color: #FFFFFF;  
}


form p{
  font-size: 12px; 
  color: #FFFFFF; 
}


::-webkit-input-placeholder {
 color: #a8a8a8;
 font-family: 'Poppins', sans-serif;
}


::-webkit-textarea-placeholder {
 color: #a8a8a8;
 font-family: 'Poppins', sans-serif;
}

.svg2{
  width: 100%;
  height: 90%;
  left: 5%;
  top: 9%;
  position: absolute;
}

.svg-2{
position: absolute;
width: 20%;
background-color: #ffffff;
height:40%;
top: 30%;
left: 43%;
border-radius: 90px 500px 60px 300px;
}

.contacto{
  color: #E5E5E5;
position: absolute;
left: 70%;
bottom: 30%;
font-size: 20px;
}

.correocontact{

  color: #E5E5E5;
  position: relative;
  transition: color 0.1s, background-color 0.1s, padding 0.2s ease-in;
  letter-spacing: 1px;
  line-height: 16px;
  padding: 3px 0px 20px 0px;
  }
  
  .correocontact::before {
  content: "";
  bottom: 10px;
  transform: scaleX(0);
  transition: color 0.1s, transform 0.2s ease-out;
  position: absolute;
  background-color: #E5E5E5;
  display: block;
  left: 0;
  height: 1px;
  width: 100%;
  transform-origin: right top;
  
  }
  
  .correocontact:hover::before,
  .correocontact:focus::before {
  transform: scaleX(1);
  transform-origin: left top;
  }

.contact{
  font-size: 40px;
  -webkit-text-fill-color: transparent;
  text-emphasis-color: transparent;
  background: linear-gradient(90deg, #ffa84b 20%, #ff8a56 40%, #ff5e69 60%, #B57BDA);
  -webkit-background-clip: text;
}


.iconphone{
 width: 55px;
 position: absolute;
 left: -30%;
 bottom: 5%;
}

.iconemail{
  width: 50px;
  position: absolute;
  left: -30%;
  bottom: 35%;
 }


/* FIN    S E C T I O N   4 */


/* F O O T ER  */

.footer {
  background: -o-linear-gradient(left, #B57BDA 20%, #ff5e69 60%, #ff8a56 80%, #ffa84b);
  background: -webkit-gradient(linear, left top, right top, color-stop(20%, #B57BDA), color-stop(60%, #ff5e69), color-stop(80%, #ff8a56), to(#ffa84b));
  background: linear-gradient(90deg, #B57BDA 20%, #ff5e69 60%, #ff8a56 80%, #ffa84b);
  text-align: justify;
  padding-top: 40px;
  display: block;
  position: relative;
  display: inline-block;
  width: 100%;
  height: 200px;
 
}


.imgfooter{
padding-left: 50%;
  display: flex;

}

ul {
  list-style: none;
  padding-left: 68%;
  display: block;
}

li img {
  width: 20px;
  border: 5px solid #ffffff00;
}

li img:hover{
  transform: scale(1.2);
  transition: -webkit-transition;
  -webkit-transition: transform 500ms ease-in-out;
}

li,.contactos {
  display: inline;
  padding-left: 20px;
}



.pfooter {
  font-weight: 700;
  color: #111111;
  font-size: 16px;
  text-align: center;
  padding-top: 10px;
  padding-left: 3%;

}

.pfooter2 {
  font-weight: 700;
  color: #111111;
  font-size: 16px;
  padding-left: 22%;
  position: absolute;
}


.correo{

color: #111111;
font-weight: 600;
position: relative;
transition: color 0.1s, background-color 0.1s, padding 0.2s ease-in;
letter-spacing: 1px;
line-height: 16px;
padding: 3px 0px 20px 0px;
}

.correo::before {
content: "";
bottom: 10px;
transform: scaleX(0);
transition: color 0.1s, transform 0.2s ease-out;
position: absolute;
background-color: #111;
display: block;
left: 0;
height: 2px;
width: 100%;

}

.correo:hover::before,
.correo:focus::before {
transform: scaleX(1);

}


/* F I N    F O O T E R */


/* MOBILE*/


#mobile, .icon{
  display: none;
}

@media (max-width: 600px) and (min-width: 200px) {
 .icon, .download, .ingresar, .svg3, .svg-3{
  display: block;
 }


  .iconmenu{
 width: 40%;
padding-left: 40%;
display: block;
}


  nav {
    display: none;
    width: 100%;
  
  }

  #mobile {
    background-color: transparent;
    position: relative;
    display: none;
  }

  #mobile a {
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }

  #mobile a.icon {
    background: transparent;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }

  .nav-mobile {
    background-color: #2f2e40;
    color: #FFFFFF;
    display: none;
    font-weight: 700;
    margin: 0;
  }

  .footer{
    height: 270px;
   
    }
     
    .imgfooter{
    padding-left:45%;
    }
    
    ul {
   
    padding-left: 18%;
    padding-top: 50px;
    }

    
    .correo {
      border-bottom: 1px solid;
    }
    
    .pfooter {
      padding-top: 5px;
      padding-left: 5%;
    }
    
    .pfooter2 {
 padding-left: 29%;
    }

    form{
      width: 200px;

    }
    input, textarea{
      
      width: 180px; 
     
    }
    button{
      width: 200px;
    }
    
  
    .section4{
      border: none;
      height: 1000px;
    }



    .contacto{
    
    position: absolute;
    left: 30%;
    bottom: 5%;
    font-size: 18px;
    }

    .saludo {
   top: 7%;
   left: 0;
  font-size: 36px;
position: relative;
display: inline-block;
margin: 0px 20px;
    }
    
    .presentacion{
      top: 10%;
    left: 0;
     font-size: 33px;
     position: relative;
     display: inline-block;
     margin: 0;
     list-style: 0;
     margin: 0px 20px;
    }

   .iconhtml,
   .iconcss,
   .iconjs,
   .iconvscode{
width: 20px;
padding: 0px 4px 0px 0px;
   }

    .container{
      top:70px;
      left: 6%;
      width: 350px;
      height: 60px;
      padding: 20px 0px;
      border-radius: 20px 80px;
      
      position: relative;
     }

    .section3{
      width: auto;
      height: 700px;
     padding: 20px 20px;
     margin: 0;
     border: none;
    }
    
    .hdv{
   display: none;
    }

    .section2{
    
      width: auto;
      height: 800px;
      position: relative;
      margin: 0;
      border: none;
    }
    
    

    .informacion{
      position: absolute;
      top: 1%;
  left: 5%;
      font-size: 22px;
     font-weight: 600;
     text-align:left;
    }
    .espacio{
      display:none;
    }
    .contact{
      font-size: 38px;
    
    }

    .section1{
      margin: 0;
      width: 100%;
      height: 600px;
      overflow: hidden;
      border: none;
    }
    .iconphone{
     width: 48px;
    
    }
    
    .iconemail{
      width: 43px;
     
     }

     body{
      height: 100vh;
      width: 100%;
     }

     .svg2, .svg1, .svg-2{
      display: none;
     }

     .div-info{
      min-width: 80%;
      height: 85%;
      top: 5%;
      left: 10%;
      position: absolute;
      border-radius: 50px 30px 180px 50px;
      overflow: hidden;
     }
     .informacion{
  
      font-size: 22px;
     font-weight: 600;
     text-align:left;
     color: #e8e7ee;
   padding: 5px;
     
    }
    .div-download{
      margin: 50px 0px;
    }

    .svg-3{
      background-color: #fdfdff46;
      width: 250px;
      border-radius: 20px 100px 50px 20px;
      margin-left: 20px;
      height: 70%;
    }

    .svg3{
      width: 300px;
      padding: 0px 20px;
    }

.download{
margin: 20px;  
width: 280px;
border-radius: 8px;
padding: 10px;
font-weight: 800;
text-align: center;
background-color: #B57BDA;
font-size: 20px;
}

.ingresar{
    font-size: 20px;
    color: #B57BDA;
  font-weight: 700;
  text-align: center;
  }

  .ingresar span{
    color: #fbfbfb;
  }

}