@charset "UTF-8";
/* CSS Document */


/*******************
LIMIPIAR
*******************/
* {
	padding:0;
	margin:0;
	border:0;
	-moz-box-sizing: border-box; /*para que el borde entre dentro del ancho de caja*/
	-webkit-box-sizing: border-box; /*para que el borde entre dentro del ancho de caja*/
	box-sizing: border-box; /*para que el borde entre dentro del ancho de caja*/
	font-family: 'Rubik', sans-serif;
	}

header, nav, article, aside, section, footer {
	display:block;
}

.close {
	clear:both;
}

.centered {
	margin-left: auto;
	margin-right: auto;
}

a {
	text-decoration: none;
}


/****************************************************************************
****************************************************************************
COLORES
****************************************************************************
****************************************************************************/

/*******************
GREYS
*******************/

:root {
  --grey-color-100: #E0E3E8; /* Textos "blancos" */
  --grey-color-500: #63758D; /* Textos "grises" */
  --grey-color-700: #2A3549; /* Bordes */
  --grey-color-800: #0F172B; /* Fondos cajas */
  --grey-color-900: #040A1C; /* Body */
}

/*******************
PRIMARY
*******************/

:root {
  --primary-color-400: #9576FC; /* Textos e iconos */
  --primary-color-500: #7A54FB; /* Fondos */
  --primary-color-800: #312264; /* Fondos info ligth */
  --primary-color-900: #1E153F; /* Fondos info */
  --primary-color-pink: #B370FD; /* Degradado */
}

/*******************
SECONDARY
*******************/

:root {
  --secondary-color-500: #40F99B; /* Botones */
  --secondary-color-700: #26955D; /* Botones hover */
}

/****************************************************************************
****************************************************************************
TYPE
****************************************************************************
****************************************************************************/

.header-1, .header-2, .header-3, .header-4, .header-5, .header-6,
.body-xs, .body-sm, .body-md, .body-lg {
	font-family: "Inter", sans-serif !important;
}

/* Headers */

.header-1 {
	font-size: 104px !important;
	line-height: 124px;
	font-weight: bold !important;
}

.header-2 {
	font-size: 48px !important;
	line-height: 56px;
	font-weight: 500 !important;
}

.header-3 {
	font-size: 40px !important;
	line-height: 48px;
	font-weight: 500 !important;
}

.header-4 {
	font-size: 32px !important;
	line-height: 40px;
	font-weight: 500 !important;
}

.header-5 {
	font-size: 24px !important;
	line-height: 28px;
	font-weight: 500 !important;
}

.header-6 {
	font-size: 20px !important;
	line-height: 24px;
	font-weight: 500 !important;
}

/* Body */

.body-xs {
	font-size: 12px !important;
	line-height: 16px;
	font-weight: 400 !important;
}

.body-sm {
	font-size: 14px !important;
	line-height: 20px;
	font-weight: 400 !important;
}

.body-md {
	font-size: 16px !important;
	line-height: 24px;
	font-weight: 400 !important;
}

.body-lg {
	font-size: 20px !important;
	line-height: 24px;
	font-weight: 400 !important;
}

/****************************************************************************
****************************************************************************
BUTTONS AND LINKS
****************************************************************************
****************************************************************************/

/*******************
TEXTOS
*******************/

a.main-link {
	color: #64FFDA;
	font-size: 16px;
}

a.main-link:hover {
	text-decoration: underline;
}


/****************************************************************************
****************************************************************************
COMPONENTES
****************************************************************************
****************************************************************************/

/*******************
GENERALES
*******************/

body {
	margin:0;
	padding:0;
	width: 100%;
	height: auto;
	font-family: 'Source Sans Pro', sans-serif;
	background-color: var(--grey-color-900);
	overflow-x: hidden;
}

body.mobile-menu-on {
	position: fixed !important;
}


/*******************
FORMAS
*******************/

.w-big {
	max-width: 1600px;
	padding-left: 24px;
	padding-right: 24px;
	width: 100%;
}

.w-medium {
	max-width: 1164px;
	padding-left: 24px;
	padding-right: 24px;
	width: 100%;
}

.w-small {
	max-width: 860px;
	padding-left: 24px;
	padding-right: 24px;
	width: 100%;
}

.rounded {
	-webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

.rad-4 {
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.rad-8 {
	-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.rad-16 {
	-webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}

/*******************
SECTIONS
*******************/

.main-section {
	padding-top: 72px;
	padding-bottom: 72px;
}

.main-section-title {
	margin-bottom: 80px;
	text-align: center;
	display: flex;
	gap: 24px;
	flex-direction: column;
}

.main-section-title .header-3 {
	color: var(--grey-color-100);
}

.main-section-title .header-6 {
	color: var(--grey-color-500);
}




/****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************
MOBILE
****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************/

@media (max-width: 768px) {


/* Headers */

.header-1 {
	font-size: 56px !important;
	line-height: 64px;
}

.header-2 {
	font-size: 40px !important;
	line-height: 48px;
}

.header-3 {
	font-size: 32px !important;
	line-height: 40px;
}

.header-4 {
	font-size: 24px !important;
	line-height: 28px;
}

.header-5 {
	font-size: 20px !important;
	line-height: 24px;
}

.header-6 {
	font-size: 16px !important;
	line-height: 20px;
}

/* BOdy */

.body-xs {
	font-size: 12px !important;
	line-height: 16px;
}

.body-sm {
	font-size: 14px !important;
	line-height: 20px;
}

.body-md {
	font-size: 16px !important;
	line-height: 24px;
}

/*******************
SECTIONS
*******************/

.main-section {
	padding-top: 48px;
	padding-bottom: 48px;
}

.main-section-title {
	margin-bottom: 48px;
	gap: 16px;
}



}