/*=============================================
=            Clases Auxiliares            =
=============================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

*{
  /* Color styles */
  --primario: #4E8AFA;
  --secundario: #4879D5;
  --terciario: #2B3F63;
  --cuaternario: #1F2D47;
  --acento: #DB002E;
  --fondo: #111E2E;
  --blanco: #FFFFFF;
  --blanco-20: rgba(255, 255, 255, 0.20);
}

  /* Text-size styles */
.regular---small{ font-size: 14px; font-weight: 200;}
.regular---small-caps{ font-size: 14px;  text-transform: uppercase; letter-spacing: .1em;font-weight: 200;}
body p, .regular---body{ font-size: 18px;  line-height: 130%;}
.regular---body-caps{ font-size: 18px;  text-transform: uppercase; letter-spacing: .1em; line-height: 130%;}
body h6, .regular---heading-6{ font-size: clamp(20px, 4vw, 23px); ; line-height: 120%; font-weight: 200;}
body h5, .regular---heading-5{ font-size: clamp(25px, 3vw, 28px); ; line-height: 120%; font-weight: 200;}
body h4, .regular---heading-4{ font-size: clamp(30px, 7vw, 35px); ; line-height: 110%; font-weight: 200;}
body h3, .regular---heading-3{ font-size: clamp(38px, 7vw, 44px); ; line-height: 120%; font-weight: 200;}
body h2, .regular---heading-2{ font-size: clamp(35px, 4vw, 55px); ; line-height: 120%; font-weight: 200;}
body h1, .regular---heading-1{ font-size: clamp(40px, 5vw, 69px); ; line-height: 120%; font-weight: 200;}
.regular---heading-display-2{ font-size: clamp(40px, 6vw, 91px);  font-weight: 300; line-height: 90%;}
.bold---small{ font-size: 14px;  font-weight: 600}
.bold---small-caps{ font-size: 14px;  font-weight: 600; text-transform: uppercase; letter-spacing: .1em;}
.bold---body{ font-size: 18px;  font-weight: 600; line-height: 130%;}
.bold---body-caps{ font-size: 18px;  font-weight: 600; text-transform: uppercase; letter-spacing: .1em; line-height: 130%;}
.bold---heading-6{ font-size: clamp(20px, 4vw, 23px);  font-weight: 600; line-height: 120%;}
.bold---heading-5{ font-size: clamp(25px, 3vw, 28px);  font-weight: 600; line-height: 120%;}
.bold---heading-4{ font-size: clamp(30px, 7vw, 35px);  font-weight: 600; line-height: 110%;}
.bold---heading-3{ font-size: clamp(38px, 7vw, 44px);  font-weight: 600; line-height: 120%;}
.bold---heading-2{ font-size: clamp(35px, 4vw, 55px);  font-weight: 600; line-height: 120%;}
.bold---heading-1{ font-size: clamp(40px, 5vw, 69px);  font-weight: 600; line-height: 120%;}
.bold---heading-display{ font-size: clamp(139px, 3vw, 323px);  font-weight: 600; line-height: 90%;}
.bold---heading-display-2{ font-size: clamp(40px, 6vw, 91px);  font-weight: 600; line-height: 90%;}


.primario{color: var(--primario) !important}
.secundario{color: var(--secundario) !important}
.fondo{color: var(--fondo) !important}
.blanco{color: var(--blanco) !important}
.bg-primario{background-color: var(--primario);}
.bg-secundario{background-color: var(--secundario);}
.bg-terciario{background-color: var(--terciario);}
.bg-cuaternario{background-color: var(--cuaternario);}
.bg-rojo{background-color: rgba(242, 10, 10, 0.20);}
.bg-fondo{background-color: var(--fondo);}
.bg-blanco{background-color: var(--blanco);}
.bg-blanco-20{background-color: var(--blanco-20);}

.border-primario{ border: 1px solid var(--primario); }
.border-secundario{ border: 1px solid var(--secundario); }
.border-terciario{ border: 1px solid var(--terciario); }
.border-cuaternario{ border: 1px solid var(--cuaternario); }

.border-radius-4{ border-radius: 4px;}
.border-radius-8{ border-radius: 8px;}
.border-radius-16{ border-radius: 16px;}
.border-radius-24{ border-radius: 24px;}
.border-radius-40{ border-radius: 40px;}

.op-2{ opacity: .2;}
.op-5{ opacity: .5;}
.op-7{ opacity: .7;}

.invert-h{
  transform: scaleX(-1);
}

.invert-v{
  transform: scaleY(-1);
}

#header{
  display: none !important;
}

html, body{
  width: 100%;
  margin: 0;
  overflow-x: hidden;
}

body{
	/* Para evitar que las pantallas extra grandes se desconpongan */
	max-width: 2024px;
	margin: 0 auto !important;
  background-color: var(--fondo);
}

*{
  box-sizing: border-box;
}

a{
  /* text-decoration: none !important; */
  /* color: var(--secundario); */
}

.debug{
  outline: 1px solid black;
	animation: debugAnimation .3s linear infinite alternate;
  background: linear-gradient(to right, #ffffff00, #0000003f);
	background-size: 200% 100%;
}

@keyframes debugAnimation {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/*=============================================
=            Espacios basados en 8px            =
=============================================*/

/* Padding y Margin en 4 ejes */
.j-p-4{padding: 4px;}
.j-p-8{padding: 8px;}
.j-p-16{padding: 16px;}
.j-p-24{padding: 24px;}
.j-p-32{padding: 32px;}
.j-p-40{padding: 40px;}
.j-p-48{padding: 48px;}
.j-p-56{padding: 56px;}
.j-p-100{padding: 100px;}
.j-p-256{padding: 256px;}

.j-m-4{margin: 4px;}
.j-m-8{margin: 8px;}
.j-m-16{margin: 16px;}
.j-m-24{margin: 24px;}
.j-m-32{margin: 32px;}
.j-m-40{margin: 40px;}
.j-m-48{margin: 48px;}
.j-m-56{margin: 56px;}
.j-m-100{margin: 100px;}
.j-m-256{margin: 256px;}


/* Padding y Margin en Top */
.j-pt-4{padding-top: 4px;}
.j-pt-8{padding-top: 8px;}
.j-pt-16{padding-top: 16px;}
.j-pt-24{padding-top: 24px;}
.j-pt-32{padding-top: 32px;}
.j-pt-40{padding-top: 40px;}
.j-pt-48{padding-top: 48px;}
.j-pt-56{padding-top: 56px;}
.j-pt-100{padding-top: 100px;}
.j-pt-256{padding-top: 256px;}

.j-mt-4{margin-top: 4px;}
.j-mt-8{margin-top: 8px;}
.j-mt-16{margin-top: 16px;}
.j-mt-24{margin-top: 24px;}
.j-mt-32{margin-top: 32px;}
.j-mt-40{margin-top: 40px;}
.j-mt-48{margin-top: 48px;}
.j-mt-56{margin-top: 56px;}
.j-mt-100{margin-top: 100px;}
.j-mt-256{margin-top: 256px;}


/* Padding y Margin en Right */
.j-pr-4{padding-right: 4px;}
.j-pr-8{padding-right: 8px;}
.j-pr-16{padding-right: 16px;}
.j-pr-24{padding-right: 24px;}
.j-pr-32{padding-right: 32px;}
.j-pr-40{padding-right: 40px;}
.j-pr-48{padding-right: 48px;}
.j-pr-56{padding-right: 56px;}
.j-pr-100{padding-right: 100px;}
.j-pr-256{padding-right: 256px;}

.j-mr-4{margin-right: 4px;}
.j-mr-8{margin-right: 8px;}
.j-mr-16{margin-right: 16px;}
.j-mr-24{margin-right: 24px;}
.j-mr-32{margin-right: 32px;}
.j-mr-40{margin-right: 40px;}
.j-mr-48{margin-right: 48px;}
.j-mr-56{margin-right: 56px;}
.j-mr-100{margin-right: 100px;}
.j-mr-256{margin-right: 256px;}


/* Padding y Margin en Bottom */
.j-pb-4{padding-bottom: 4px;}
.j-pb-8{padding-bottom: 8px;}
.j-pb-16{padding-bottom: 16px;}
.j-pb-24{padding-bottom: 24px;}
.j-pb-32{padding-bottom: 32px;}
.j-pb-40{padding-bottom: 40px;}
.j-pb-48{padding-bottom: 48px;}
.j-pb-56{padding-bottom: 56px;}
.j-pb-100{padding-bottom: 100px;}
.j-pb-256{padding-bottom: 256px;}

.j-mb-4{margin-bottom: 4px;}
.j-mb-8{margin-bottom: 8px;}
.j-mb-16{margin-bottom: 16px;}
.j-mb-24{margin-bottom: 24px;}
.j-mb-32{margin-bottom: 32px;}
.j-mb-40{margin-bottom: 40px;}
.j-mb-48{margin-bottom: 48px;}
.j-mb-56{margin-bottom: 56px;}
.j-mb-64{margin-bottom: 64px;}
.j-mb-100{margin-bottom: 100px;}
.j-mb-256{margin-bottom: 256px;}


/* Padding y Margin en Left */
.j-pl-4{padding-left: 4px;}
.j-pl-8{padding-left: 8px;}
.j-pl-16{padding-left: 16px;}
.j-pl-24{padding-left: 24px;}
.j-pl-32{padding-left: 32px;}
.j-pl-40{padding-left: 40px;}
.j-pl-48{padding-left: 48px;}
.j-pl-56{padding-left: 56px;}
.j-pl-100{padding-left: 100px;}
.j-pl-256{padding-left: 256px;}

.j-ml-4{margin-left: 4px;}
.j-ml-8{margin-left: 8px;}
.j-ml-16{margin-left: 16px;}
.j-ml-24{margin-left: 24px;}
.j-ml-32{margin-left: 32px;}
.j-ml-40{margin-left: 40px;}
.j-ml-48{margin-left: 48px;}
.j-ml-56{margin-left: 56px;}
.j-ml-100{margin-left: 100px;}
.j-ml-256{margin-left: 256px;}


/* Padding y Margin en Horizontal */
.j-ph-4{padding-left: 4px; padding-right: 4px;}
.j-ph-8{padding-left: 8px; padding-right: 8px;}
.j-ph-16{padding-left: 16px; padding-right: 16px;}
.j-ph-24{padding-left: 24px; padding-right: 24px;}
.j-ph-32{padding-left: 32px; padding-right: 32px;}
.j-ph-40{padding-left: 40px; padding-right: 40px;}
.j-ph-48{padding-left: 48px; padding-right: 48px;}
.j-ph-56{padding-left: 56px; padding-right: 56px;}
.j-ph-100{padding-left: 100px; padding-right: 100px;}
.j-ph-256{padding-left: 256px; padding-right: 256px;}

.j-mh-4{margin-left: 4px; margin-right: 4px;}
.j-mh-8{margin-left: 8px; margin-right: 8px;}
.j-mh-16{margin-left: 16px; margin-right: 16px;}
.j-mh-24{margin-left: 24px; margin-right: 24px;}
.j-mh-32{margin-left: 32px; margin-right: 32px;}
.j-mh-40{margin-left: 40px; margin-right: 40px;}
.j-mh-48{margin-left: 48px; margin-right: 48px;}
.j-mh-56{margin-left: 56px; margin-right: 56px;}
.j-mh-100{margin-left: 100px; margin-right: 100px;}
.j-mh-256{margin-left: 256px; margin-right: 256px;}


/* Padding y Margin en Vertical */
.j-pv-4{padding-top: 2px; padding-bottom: 2px;}
.j-pv-8{padding-top: 8px; padding-bottom: 8px;}
.j-pv-16{padding-top: 16px; padding-bottom: 16px;}
.j-pv-24{padding-top: 24px; padding-bottom: 24px;}
.j-pv-32{padding-top: 32px; padding-bottom: 32px;}
.j-pv-40{padding-top: 40px; padding-bottom: 40px;}
.j-pv-48{padding-top: 48px; padding-bottom: 48px;}
.j-pv-56{padding-top: 56px; padding-bottom: 56px;}
.j-pv-100{padding-top: 100px; padding-bottom: 100px;}
.j-pv-256{padding-top: 256px; padding-bottom: 256px;}

.j-mv-4{margin-top: 2px; margin-bottom: 2px;}
.j-mv-8{margin-top: 8px; margin-bottom: 8px;}
.j-mv-16{margin-top: 16px; margin-bottom: 16px;}
.j-mv-24{margin-top: 24px; margin-bottom: 24px;}
.j-mv-32{margin-top: 32px; margin-bottom: 32px;}
.j-mv-40{margin-top: 40px; margin-bottom: 40px;}
.j-mv-48{margin-top: 48px; margin-bottom: 48px;}
.j-mv-56{margin-top: 56px; margin-bottom: 56px;}
.j-mv-100{margin-top: 100px; margin-bottom: 100px;}
.j-mv-180{margin-top: 180px; margin-bottom: 180px;}
.j-mv-256{margin-top: 256px; margin-bottom: 256px;}


/*=====  End of Espacios basados en 8px  ======*/

/*=============================================
=            Resets            =
=============================================*/

a{
  text-decoration: none !important;
}

body h1, body h2, body h3, body h4, body h5, body h6, body p{
  margin: 0;
}

/*=====  End of Resets  ======*/


/*=============================================
=            Otras            =
=============================================*/


hr{
  height: 2px;
  width: 100%;
  background: var(--Terciario, #2B3F63);
  opacity: 1;
}

.boton-cta{
  cursor: pointer;
  transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}

.boton-cta:hover{
  opacity: 1;
  transform: scale(1.1);
}

/*=====  End of Otras  ======*/




/*=====  End of Clases Auxiliares  ======*/