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

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch: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 */
  --principal: #0AB8F2;
  --secundario: #E0F7FF;
  --negro: #333;
  --blanco: #FFFFFF;
  --blanco-20: rgba(255, 255, 255, 0.20);
}

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


.principal{color: var(--principal) !important}
.secundario{color: var(--secundario) !important}
.negro{color: var(--negro) !important}
.blanco{color: var(--blanco) !important}
.bg-principal{background-color: var(--principal);}
.bg-secundario{background-color: var(--secundario);}
.bg-rojo{background-color: rgba(242, 10, 10, 0.20);}
.bg-negro{background-color: var(--negro);}
.bg-blanco{background-color: var(--blanco);}
.bg-blanco-20{background-color: var(--blanco-20);}

.border-j{
  border: 1px solid var(--negro);
}

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

.border-principal{
  /* Border Azul */
  box-shadow: 8px 8px 0px 0px var(--principal);
}

.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;
}

*{
  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  ======*/

.esfera-icono{
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

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

a{
  text-decoration: none !important;
}

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

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


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