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

:root{

--cor-fundo:#050505;
--cor-fundo-secundario:#15151d;

--cor-dourado:#FFD700;
--cor-verde:#228B22;

--cor-texto:#eaeaea;

--fonte-principal:'Montserrat',sans-serif;

}


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

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


/* =====================================================
BODY
===================================================== */

body{

font-family:var(--fonte-principal);

background:var(--cor-fundo);

color:var(--cor-texto);

overflow-x:hidden;

}


/* =====================================================
CANVAS THREE JS
===================================================== */

canvas{
position:fixed;
top:0;
left:0;
z-index:0;
pointer-events:none;
}


/* =====================================================
CONTEÚDO ACIMA DO 3D
===================================================== */

header,
main,
footer{
position:relative;
z-index:2;
}


/* =====================================================
NAVBAR VIDRO FOSCO
===================================================== */

.navbar{

background:rgba(0,0,0,0.65) !important;

backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);

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

}


/* =====================================================
SEÇÕES VIDRO FOSCO
===================================================== */

.hero,
section{

background:rgba(10,10,10,0.55);

backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

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

padding:80px 20px;

}


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

header{

border-bottom:3px solid var(--cor-verde);

}

.titulo-site{

font-size:40px;
font-weight:800;

color:var(--cor-dourado);

}

.subtitulo{

font-size:18px;

color:#ccc;

}


/* =====================================================
LINHA ANCESTRAL
===================================================== */

.linha-ancestral{

width:100%;
height:2px;

background:linear-gradient(
90deg,
transparent,
#00ff88,
#00ffcc,
#00ff88,
transparent
);

background-size:200% 100%;

animation:brilhoLinha 3s linear infinite;

box-shadow:0 0 8px #00ff88;

}

@keyframes brilhoLinha{

from{background-position:200% 0;}

to{background-position:-200% 0;}

}


/* =====================================================
MARCA D'ÁGUA
===================================================== */

.marca-dagua{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background-image:url('../imagens/logoaya.png');

background-repeat:no-repeat;
background-position:center;
background-size:60%;

opacity:0.03;

pointer-events:none;

z-index:-1;

}


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

.hero{

max-width:900px;
margin:auto;

}

.hero h2{

font-size:36px;

margin-bottom:20px;

}

.hero p{

font-size:18px;

line-height:1.6;

}


/* =====================================================
ÁREAS
===================================================== */

.areas h3{

margin-bottom:10px;

color:var(--cor-dourado);

}

.areas p{

font-size:15px;

margin-bottom:15px;

}


/* =====================================================
BOTÕES
===================================================== */

.btn-outline-light{

border-color:var(--cor-dourado);

color:var(--cor-dourado);

}

.btn-outline-light:hover{

background:var(--cor-dourado);

color:#000;

}


/* =====================================================
SOBRE
===================================================== */

.sobre h2{

margin-bottom:20px;

color:var(--cor-dourado);

}


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

footer{

background:#111;

border-top:2px solid var(--cor-verde);

font-size:14px;

padding:30px 20px;

}

footer a{

color:var(--cor-dourado);

text-decoration:none;

}

footer a:hover{

text-decoration:underline;

}