/*STYLE*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;900&family=Roboto:wght@400;700&display=swap');

@font-face {
    font-family: 'Roboto', sans-serif;
    src: url('https://fonts.googleapis.com/css2?family=Roboto&display=swap') format("truetype");
    font-weight: 400;
}
@font-face {
    font-family: 'Roboto', sans-serif;
    src: url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap') format("truetype");
    font-family: var(--bold);;
}
@font-face {
    font-family: 'Nunito', sans-serif;
    src: url('https://fonts.googleapis.com/css2?family=Nunito&display=swap') format("truetype");
    font-weight: 400;
}
@font-face {
    font-family: 'Nunito', sans-serif;
    src: url('https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap') format("truetype");
    font-family: var(--bold);;
}
@font-face {
    font-family: 'Nunito', sans-serif;
    src: url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap') format("truetype");
    font-family: var(--bolder);;
}
@font-face {
    font-family: 'Nunito', sans-serif;
    src: url('https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap') format("truetype");
    font-family: 900;
}

/* Smooth scroll effect */
html {
  scroll-behavior: smooth;
}

/* Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--dark-gray);
  font-family: 'Nunito', sans-serif;
}

body {
  overflow-x: hidden;
}
a {
  transition: all .3s ease;
}

.full-width {
  width: var(--vw-100);
  position: var(--relative);
  left: var(--p-50);
  right: var(--p-50);
  margin-left: calc(var(--vw-50) * -1);
  margin-right: calc(var(--vw-50) * -1);
  display: block;
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  font-size: 100%;
}

/* ROOT FONT STYLES */
:root {
    font-size: 20px;
  --font-family: 'Nunito Regular';
  --normal-font: 400;
  --bold-font: 600;
  --bolder-font: 900;
  --line-height: 1.25rem;
  --transition: 0.4s ease-in;

--nunito: 'Nunito', sans-serif;
--roboto: 'Roboto', sans-serif;

/* Font Weight */
--normal: 400;
--medium: 500;
--bold: 600;
--bolder: 700;


/* Flex */
--flex: flex;
--column: column;
--row: row;
--center: center;
--start: start;
--end: end;
--around: space-around;
--between: space-between;

/* Flex gaps */
--gap-1: 10px;
--gap-2: 20px;
--gap-3: 30px;

/* Colours */
--white: #ffffff;

--black: #000000;

--red: #ED0000;
--blue: #285AFF;
--light-blue: #80CDFF;
--light-turquoise: #92EAEA;
--turquoise: #72EAC5;
--dark-turquoise: #4B7D91;
--green: #BCF453;
--yellow: #FFE74F;
--gray: #B7CBD3;
--medium-gray: #757A8B;
--dark-gray: #374649;
--light-gray: #F7F9FA;
--gradient-1: linear-gradient(130deg, #00AAFF 0%, #00C8AA 100%);
--gradient-2: linear-gradient(180deg, #009CEA 0%, #4632FF 100%);
--gradient-3: linear-gradient(180deg, #029BEB 0%, #00AA61 100%);
--gradient-4: linear-gradient(180deg, #40A900 0%, #00884A 100%);

/* z-index */

/* Borders */
--border-solid-gray: 2px solid var(--dark-gray);
--border-solid-red: 2px solid var(--red);
--border-radius-circle: 30px;
--border-radius-box: 5px;

/* Shadow */
--box-shadow: 4px 4px 4px rgba(217, 217, 217, 0.25);

--text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
/* Text align */
--text-center: center;
--text-left: left;
--text-right: right;


/* rem sizes */
--rem-1: .5rem;
--rem-2: .75rem;
--rem-3: .875rem;
--rem-4: 1rem;
--rem-5: 1.25rem;
--rem-6: 1.5rem;
--rem-7: 1.75rem;
--rem-8: 2rem;
--rem-9: 2.5rem;
--rem-10: 2.75rem;
--rem-11: 3rem;

/* px sizes */
--px-1: 5px;
--px-2: 15px;
--px-3: 20px;
--px-4: 45px;
--px-5: 75px;
--px-6: 100px;

/* % sizes */
--p-25: 25%;
--p-40: 40%;
--p-50: 50%;
--p-60: 60%;
--p-75: 75%;
--p-90: 90%;
--p-100: 100%;
--auto: auto;

/* viewport sizes */
--vw-33: 33vw;
--vw-50: 50vw;
--vw-100: 100vw;

--vh-25: 25vh;
--vh-40: 40vh;
--vh-50: 50vh;
--vh-60: 60vh;
--vh-75: 75vh;
--vh-90: 90vh;
--vh-100: 100vh;

/* Centering Transform */
--translate: translate(-50%, -50%);
--translate-x: translateX(-50%);
--translate-y: translateY(-50%);

/* Paddings */
--padding-1: 0.25rem;
--padding-2: 0.5rem;
--padding-3: 0.75rem;
--padding-4: 1rem;
--padding-5: 1.25rem;
--padding-6: 1.5rem;
--padding-7: 1.75rem;
--padding-8: 2rem;

/* Margins */
--margin-1: 0.25rem;
--margin-2: 0.5rem;
--margin-3: 0.75rem;
--margin-4: 1rem;
--margin-5: 1.25rem;
--margin-6: 1.5rem;
--margin-7: 1.75rem;
--margin-8: 2rem;

/* Positions */
--relative: relative;
--absolute: absolute;
--fixed: fixed;
--sticky: sticky;

/* Containers */
--sm: 540px;
--md: 720px;
--lg: 960px;
--xl: 1140px;
--xxl: 1320px;
}
}

* {
  font-family: 'Roboto', Helvetica, sans-serif;
  color: #374649;
  line-height: 1.5;
}

/* TYPOGRAPHY */
.logo img {
    max-width: 275px;
}
h1, h1 strong {
  font-size: 2.5rem;
  font-family: 'Nunito', Helvetica, sans-serif;
  font-weight: 700;
}

h2, h2 strong {
  font-family: 'Nunito', Helvetica, sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
}

h3 {
  font-size: 1.375rem;
  font-weight: 500;
}

h4 {
  font-size: 1.125rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.875rem;
}

p {
  font-size: 1rem;
  line-height: 1.5;
}

.small {
  font-size: 0.875rem;
}
a {
  text-decoration: underline;
  color: #374649;
}

.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-heavy {
  font-weight: 700;
}

.primary-color {
    color: #374649;
}

.secondary-color {
    color: #ED0000;
}

.primary-bg{
    background: #ED0000;
}

.lightgray-bg{
  background-color: #F7F9FA;
}

/* GRADIENTS */
.blue-gradient-bg
{
  background: linear-gradient(180deg, #009CEA 5.33%, #4632FF 92.33%);
}

.blue-green-gradient-bg
{
  background: linear-gradient(180deg, #029BEB 5.33%, #00AA61 92.33%);
}

.green-gradient-bg{
  background: linear-gradient(180deg, #40A900 5.33%, #00884A 92.33%);
}

.orange-gradient-color
{
  background-image: linear-gradient(90deg, #EF6F00 0%, #EE0000 100%);
  background-size: 100%;
  background-clip: true;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
}

.blue-gradient-color
{
  background-image: linear-gradient(90deg, #009CEA 0%, #4632FF 100%);
  background-size: 100%;
  background-clip: true;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
}

.blue-green-gradient-color
{
  background-image: linear-gradient(90deg, #029BEB 0%, #00AA61 100%);
  background-size: 100%;
  background-clip: true;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
}

.green-gradient-color{
  background-image: linear-gradient(90deg, #40A900 0%, #00884A 100%);
  background-size: 100%;
  background-clip: true;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
}
/* POSITIONING */

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.justify {
  text-align: justify;
}

/* ==== GRID SYSTEM ==== */

.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  position: relative;
  width: 100%;
}

.row [class^="col"] {
  float: left;
  margin: 0.5rem 2%;
  min-height: 0.125rem;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: 96%;
}

.col-1-sm {
  width: 4.33%;
}

.col-2-sm {
  width: 12.66%;
}

.col-3-sm {
  width: 21%;
}

.col-4-sm {
  width: 29.33%;
}

.col-5-sm {
  width: 37.66%;
}

.col-6-sm {
  width: 46%;
}

.col-7-sm {
  width: 54.33%;
}

.col-8-sm {
  width: 62.66%;
}

.col-9-sm {
  width: 71%;
}

.col-10-sm {
  width: 79.33%;
}

.col-11-sm {
  width: 87.66%;
}

.col-12-sm {
  width: 96%;
}

.row::after {
 content: "";
 display: table;
 clear: both;
}

.hidden-sm {
  display: none;
}

@media only screen and (min-width: 33.75em) {  /* 540px */
  .container {
    width: 80%;
  }
}

@media only screen and (min-width: 45em) {  /* 720px */
  .col-1 {
    width: 4.33%;
  }

  .col-2 {
    width: 12.66%;
  }

  .col-3 {
    width: 21%;
  }

  .col-4 {
    width: 29.33%;
  }

  .col-5 {
    width: 37.66%;
  }

  .col-6 {
    width: 46%;
  }

  .col-7 {
    width: 54.33%;
  }

  .col-8 {
    width: 62.66%;
  }

  .col-9 {
    width: 71%;
  }

  .col-10 {
    width: 79.33%;
  }

  .col-11 {
    width: 87.66%;
  }

  .col-12 {
    width: 96%;
  }

  .hidden-sm {
    display: block;
  }
}

@media only screen and (min-width: 90em) { /* 960px */
  .container {
    width: 75%;
    max-width: 90em;
  }
}
/* BUTTONS */
.btn.primary{
    padding:15px 80px;
    margin:0 auto;
    box-sizing: border-box;
    border-radius: 110px;
    color: #fff;
    background: #ED0000;
    border: 1px solid #FFFFFF;
    font-size: 1rem;
 text-decoration:none;
 margin-top: 3rem;
}
.btn.primary:hover{
    color: #ED0000;
    background: #FFFFFF;
    border: 1px solid #ED0000;
 cursor: pointer;
}

/* IMAGES */
.img-responsive{
  max-width: 100%;
}
.img-fullwidth{
  width: 100%;
  height: auto;
}
.img-fullheight{
  height: 100%;
  width:auto;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

/* TABLES */
*, ::after, ::before {
    box-sizing: border-box;
}
td {
    display: table-cell;
    vertical-align: inherit;
}
table {
    border-collapse: separate;
    text-indent: initial;
    border-spacing: 2px;
    width: 100%;
}
table.table {
    border-collapse: collapse;
    text-align: left;
}
.table td, .table th {
    padding: .75rem;
    vertical-align: middle;
}

/*HEADER*/
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--white);
    gap: var(--gap-1);
    margin: 0 auto;
    width: var(--p-100);
}
/* Container */
.header {
    gap: var(--gap-1);
    padding: var(--padding-3) var(--padding-4);
    margin: 0 auto;
    width: var(--p-100);
    box-shadow: 0px 8px 19px -10px rgb(153 153 153 / 32%);
}

.header img {
    width: 75px;
}

@media (min-width: 576px) {
 .header {
        /* max-width: var(--sm); */
        padding: var(--padding-2) var(--padding-4);
    }

    .header img {
        width: 70px;
    }
}
@media (min-width: 768px) {
    .header {
        max-width: unset;
            padding: var(--padding-2) var(--padding-8);

    }
}
@media (min-width: 992px) {
    .header {
        max-width: var(--lg);
        padding: var(--padding-4) calc(var(--padding-8) * 2);
    }
}
@media (min-width: 1200px) {
    :root{font-size:18px;}
 .header {
        max-width: var(--xl);
    }
}
@media (min-width: 1440px) {
 :root{font-size:20px;}
    .header {
        max-width: var(--xxl);
    }
}
#header{
  background: #FFFFFF;
}
#header .container .row {
  display: table;
}

#header .container .row [class^="col"] {
  display:table-cell;
  position: relative;
  margin: 0 2%;
  overflow: hidden;
  float: none;
}
#header div.title-text{
  width: 50%;
  padding-right: 2.8rem;
}
#header div.title-img{
  width: 50%;
}
#header h1, .two-cols h2 {
  font-size: 2.7rem;
  line-height: 2.8rem;
  background-image: linear-gradient(90deg, #00C8FF 0%, #0082FF 100%);
  background-size: 100%;
  background-clip: true;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
  padding-bottom: 1.5rem;
  font-weight: 700;
}

#header .logo {
  margin: 30px 0 0;
 }

@media only screen and (max-width: 48rem){
  :root{font-size: 16px;}
  #header h1, .two-cols h2{font-size: 1.5rem;line-height: 2rem;}
  h2, .content.puntos h3 {font-size: 1.25rem;}
}

#header .header-img{
  width: 98%;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

@media only screen and (max-width: 75em) {
  #header .header-img{
    width: auto;
    max-height: none;
    height: 90%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
}

@media only screen and (max-width: 45em) {
  #header .container .row {
    display: block;
    flex-direction: column;
  }
  #header .container .row [class^="col"] {
    min-height: auto;
    overflow: hidden;
    position: relative;
    max-width: 100%;
    height: auto;
    display: block;
  }

  #header .header-img{
    display: block;
    position: relative;
    width:100%;
    height: auto;
    top: 0;
    left: 0;
    transform: translate(0,0);
  }
  #header div.title-text{
    width: auto;
  }
  #header div.title-img{
    width: auto;
 padding-top: 2rem;
  }
  #footer .footer-legal{flex-direction: column;}
}
.container {
  width: var(--p-100);
  padding: var(--padding-5) var(--padding-4);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .container {
    max-width: unset;
 padding: var(--padding-6) var(--padding-8);
  }
}

@media (min-width: 992px) {
  .container {
      /* max-width: var(--lg); */
    padding: var(--padding-7) calc(var(--padding-8) * 2);
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: var(--xl);
    padding: calc(var(--padding-8) * 2) var(--padding-8);
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: var(--xxl);
  }
}
.two-cols {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.two-cols .image,
.two-cols .content {
  flex: 1;
}

div.content, .two-cols .content {
  padding: var(--padding-8);  
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-3)
}

.two-cols.left .button {
  margin: var(--margin-4) 0 0 0;
}

@media (min-width: 768px) {
  .two-cols {
    flex-direction: row;
  }
  .two-cols .image,
  .two-cols .content {
    min-width: 50vw;
  }
  .two-cols.left {
    flex-direction: row-reverse;
  }
}

@media (min-width: 992px) {
  .two-cols.right .content {
    padding: calc(var(--padding-6) * 2) calc(var(--padding-6) * 3) calc(var(--padding-6) * 2) calc(var(--padding-6) * 2)
  }
  .two-cols.left  .content{
    padding:  calc(var(--padding-6) * 2) calc(var(--padding-6) * 2) calc(var(--padding-6) * 2) calc(var(--padding-6) * 3)
  }
}

@media (min-width: 1440px) {
  .two-cols.right .content {
    padding:  calc(var(--padding-8) * 2) calc(var(--padding-8) * 6) calc(var(--padding-8) * 2) calc(var(--padding-8) * 2);
  }
  .two-cols.left  .content{
    padding:  calc(var(--padding-8) * 2) calc(var(--padding-8) * 2) calc(var(--padding-8) * 2) calc(var(--padding-8) * 6);
  }
}

.two-cols .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 992px) {
  .two-cols .image img,
  .one-col .image img  {
    width: 100%;
    max-height: 700px;
    object-fit: cover;
  }
}

.two-cols .image,
  .one-col  .image {
    display: flex;
  }

.logo {
    text-align: center;
    padding: 0px 0 50px;
}

.contract{
 background: var(--gradient-1)
}
.contract h2, .contract p {
 color: var(--white);
}
p.short-text {
 max-width: var(--p-90);
 margin: var(--rem-5) auto 0;
}
.puntos .border {
 display: flex;
 flex-direction: column;
 gap: var(--gap-3);
 border: 2px solid #60C0FF;
 border-radius: var(--border-radius-circle);
 padding:2.8rem 1.4rem;
 margin-top:1.5rem;
}
.puntos h3 {
 font-size: 2rem;
 font-weight:700;
 background-image: linear-gradient(90deg, #00C8FF 0%, #0082FF 100%);
 background-size: 100%;
 background-clip: true;
 -webkit-background-clip: text;
 -moz-background-clip: text;
 text-fill-color: transparent;
 -webkit-text-fill-color: transparent; 
 -moz-text-fill-color: transparent;
}
#footer {
 display:flex;
 justify-content: space-between;
}
#footer .footer-legal {
 display:flex;
 justify-content: space-between;
 width: 36%;
}
.footer-legal a {text-decoration:none;}