@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
    font-family: 'news701bt';
    src: url('fonts/news701bt.eot');
    src: url('fonts/news701bt.eot') format('embedded-opentype'),
         url('fonts/news701bt.woff2') format('woff2'),
         url('fonts/news701bt.woff') format('woff'),
         url('fonts/news701bt.ttf') format('truetype'),
         url('fonts/news701bt.svg#news701bt') format('svg');
}

:root {
	--blu-brand:#212a4d;
	--blu-brand-text:#ffffff;
	--blu-blue:#162651;
	--blu-blue-text:#ffffff;
	--blu-blue-text-secundary:#9ec6e6;
	--blu-action:#2bb30d;
	--blu-action-text:#ffffff;
	--blu-solid:#ffffff;
	--blu-solid-text:#14274f;
	--blu-font:'roboto_regular';
	--blu-bold:'roboto_bold';
	--blu-yellow:#ffc703;
	--blu-light:#e0e6f5;
}


html {
	background:#ffffff;
}
body,body * {
	font-family:var(--blu-font);
}

#mask,
#mask * {
	font-family: 'Montserrat';
}

#mask em {
	font-family: 'news701bt';
    font-style: italic;
}

[scale] {
	transition:0.3s;
}
[scale]:hover {
	z-index:1000;
	transform:scale(1.05);
}

body::before {
	display:block;
	content:'';
	height:70px;
}
blu-navigation {
	display:block;
	position:fixed;
	left:0;
	right:0;
	top:0;
	background:var(--blu-brand);
	z-index:10000;
}
	blu-navigation > div {
		display:flex;
		flex-direction:row;
		align-items:center;
		justify-content:space-between;
		height:80px;
	}
	blu-navigation [logo] {
		display:block;
		line-height:0;
	}
		blu-navigation [logo] > img {
			height:50px;
		}
	blu-menu {
		display:flex;
		flex-direction:row;
		align-items:center;
	}
		blu-menu > a {
		    font-weight:bold;
			color:var(--blu-brand-text);
			transition:0.3s;
		    white-space:nowrap;
		    padding:10px;
		}
		blu-menu > a:hover {
			color:var(--blu-yellow);
		}
		blu-menu > b {
			display:none !important;
	        align-items:center;
	        justify-content:center;
	        width:55px;
	        height:55px;
	        font-size:24px;
	        pointer-events:none;
			color:var(--blu-brand-text);
		}

blu-banner {
	display:block;
	background:var(--blu-blue) no-repeat center center;
	background-size:cover;
	border-radius:0 0 100px 100px;
}
	blu-banner > div {
		line-height:0;
		width:100% !important;
	}
		blu-banner > div img {
			width:100%;
			opacity:0;
			pointer-events:none;
		}

blu-about {
	display:block;
	position:relative;
	margin: 40px 0;
}
	blu-about > div {
		position:relative;
		display:flex;
		flex-direction:row;
		gap:10%;
		align-items:center;
		margin-bottom: -50px !important;
	}
	blu-about-content {
		display:block;
		padding:100px 0; 
		position:relative;
		flex:1;
	}
		blu-about-content > h3 {
			display:block;
			position:relative;
		}
			blu-about-content > h3 b {
				display:inline-block;
				position:relative;
				color:var(--blu-solid-text);
				font-weight:normal;
				font-weight:bold;
				font-size:30px;
			}
		blu-about-content > p {
			margin-top:30px;
			color:var(--blu-solid-text);
			text-align:justify;
			font-size:14px;
		}
	blu-about-background {
		flex:1;
		position:relative;
		margin-bottom:-100px;
	}
		blu-about-background img {
			position:relative;
			width:100%;
			border-radius: 20px;
		}
		blu-about-background::before {
			display:block;
			content:'';
			position:absolute;
			left:50%;
			top:-20px;
			bottom:-20px;
			right:-20px;
			border-radius:20px;
			background:#0080ca;
		}

blu-datas-wrap {
	display:block;	
	padding:120px 0;
	background:var(--blu-blue);
	background-size:contain;
	color:var(--blu-blue-text);
}
	blu-datas-wrap h3 {
		display:block;
		text-align:center;
		font-weight:normal;
		font-weight:bold;
		font-size:30px;
	}

	blu-datas-table {
		display:flex;
		flex-direction:column;
		gap:50px;
		margin-top:60px;
	}
		blu-datas {
			display:flex;
			flex-direction:row;
			gap:15px;
		}
			blu-data {
				display: flex;
			    flex-direction: column;
			    flex: 1;
			    background: #fff;
			    border-radius: 20px;
			    padding: 30px;
			    position:relative;
			}
			blu-data[center] {
				justify-content: center;
			}
				blu-data > i {
					text-align: center;
				    background: #000000;
				    border-radius: 6px;
				    display: flex;
				    align-items: center;
				    justify-content: center;
				    color: #fff;
				    font-family: var(--blu-bold);
				    width: 44px;
				    height: 40px;
				    margin-left: -22px;
				    margin-top: -28px;
				    position: absolute;
				    left: 50%;
				    top: 0;
				    font-size: 20px;
				    font-weight:bold;
				}
					blu-data > i::after {
						display: block;
					    content: '';
					    position: absolute;
					    left: 50%;
					    bottom: 0;
					    background: inherit;
					    border-radius: 2px;
					    width: 10px;
					    height: 10px;
					    transform: rotate(45deg);
					    margin-bottom: -4px;
					    margin-left: -5px;
					}
				blu-data > b {
					display:block;
					text-align:center;
					font-weight:bold;
					color:var(--blu-solid-text);
					font-size:50px;
					font-weight:bold;
					letter-spacing:-2px;
				}
				blu-data p {
					color:var(--blu-brand);
					text-align:center;
					min-height: 100px;
				}
					blu-data p > b {
						font-weight:bold;
					}
			blu-data:nth-child(1) > i {background: #0064af}
			blu-data:nth-child(1) > b {color: #07224c}
			blu-data:nth-child(2) > i {background: #0080ca}
			blu-data:nth-child(2) > b {color: #037fc9}
			blu-data:nth-child(3) > i {background: #06aee9}
			blu-data:nth-child(3) > b {color: #06aee9}
			blu-data:nth-child(4) > i {background: #54c9ff}
			blu-data:nth-child(4) > b {color: #57c8ff}
 

blu-report {
	padding: 120px 110px;
	background: var(--blu-blue) no-repeat left center url('revisa.png');
	background-size:cover;
	color: var(--blu-blue-text);
	margin: 90px 0;
	border-radius: 30px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	position:relative;
}


blu-footer {
	display:block;
	background:var(--blu-brand);
	padding:60px 0;
	margin-top: 80px;
}
	blu-footer > div {
		display:flex;
		flex-direction:row;
		justify-content:space-between;
	}
	blu-footer [logo] {
		height:50px;
	}
	blu-footer blu-socials {
		display:flex;
		flex-direction:row;
		align-items:center;
	}
		blu-footer blu-socials a {
			color:var(--blu-brand-text);
			padding:10px;
		}

blu-button {
	display:flex;
	flex-direction:row;
	gap:10px;
}
	blu-button > i {
		text-align:center;
		font-weight:bold;
	}
	blu-button > * {
		padding: 0;
	    background: #000000;
	    color: #fff;
	    border-radius: 10px;
	    font-size: 20px;
	    position: relative;
	    display: flex;
	    flex-direction: row;
	    gap: 20px;
	    flex: 1;
	    align-items: center;
		height: 60px;
		line-height: 1;
	}
	blu-button > *:first-child {
	    flex: unset;
	}
	blu-button > *:last-child {
	    flex: 1 !important;
	}
		blu-button > * > *:first-child {
			flex:1;
		}
		blu-button > * > *:last-child {
			flex:unset;
		}
		blu-button > * > span,
		blu-button > * > b {
			padding: 0 18px;
		}
		blu-button > * > i {
		    border-radius: inherit;
		    line-height: 0;
		    display: block;
		    height: 100%;
		    background:no-repeat center center url('download.png');
		    background-size:40%;
		}
			blu-button > * > i > img {
				height:100%;
			}

	blu-button[rojo] > * 	 { background-color:#ff6d71 }
	blu-button[rojo] > * > i { background-color:#bf3033 }
	blu-button[azul] > * 	 { background-color:#07224d }
	blu-button[azul] > * > i { background-color:#4b669b }
	blu-button[celeste] > * 	{ background-color:#0080ca }
	blu-button[celeste] > * > i { background-color:#01599b }
	blu-button[aqua] > * 	 { background-color:#028d8e }
	blu-button[aqua] > * > i { background-color:#006969 }
	blu-button[amarillo] > * 	 { background-color:#fcb100 }
	blu-button[amarillo] > * > i { background-color:#d69100 }
	blu-button[mora] > * 	 { background-color:#c67197 }
	blu-button[mora] > * > i { background-color:#a54c74 }
	blu-button[verde] > * 	  { background-color:#04b137 }
	blu-button[verde] > * > i { background-color:#00911e }

[title] {
	display: block;
    text-align: center;
    margin-bottom: 50px;
    font-size: 30px;
}

blu-capitulos {
	display:flex;
	flex-direction:row;
	gap:20px;
}
	blu-capitulos-row {
		display:flex;
		flex-direction:column;
		gap:30px;
		flex: 1;
	}
	blu-capitulos-row > * {
		width: 100%;
	}

blu-copy {
	display:block;
	background:var(--blu-blue);
	padding:20px 0;
}
	blu-copy > div,
	blu-copy a {
		color:var(--blu-blue-text-secundary);
	}
	blu-copy a:hover {
		text-decoration:underline;
	}

@media only screen and (max-width:770px), only screen and (max-device-width:770px) {
	blu-data > b { 
	    font-size: 40px; 
	}
	blu-data p {
	    font-size: 12px;
	}
	blu-button > * { 
	    font-size: 15px; 
	}
	blu-report {
	    padding:60px 30px;
	}
}

@media only screen and (max-width:680px), only screen and (max-device-width:680px) {
	blu-chapters {
	    flex-direction:column;
	}
	blu-datas {
		flex-direction:column;
		gap: 50px;
	}
	blu-data:empty {
		display:none;
	}
	blu-about-background {
	    position:relative;
	    height:200px;
	    margin-bottom:-50px;
	}
	blu-about-content {
	    margin-left:0;
	    padding: 0 0 60px 0;
	}
	blu-banner {
	    border-radius: 0 0 40px 40px;
	}
	blu-menu {
	    flex-direction:column;
        align-items:flex-end;
        position:absolute;
        right:15px;
        top:15px;
        background:var(--blu-brand);
	}
		blu-menu > b {
			display:flex !important;
		}
		blu-menu > a {
			display:none;
			padding:10px 20px;
		}
		blu-menu:hover > a {
			display:block;
		}
	blu-about > div {
	    flex-direction: column;
	    gap: 0;
	}
	blu-about-background::before {
	    top: -13px;
	    bottom: -13px;
	    right: -13px;
	}
	blu-capitulos {
	    flex-direction: column;
	}
	blu-capitulos-row {
	    flex-direction: column;
	    gap:20px;
	}
	blu-button > * {
	    font-size: 17px;
	}
	blu-report {
    	padding: 70px 110px;
	}
		blu-report blu-button {
			position:absolute;
			left:50%;
			bottom: -40px;
        	margin-left: -100px;
		}
}




@font-face {
    font-family:'roboto_thin';
    src:url('/src/font/roboto-thin-webfont.woff2') format('woff2'),
         url('/src/font/roboto-thin-webfont.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'roboto_light';
    src:url('/src/font/roboto-light-webfont.woff2') format('woff2'),
         url('/src/font/roboto-light-webfont.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'roboto_regular';
    src:url('/src/font/roboto-regular-webfont.woff2') format('woff2'),
         url('/src/font/roboto-regular-webfont.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'roboto_medium';
    src:url('/src/font/roboto-medium-webfont.woff2') format('woff2'),
         url('/src/font/roboto-medium-webfont.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'roboto_bold';
    src:url('/src/font/roboto-bold-webfont.woff2') format('woff2'),
         url('/src/font/roboto-bold-webfont.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'roboto_black';
    src:url('/src/font/roboto-black-webfont.woff2') format('woff2'),
         url('/src/font/roboto-black-webfont.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}