/* RESET BÁSICO E CONFIGURAÇÕES GERAIS */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* --- FUNDO BRANCO --- */

#conteaner {
	background-image: url("F_obs1.png");
	background-size: cover;
	background-position: right;
	background-position:top;
	background-repeat: no-repeat;
	overflow: hidden;
	position: relative;		
}
/* --- CANVAS DAS CONSTELAÇÕES --- */
#constellation-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.qd_text_info1{
	width:60%;
	height:auto;
	float:left;
	position: relative;
	font-family: 'Montserrat';
	font-weight: 500;
	font-size:14px;
	text-align:left;
	color:#333;
	margin:0 0 0 20px;
}
/* PRELOADER CAPA*/

#preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	opacity: 1;
	visibility: visible;
	transition:
	opacity 0.7s ease,
	visibility 0.7s ease;
	background-color:#002A3A;
}

/* PRELOADER SAINDO */

#preloader.loaded {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ÁREA DO LOADING */

.loading-container {
	background: linear-gradient(135deg, #008C95 0%, #002A3A 100%);
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* CÍRCULO */

.loader {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	border: 4px solid rgba(255,255,255,0.20);
	border-top-color: #4BC5B5;
	border-right-color: #008C95;
	animation: spin 1s linear infinite;
	margin-bottom: 25px;
}
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* TEXTO */

.loading-text {
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0.5px;
}

/* PONTOS ANIMADOS */

.loading-dots {
	display: inline-block;
	width: 24px;
	text-align: left;
}

.loading-dots::after {
	content: "";
	animation: dots 1.5s infinite;
}

@keyframes dots {
	0% { content: ""; }
	25% { content: "."; }
	50% { content: ".."; }
	75% { content: "..."; }
	100% { content: ""; }
}

/* LINHA DE PROGRESSO */

.loading-line {
	width: 220px;
	height: 3px;
	margin-top: 22px;
	background: rgba(255,255,255,0.15);
	overflow: hidden;
	border-radius: 10px;
}

.loading-line::before {
	content: "";
	display: block;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, #008C95, #4BC5B5);
	border-radius: 10px;
	animation: loadingLine 1.4s infinite ease-in-out;
}

@keyframes loadingLine {
	0% { transform: translateX(-120%); }
	50% { transform: translateX(180%); }
	100% { transform: translateX(300%); }
}

.alinha_logo_cej{
	width: 230px;
	height: 100px;
	float:left;
	position:absolute;
	margin:-25% 0 0 0;  
	flex-shrink: 0;
	background-image: url('logo_topo.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.alinha_rodape{
	width: 100%;
	height: 30px;
	float:left;
	position:absolute;
	bottom: 10px; 
	flex-shrink: 0;
	font-family: 'Montserrat';
	font-weight: 300;
	font-size: 13px;
	text-align:center;
	color: #FFFFFF;
}
.titulo_entrada{
	width: 100%;
	height: 30px;
	float:left;
	position:relative;
	margin:0 0 4% 0;
	flex-shrink: 0;
	font-family: 'Montserrat';
	font-weight: 600;
	font-size: 32px;
	text-align:center;
	color: #FFFFFF;
}
#conste {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}
:root{
  --navy:#002a3a;
  --navy2:#063b50;
  --teal:#00a98f;
  --mint:#69d9b1;
  --aqua:#69e5d4;
  --bg:#f2f6fa;
  --text:#16394a;
  --muted:#5e6870;
  --white:#fff;
  --shadow:0 9px 18px rgba(0,42,58,.18);
  --radius:10px;
}
a{
  text-decoration:none;
}
*{box-sizing:border-box}
html,body{
	margin:0;
	min-height:100%;
	font-family: 'Montserrat';
	font-weight: 500;
	color:var(--text);
	background:var(--bg)
}
body{overflow-x:hidden}

/* Fundo decorativo */
.page{
  position:relative;
  min-height:100vh;
  overflow:hidden;
}
/* Conteúdo */
.wrapper{
  position:relative;
  z-index:2;
  min-height:100vh;
  padding:72px 6.7% 34px;
  display:flex;
  flex-direction:column;
}
.header{
  display:flex;
  justify-content:flex-end;
  margin-bottom:34px;
  
}
.title{
  margin:2% 0;
  font-size:34px;
  line-height:1.1;
  font-weight:400;
  color:#071e2c;
  letter-spacing:.2px;
}

.main{
  display:grid;
  grid-template-columns:minmax(690px,1.35fr) minmax(330px,.65fr);
  gap:58px;
  align-items:start;
  margin-top:-6%;
  margin-left:0;
}
.cards{
  display:grid;
  grid-template-columns:repeat(5,minmax(200px,1fr));
  gap:62px 42px;
}
.card{
  position:relative;
  height:184px;
  background:rgba(255,255,255,.97);
  border-radius:10px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:27px 15px 26px;
  text-align:center;
  transition:.2s ease;
  border-bottom:4px solid #39cdbb;
  text-decoration:none;
  font-family: 'Montserrat';
font-weight: 500;
  color:#123649;
}
.card:hover{transform:translateY(-4px);box-shadow:0 13px 24px rgba(0,42,58,.23);
background-color:#39cdbb;
cursor:pointer;
color:#FFF;
}
.icon{
  width:92px;height:92px;
  display:grid;place-items:center;
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;  
  
}
.icon svg{width:68px;height:68px}
.card-title{
  min-height:39px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1.25;font-weight:650;
  text-decoration:none;
  text-decoration-line:none;
}
.icon_info{
  width:78px;height:78px;
  display:grid;place-items:left;
  background-size: cover;
  background-repeat: no-repeat; 
}
.go{
  position:absolute;
  bottom:-25px;
  width:40px;height:40px;
  border-radius:50%;
  border:0;
  background:#fff;
  box-shadow:0 5px 13px rgba(0,42,58,.18);
  color:#009e8b;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
.go:hover{transform:scale(1.05)}

.info{
  margin-top:auto;
  width:min(100%,1310px);
  background:#fff;
  border-radius:10px;
  box-shadow:0 7px 17px rgba(0,42,58,.18);
  min-height:130px;
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr 1fr;
  align-items:center;
  padding:18px 15px;
}
.logo_rp {
  position: absolute;
  bottom: 10%;
  right: 10%;
  width: 220px;
  height: 122px;
  display: grid;
  place-items: center;
  background-size: contain; 
  background-position: center;
  background-repeat: no-repeat;
}
.info-item{
  min-height:82px;
  display:grid;
  grid-template-columns:82px 1fr;
  gap:12px;
  align-items:center;
  padding:0 22px;
  border-right:1px solid #cbd1d5;
}
.info-item:last-child{border-right:0}
.info-icon{width:48px;height:48px;color:#0085a1}
.info h3{margin:0 0 5px;color:#00947f;font-size:17px;font-weight:500}
.info p{margin:0;font-size:14px;line-height:1.35;color:#45494d}

.footer{
  margin-top:95px;
  text-align:left;
  font-size:14px;color:#12394d;
  font-family: 'Montserrat';
  font-weight: 500;
  margin:2% 0 0 8%;
}

/* ================= MOBILE ================= */
@media (max-width:1023px){

  .header{justify-content:center;margin-bottom:25px;padding-right:0}
  .title{
  font-size:30px;
  text-align:center;
  margin-top:-10%;
  margin-bottom:20px;
  }
  .main{display:block}
  .cards{
    grid-template-columns:repeat(2,minmax(135px,1fr));
    gap:40px 20px;
    max-width:650px;
    margin:0 auto;
  }
  .card{height:165px;padding:21px 10px 23px}
  .icon{width:61px;height:61px}.icon svg{width:58px;height:58px}
  .card-title{font-size:13px}
  .go{width:36px;height:36px;bottom:-22px;font-size:25px}
  .brand{margin:80px auto 30px}
  .brand-name{font-size:30px}
  .info{
    width:100%;
    grid-template-columns:1fr;
    padding:8px 16px;
	position:relative;
	margin-top:6%;
  }
  .info-item{
    min-height:74px;
    padding:13px 5px;
    border-right:0;
    border-bottom:1px solid #cbd1d5;
  }
  .info-item:last-child{border-bottom:0}
  .info h3{font-size:16px}
  .info p{font-size:13px}
  .footer{margin-top:30px;font-size:10px;padding-bottom:8px}
  .logo_rp {
	margin:6% 0 0 38%;
	position:relative;
  }
  .alinha_logo_cej{
	width: 230px;
	height: 100px;
	float:left;
	position:absolute;
	margin:-55% 0 0 0;  
	flex-shrink: 0;
	background-image: url('logo_topo.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
}
@media (max-width:480px){
  .wrapper{padding-left:14px;padding-right:14px}
  .title{font-size:20px}
  .title:before{margin-right:6px}
  .cards{gap:30px 12px}
  .card{height:153px;padding-top:18px}
  .card-title{font-size:12px}
  .brand{margin-top:65px}
  .brand-name{font-size:27px}
}

/* Notebook*/
@media (max-width: 1366px) {  
/* Conteúdo */
.wrapper{
  position:relative;
  z-index:2;
  min-height:100vh;
  padding:0 2.1% 4px;
  display:flex;
  flex-direction:column;
}
.header{
  display:flex;
  justify-content:flex-end;
  margin-bottom:0;
  
}
.title{
  margin:6% 0;
  font-size:28px;
  line-height:12px;
  font-weight:400;
  color:#071e2c;
  letter-spacing:0.2px;
}

.main{
  display:grid;
  grid-template-columns:minmax(690px,1.35fr) minmax(330px,.65fr);
  gap:58px;
  align-items:start;
  margin-top:-10%;
  margin-left:0;
}
.cards{
  display:grid;
  grid-template-columns:repeat(5,minmax(150px,1fr));
  gap:32px 32px;
}
.card{
  position:relative;
  height:144px;
  background:rgba(255,255,255,.97);
  border-radius:10px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:17px 15px 16px;
  text-align:center;
  transition:.2s ease;
  border-bottom:4px solid #39cdbb;
  text-decoration:none;
  font-family: 'Montserrat';
font-weight: 500;
  color:#123649;
}
.card:hover{transform:translateY(-4px);box-shadow:0 13px 24px rgba(0,42,58,.23);
background-color:#39cdbb;
cursor:pointer;
color:#FFF;
}
.icon{
  width:78px;height:78px;
  display:grid;place-items:center;
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;  
  
}
.icon svg{width:68px;height:68px}
.card-title{
  min-height:39px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1.25;font-weight:650;
  text-decoration:none;
  text-decoration-line:none;
}
.icon_info{
  width:78px;height:78px;
  display:grid;place-items:left;
  background-size: cover;
  background-repeat: no-repeat; 
}
.go{
  position:absolute;
  bottom:-25px;
  width:40px;height:40px;
  border-radius:50%;
  border:0;
  background:#fff;
  box-shadow:0 5px 13px rgba(0,42,58,.18);
  color:#009e8b;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
.go:hover{transform:scale(1.05)}

.info{
  margin-top:auto;
  width:min(90%,1000px);
  background:#fff;
  border-radius:10px;
  box-shadow:0 7px 17px rgba(0,42,58,.18);
  min-height:130px;
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr 1fr;
  align-items:center;
  padding:1px 1px;
}
.logo_rp {
  position: absolute;
  bottom: 10%;
  right: 6%;
  width: 160px;
  height: 122px;
  display: grid;
  place-items: center;
  background-size: contain; 
  background-position: center;
  background-repeat: no-repeat;
}
.info-item{
  min-height:82px;
  display:grid;
  grid-template-columns:72px 1fr;
  gap:12px;
  align-items:center;
  padding:0 22px;
  border-right:1px solid #cbd1d5;
}
.info-item:last-child{border-right:0}
.info-icon{width:48px;height:48px;color:#0085a1}
.info h3{margin:0 0 5px;color:#00947f;font-size:17px;font-weight:500}
.info p{margin:0;font-size:14px;line-height:1.35;color:#45494d}

.footer{
  margin-top:95px;
  text-align:left;
  font-size:14px;color:#12394d;
  font-family: 'Montserrat';
  font-weight: 500;
  margin:2% 0 0 8%;
}
}