/* =========================================
01 - HEADER / NAVBAR
Prefixo isolado: ce-header
========================================= */

.ce-header{

--text-white:#FFFFFF;
--text-secondary:#94A3B8;
--neon-green:#00F5A0;
--cyan:#22D3EE;
--bg-dark:#020F1E;
--border-dark:#1E293B;

position:fixed;
top:0;
left:0;
width:100%;
z-index:9999;

background:rgba(11,18,32,0.75);
backdrop-filter:blur(16px);

border-bottom:1px solid var(--border-dark);

font-family:'Inter',system-ui,-apple-system,sans-serif;
line-height:1.6;
color:var(--text-white);

}


/* =========================================
CONTAINER
========================================= */

.ce-header-container{

max-width:1200px;
margin:auto;
padding:18px 24px;

display:flex;
justify-content:space-between;
align-items:center;

position:relative;

}


/* =========================================
LINKS
========================================= */

.ce-header a{
text-decoration:none;
color:inherit;
transition:all .3s ease;
}


/* =========================================
LOGO
========================================= */

.ce-header-logo{

display:flex;
align-items:center;
gap:12px;

font-weight:800;
font-size:1.25rem;

white-space:nowrap;

}

.ce-header-logo img{
height:36px;
max-width:100%;
display:block;
}

.ce-header-logo span{

background:linear-gradient(135deg,#00BF62,#7CFFB6);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}


/* =========================================
MENU DESKTOP
========================================= */

.ce-header-menu{

display:flex;
gap:34px;
align-items:center;

}

.ce-header-menu a{

font-size:0.95rem;
font-weight:500;

color:var(--text-secondary);

position:relative;
transition:color .25s ease;

white-space:nowrap;

}


/* HOVER */

.ce-header-menu a:hover{
color:var(--neon-green);
}


/* LINHA ANIMADA */

.ce-header-menu a::after{

content:"";
position:absolute;

left:0;
bottom:-6px;

width:0%;
height:2px;

background:var(--neon-green);

transition:width .25s ease;

}

.ce-header-menu a:hover::after{
width:100%;
}


/* =========================================
BOTÃO MOBILE
========================================= */

.ce-header-mobile-btn{

display:none;

background:none;
border:none;

color:var(--text-white);
font-size:1.6rem;

cursor:pointer;

}


/* =========================================
RESPONSIVIDADE
========================================= */

@media (max-width:1024px){

.ce-header-menu{

display:none;
position:absolute;

top:100%;
left:0;
right:0;

background:var(--bg-dark);

flex-direction:column;

padding:22px;

border-top:1px solid var(--border-dark);

z-index:9998;

}

.ce-header-menu.active{
display:flex;
}

.ce-header-mobile-btn{
display:block;
}

.ce-header-menu a{

padding:14px 0;
font-size:1rem;

border-bottom:1px solid rgba(255,255,255,0.05);

}

.ce-header-menu a::after{
display:none;
}

}


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

@media (max-width:600px){

.ce-header-container{
padding:16px 18px;
}

.ce-header-logo img{
height:30px;
}

.ce-header-logo span{
font-size:0.95rem;
}

/* Ajuste do espaço para header fixo */

body{
padding-top:70px;
}

}


/* =========================================
TELAS MUITO PEQUENAS
========================================= */

@media (max-width:420px){

.ce-header-mobile-btn{
font-size:1.4rem;
}

.ce-header-logo img{
height:26px;
}

.ce-header-logo span{
font-size:0.85rem;
}

/* Ajuste menor ainda */

body{
padding-top:40px;
}

}


/* =========================================
DESKTOP
========================================= */

@media (min-width:601px){

body{
padding-top:40px;
}

}