/*==================================================
CIET
Desenvolvido exclusivamente para a instituição
==================================================*/


/*=========================
RESET
=========================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:#031b31;
color:#FFF;
overflow-x:hidden;
}

a{
text-decoration:none;
}

img{
display:block;
max-width:100%;
}

ul{
list-style:none;
}

.container{
width:min(92%,1300px);
margin:auto;
}


/*=========================
VARIÁVEIS
=========================*/

:root{

--azul1:#041d35;
--azul2:#082b48;
--azul3:#0B4E88;
--azulGlow:#2EA8FF;

--branco:#FFFFFF;
--cinza:#D8E4EF;

--gradiente:linear-gradient(135deg,#031C34,#0A4270);

--sombra:0 25px 50px rgba(0,0,0,.35);

--radius:18px;

}


/*=========================
SCROLLBAR
=========================*/

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#051f39;
}

::-webkit-scrollbar-thumb{
background:#2EA8FF;
border-radius:50px;
}


/*=========================
PRELOADER
=========================*/

#preloader{

position:fixed;

inset:0;

background:#02111f;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:1s;

}

.loader{

position:relative;

width:180px;

height:180px;

}

.loader img{

width:95px;

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}

.loader-ring{

width:180px;

height:180px;

border-radius:50%;

border:3px solid rgba(255,255,255,.08);

border-top:3px solid #2EA8FF;

animation:girar 1.2s linear infinite;

}


/*=========================
HEADER
=========================*/

header{

position:fixed;

width:100%;

top:0;

left:0;

z-index:999;

transition:.4s;

}

header.scrolled{

background:rgba(255,255,255,.08);

box-shadow:0 15px 30px rgba(0,0,0,.35);

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

height:95px;

}

.logo img{

width:78px;

}

nav ul{

display:flex;

gap:45px;

}

nav a{

color:white;

font-size:15px;

transition:.3s;

position:relative;

}

nav a::after{

content:"";

position:absolute;

width:0;

left:0;

bottom:-7px;

height:2px;

background:#2EA8FF;

transition:.4s;

}

nav a:hover::after{

width:100%;

}

.menuMobile{

display:none;

}


/*==================================================
HERO
==================================================*/

.hero{

min-height:100vh;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

background:

radial-gradient(
circle at top,
#14568f 0%,
transparent 40%
),

linear-gradient(
135deg,
#02111f,
#0B3C66
);

}

.heroOverlay{

position:absolute;

inset:0;

background:

radial-gradient(
circle,
#2EA8FF22,
transparent 65%
);

}

.heroParticles{

position:absolute;

inset:0;

background-image:

radial-gradient(
#ffffff15 1px,
transparent 1px
);

background-size:35px 35px;

opacity:.25;

}

.heroContent{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:50px;

position:relative;

z-index:2;

}

.heroLeft{

animation:fadeLeft 1.2s;

}

.miniTitle{

display:inline-block;

padding:8px 20px;

border:1px solid rgba(255,255,255,.18);

border-radius:50px;

margin-bottom:30px;

color:#8fd8ff;

}

.hero h1{

font-family:'Poppins',sans-serif;

font-size:40px;

line-height:50px;

margin-bottom:35px;

}

.hero p{

color:#d5e6f6;

line-height:34px;

font-size:20px;

max-width:640px;

}

.heroButtons{

display:flex;

gap:20px;

margin-top:50px;

}

.btnPrimary{

background:#2EA8FF;

color:white;

padding:18px 34px;

border-radius:50px;

transition:.4s;

font-weight:600;

}

.btnPrimary:hover{

transform:translateY(-6px);

box-shadow:

0 20px 40px rgba(46,168,255,.4);

}

.btnSecondary{

border:2px solid rgba(255,255,255,.3);

color:white;

padding:18px 34px;

border-radius:50px;

transition:.4s;

}

.btnSecondary:hover{

background:white;

color:#03203c;

}


/*==================================================
SISTEMA ORBITAL DA TERRA
==================================================*/


/*========================================
ÁREA DIREITA DO HERO
========================================*/

.heroRight{

position:relative;

width:650px;

height:650px;

display:flex;

align-items:center;

justify-content:center;

margin:auto;

}


/*========================================
SISTEMA COMPLETO
========================================*/

.earthSystem{

position:relative;

width:620px;

height:620px;

display:flex;

align-items:center;

justify-content:center;

}


/*========================================
BRILHO AMBIENTAL
========================================*/

.earthSystem::before{

content:"";

position:absolute;

width:520px;

height:520px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(32,166,235,.16),
rgba(32,166,235,.06) 42%,
transparent 72%
);

filter:blur(15px);

z-index:0;

}


/*========================================
ÓRBITAS VISUAIS
========================================*/

.earthOrbit{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

border-radius:50%;

pointer-events:none;

}


/*========================================
ÓRBITA EXTERNA
========================================*/

.orbitOuter{

width:610px;

height:610px;

border:

1px solid
rgba(71,184,235,.22);

animation:

rotateOrbit 45s linear infinite;

}


/*========================================
ÓRBITA MÉDIA
========================================*/

.orbitMiddle{

width:505px;

height:505px;

border:

1px solid
rgba(71,184,235,.28);

animation:

rotateOrbitReverse 34s linear infinite;

}


/*========================================
ÓRBITA INTERNA
========================================*/

.orbitInner{

width:400px;

height:400px;

border:

1px dashed
rgba(95,202,247,.25);

animation:

rotateOrbit 26s linear infinite;

}


/*========================================
ANIMAÇÕES DAS ÓRBITAS
========================================*/

@keyframes rotateOrbit{

from{

transform:
translate(-50%,-50%)
rotate(0deg);

}

to{

transform:
translate(-50%,-50%)
rotate(360deg);

}

}


@keyframes rotateOrbitReverse{

from{

transform:
translate(-50%,-50%)
rotate(360deg);

}

to{

transform:
translate(-50%,-50%)
rotate(0deg);

}

}


/*========================================
TERRA
========================================*/

.earth{

position:absolute;

width:315px;

height:315px;

left:50%;

top:50%;

transform:
translate(-50%,-50%);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

z-index:5;

}


/*========================================
GLOW DA TERRA
========================================*/

.earthGlow{

position:absolute;

width:350px;

height:350px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(35,174,240,.30),
rgba(35,174,240,.08) 45%,
transparent 70%
);

filter:blur(8px);

animation:

earthPulse 5s ease-in-out infinite;

z-index:0;

}


@keyframes earthPulse{

0%,
100%{

transform:scale(.96);

opacity:.65;

}

50%{

transform:scale(1.04);

opacity:1;

}

}


/*========================================
IMAGEM DA TERRA
========================================*/

.earth img{

position:relative;

width:100%;

height:100%;

object-fit:contain;

z-index:2;

filter:

drop-shadow(
0 0 22px
rgba(45,181,245,.55)
);

}


/*==================================================
TRILHO DOS 4 ELEMENTOS
==================================================*/

.orbitTrack{

position:absolute;

width:510px;

height:510px;

left:50%;

top:50%;

transform:

translate(-50%,-50%);

border-radius:50%;

z-index:8;

animation:

orbitMovement 38s linear infinite;

}


/*========================================
MOVIMENTO ORBITAL
========================================*/

@keyframes orbitMovement{

from{

transform:

translate(-50%,-50%)
rotate(0deg);

}

to{

transform:

translate(-50%,-50%)
rotate(360deg);

}

}


/*========================================
POSIÇÃO INDIVIDUAL
========================================*/

.orbitPosition{

position:absolute;

width:145px;

height:145px;

}


/*========================================
EDUCAÇÃO
========================================*/

.positionEducation{

top:0;

left:50%;

transform:

translate(-50%,-50%);

}


/*========================================
TURISMO
========================================*/

.positionTourism{

top:50%;

right:0;

transform:

translate(50%,-50%);

}


/*========================================
COMÉRCIO
========================================*/

.positionCommerce{

bottom:0;

left:50%;

transform:

translate(-50%,50%);

}


/*========================================
MEIO AMBIENTE
========================================*/

.positionEnvironment{

top:50%;

left:0;

transform:

translate(-50%,-50%);

}


/*========================================
ELEMENTOS ORBITAIS
========================================*/

.orbitItem{

position:absolute;

width:145px;

height:145px;

border-radius:50%;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:8px;

background:

radial-gradient(
circle at 35% 30%,
rgba(29,91,137,.88),
rgba(3,30,52,.97)
);

border:

1px solid
rgba(69,188,242,.65);

box-shadow:

0 0 20px
rgba(28,163,228,.15),

inset 0 0 25px
rgba(30,154,218,.08);

backdrop-filter:blur(8px);

z-index:10;

transition:

border-color .35s ease,
box-shadow .35s ease;

}


/*========================================
HOVER
========================================*/

.orbitItem:hover{

    background:rgba(46,168,255,.20);

    color:#ffffff;

    transform:scale(1.1);

    box-shadow:

        0 0 20px
        rgba(46,168,255,.35);

}


/*========================================
ÍCONE
========================================*/

.orbitIcon{

 width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(110,211,249,.35);

    background:rgba(45,170,229,.10);

    color:#81d7fa;

    font-size:21px;

    box-shadow:

        0 0 15px
        rgba(39,174,233,.15),
        inset 0 0 10px
        rgba(39,174,233,.08);

    transition:.4s;

}


/*========================================
TEXTO
========================================*/

.orbitItem span{

color:#fff;

font-family:'Poppins',sans-serif;

font-size:15px;

font-weight:600;

text-align:center;

}


/*========================================
PONTOS LUMINOSOS
========================================*/

.spacePoint{

position:absolute;

width:5px;

height:5px;

border-radius:50%;

background:#8ee3ff;

box-shadow:

0 0 8px
#4cc7f4,

0 0 18px
rgba(60,195,245,.7);

z-index:3;

animation:

pointBlink 3s ease-in-out infinite;

}


@keyframes pointBlink{

0%,
100%{

opacity:.25;

transform:scale(.7);

}

50%{

opacity:1;

transform:scale(1.5);

}

}


/*========================================
POSIÇÃO DOS PONTOS
========================================*/

.point01{

top:55px;

left:300px;

}


.point02{

top:130px;

right:72px;

animation-delay:.6s;

}


.point03{

right:25px;

top:310px;

animation-delay:1.1s;

}


.point04{

bottom:65px;

right:220px;

animation-delay:1.8s;

}


.point05{

bottom:145px;

left:35px;

animation-delay:2.3s;

}


.point06{

top:260px;

left:25px;

animation-delay:1.4s;

}


/*==================================================
ANIMAÇÕES GERAIS
==================================================*/

@keyframes girar{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}


@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-70px);

}

to{

opacity:1;

transform:translateX(0);

}

}


@keyframes fadeRight{

from{

opacity:0;

transform:translateX(70px);

}

to{

opacity:1;

transform:translateX(0);

}

}


@keyframes subir{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:translateY(0);

}

}


@keyframes flutuar{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}


/*==================================================
QUEM SOMOS
==================================================*/

.about{

padding:140px 0;

background:#061a2c;

}

.about .container{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.sectionMini{

color:#49b5ff;

font-weight:700;

letter-spacing:2px;

}

.about h2{

margin-top:2px;

font-size:46px;

font-family:Poppins,sans-serif;

margin-bottom:3px;

}
.about destaque{

margin-top:2px;

font-size:46px;

font-family:Poppins,sans-serif;

margin-bottom:3px;

color:#2EA8FF;
}

.about mini_destaque{
font-size:18px;

font-family:Poppins,sans-serif;

color:#2EA8FF;
}

.about p{

line-height:34px;

color:#d8e5ef;

margin-bottom:25px;

font-size:18px;

}

.about img{

border-radius:25px;

box-shadow:0 25px 70px rgba(0,0,0,.4);

transition:.6s;

}

.about img:hover{

transform:scale(1.02);

}


/*==================================================
PROPÓSITO
==================================================*/

.purpose{

padding:120px 0;

display:flex;

justify-content:center;

background:

linear-gradient(
180deg,
#061a2c,
#082a47
);

}

.purpose img{

width:min(1200px,90%);

border-radius:30px;

box-shadow:

0 35px 80px rgba(0,0,0,.4);

}


/*==================================================
PILARES
==================================================*/

.pilares{

padding:150px 0;

background:#061a2d;

}

.titulo{

text-align:center;

margin-bottom:70px;

}

.titulo span{

color:#59beff;

font-weight:700;

letter-spacing:3px;

}

.titulo h2{

margin-top:15px;

font-size:30px;

font-family:Poppins,sans-serif;

}

.gridPilares{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.cardPilar{

position:relative;

overflow:hidden;

border-radius:22px;

cursor:pointer;

height:420px;

box-shadow:

0 20px 50px rgba(0,0,0,.3);

}

.cardPilar img{

width:100%;

height:100%;

object-fit:cover;

transition:1s;

}

.cardPilar:hover img{

transform:scale(1.12);

}

.overlay{

position:absolute;

inset:0;

display:flex;

justify-content:flex-end;

flex-direction:column;

padding:35px;

background:

linear-gradient(
transparent,
rgba(0,0,0,.88)
);

}

.overlay h3{

font-size:30px;

margin-bottom:5px;

font-family:Poppins,sans-serif;

}

.overlay p{

color:#d9e6ef;

line-height:28px;

}


/*==================================================
PROGRAMAS
==================================================*/

.programas{

padding:150px 0;

background:#08233c;

}

.cardsProgramas{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.programa{

background:rgba(255,255,255,.08);

border:

1px solid
rgba(255,255,255,.08);

border-radius:24px;

overflow:hidden;

transition:.5s;

}

.programa:hover{

transform:translateY(-12px);

box-shadow:

0 20px 60px rgba(46,168,255,.25);

}

.programa img{

width:100%;

height:240px;

object-fit:cover;

}

.programa .conteudo{

padding:30px;

}

.programa h3{

font-size:28px;

margin-bottom:20px;

font-family:Poppins,sans-serif;

}

.programa p{

color:#dbe7ef;

line-height:30px;

margin-bottom:30px;

}

.programa a{

display:inline-block;

background:#2EA8FF;

color:white;

padding:15px 28px;

border-radius:40px;

transition:.4s;

}

.programa a:hover{

background:white;

color:#063052;

}


/*==================================================
PROGRAMAS CIET
==================================================*/

.programasCiet{

padding:150px 0;

background:

radial-gradient(
circle at 20% 20%,
rgba(46,168,255,.10),
transparent 35%
),

#08233c;

}


.gridProgramas{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}


.cardPrograma{

position:relative;

height:420px;

overflow:hidden;

border-radius:22px;

cursor:pointer;

box-shadow:

0 20px 50px rgba(0,0,0,.30);

transition:.5s;

}


.cardPrograma img{

width:100%;

height:100%;

object-fit:cover;

transition:1s;

}


.cardPrograma:hover img{

transform:scale(1.10);

}


.cardPrograma:hover{

transform:translateY(-10px);

box-shadow:

0 25px 60px rgba(46,168,255,.25);

}


.overlayPrograma{

position:absolute;

inset:0;

display:flex;

justify-content:flex-end;

flex-direction:column;

padding:30px;

background:

linear-gradient(
transparent 25%,
rgba(2,17,31,.95)
);

}


.overlayPrograma h3{

font-family:'Poppins',sans-serif;

font-size:25px;

line-height:32px;

margin-bottom:12px;

}


.overlayPrograma p{

color:#d8e7f2;

line-height:25px;

margin-bottom:22px;

}


.btnPrograma{

width:max-content;

padding:11px 22px;

border-radius:30px;

background:#2EA8FF;

color:#fff;

font-size:14px;

font-weight:600;

transition:.3s;

}


.btnPrograma:hover{

background:#fff;

color:#063052;

}


/*==================================================
FOOTER CIET
==================================================*/

.footer{

background:#031522;

color:#fff;

border-top:

1px solid
rgba(255,255,255,.08);

}


/*=========================
CONTEÚDO
=========================*/

.footerContent{

min-height:360px;

padding:80px 0;

display:grid;

grid-template-columns:1.4fr 1fr 1fr;

gap:80px;

align-items:start;

}


/*=========================
IDENTIDADE
=========================*/

.footerBrand h2{

font-family:'Poppins',sans-serif;

font-size:58px;

font-weight:800;

letter-spacing:5px;

line-height:1;

margin-bottom:18px;

}


.footerBrand span{

display:block;

max-width:360px;

color:#aebdca;

font-size:14px;

line-height:24px;

}


.footerBrand p{

margin-top:30px;

color:#fff;

font-size:17px;

font-weight:500;

letter-spacing:.5px;

}


/*=========================
COLUNAS
=========================*/

.footerColumn h3{

font-family:'Poppins',sans-serif;

font-size:18px;

margin-bottom:28px;

font-weight:600;

}


.footerColumn h3::after{

content:"";

display:block;

width:30px;

height:2px;

background:#fff;

margin-top:10px;

opacity:.5;

}


/*=========================
CONTATO
=========================*/

.contactItem{

display:flex;

align-items:flex-start;

gap:15px;

margin-bottom:22px;

}


.contactIcon{

width:34px;

height:34px;

min-width:34px;

display:flex;

align-items:center;

justify-content:center;

border:

1px solid
rgba(255,255,255,.18);

border-radius:50%;

color:#fff;

font-size:15px;

}


.contactItem small{

display:block;

color:#788d9d;

font-size:11px;

text-transform:uppercase;

letter-spacing:1px;

margin-bottom:4px;

}


.contactItem a,
.contactItem p{

color:#dce6ed;

font-size:14px;

line-height:22px;

transition:.3s;

}


.contactItem a:hover{

color:#fff;

}


/*=========================
REDES SOCIAIS
=========================*/

.socialColumn > p{

color:#9eafbc;

font-size:14px;

line-height:24px;

max-width:280px;

margin-bottom:25px;

}


.socialLinks{

display:flex;

flex-direction:column;

gap:12px;

}


.socialLinks a{

width:max-content;

color:#c8d4dc;

font-size:14px;

transition:.3s;

position:relative;

}


.socialLinks a::before{

content:"";

display:inline-block;

width:5px;

height:5px;

border-radius:50%;

background:#fff;

margin-right:10px;

vertical-align:middle;

opacity:.5;

transition:.3s;

}


.socialLinks a:hover{

color:#fff;

transform:translateX(5px);

}


.socialLinks a:hover::before{

opacity:1;

}


/*=========================
PARTE INFERIOR
=========================*/

.footerBottom{

border-top:

1px solid
rgba(255,255,255,.08);

}


.footerBottom .container{

min-height:75px;

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

}


.footerBottom p{

color:#718593;

font-size:12px;

}


.footerBottom span{

color:#718593;

font-size:12px;

}


/*==================================================
RESPONSIVO
==================================================*/

@media(max-width:1100px){

.heroContent{

grid-template-columns:1fr;

text-align:center;

}

.heroButtons{

justify-content:center;

}

.heroRight{

margin-top:70px;

}

.about .container{

grid-template-columns:1fr;

}

.gridPilares{

grid-template-columns:repeat(2,1fr);

}

.cardsProgramas{

grid-template-columns:1fr;

}

.gridProgramas{

grid-template-columns:repeat(2,1fr);

}

}


@media(max-width:900px){

.footerContent{

grid-template-columns:1fr 1fr;

gap:50px;

}

.footerBrand{

grid-column:1 / -1;

}

}


@media(max-width:700px){

.hero h1{

font-size:42px;

line-height:50px;

}

.hero p{

font-size:17px;

line-height:30px;

}

nav{

display:none;

}

.menuMobile{

display:block;

font-size:34px;

cursor:pointer;

}


/*=========================
SISTEMA ORBITAL MOBILE
=========================*/

.heroRight{

width:100%;

height:440px;

margin-top:40px;

}

.earthSystem{

width:420px;

height:420px;

}

.orbitOuter{

width:410px;

height:410px;

}

.orbitMiddle{

width:350px;

height:350px;

}

.orbitInner{

width:280px;

height:280px;

}

.earth{

width:210px;

height:210px;

}

.earthGlow{

width:235px;

height:235px;

}

.orbitTrack{

width:350px;

height:350px;

}

.orbitItem{

width:105px;

height:105px;

}

.orbitPosition{

width:105px;

height:105px;

}

.orbitIcon{

width:34px;

height:34px;

font-size:17px;

}

.orbitItem span{

font-size:12px;

}

.gridPilares{

grid-template-columns:1fr;

}

.titulo h2{

font-size:34px;

}

.about h2{

font-size:34px;

}

.gridProgramas{

grid-template-columns:1fr;

}

}


@media(max-width:600px){

.footerContent{

grid-template-columns:1fr;

padding:60px 0;

gap:45px;

}

.footerBrand{

grid-column:auto;

}

.footerBrand h2{

font-size:48px;

}

.footerBottom .container{

min-height:100px;

flex-direction:column;

justify-content:center;

text-align:center;

}


/*=========================
ORBITAL MOBILE PEQUENO
=========================*/

.heroRight{

height:370px;

}

.earthSystem{

width:350px;

height:350px;

}

.orbitOuter{

width:340px;

height:340px;

}

.orbitMiddle{

width:285px;

height:285px;

}

.orbitInner{

width:225px;

height:225px;

}

.earth{

width:175px;

height:175px;

}

.earthGlow{

width:200px;

height:200px;

}

.orbitTrack{

width:285px;

height:285px;

}

.orbitItem{

width:82px;

height:82px;

}

.orbitPosition{

width:82px;

height:82px;

}

.orbitIcon{

width:28px;

height:28px;

font-size:14px;

}

.orbitItem span{

font-size:10px;

}

}


/*==================================================
ESTRELAS
==================================================*/

.star{

position:absolute;

width:2px;

height:2px;

border-radius:50%;

background:white;

opacity:.3;

animation:piscar infinite;

}

@keyframes piscar{

0%{

opacity:.2;

transform:scale(.6);

}

50%{

opacity:1;

transform:scale(1.8);

}

100%{

opacity:.2;

transform:scale(.6);

}

}


/*==================================================
MENU MOBILE
==================================================*/

nav.ativo{

display:block;

position:absolute;

top:90px;

left:0;

width:100%;

background:#05233d;

padding:30px;

animation:subir .4s;

}

nav.ativo ul{

flex-direction:column;

gap:25px;

}


/*==================================================
SCROLL
==================================================*/

section{

transition:1s;

}