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

body{

font-family:system-ui,Arial,sans-serif;

background:#0f172a;

color:white;

line-height:1.6;

}

/* HEADER */

.header{

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

padding:12px 16px;

background:#020617;

position:fixed;
top:0;
left:0;
width:100%;

z-index:1000;

border-bottom:1px solid #1e293b;

}

/* LOGO */

.logo{

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

}

.logo-img{

height:36px;
width:auto;

display:block;

}

.logo-text{

font-size:18px;
font-weight:600;

color:white;

}

/* DESKTOP */

@media (min-width:768px){

.logo-img{

height:42px;

}

.logo-text{

font-size:20px;

}

}

/* HAMBURGER */

.menu-btn{

width:32px;
height:24px;

background:none;
border:none;

display:flex;
flex-direction:column;
justify-content:space-between;

cursor:pointer;

}

.menu-btn span{

display:block;

height:3px;
width:100%;

background:white;

border-radius:3px;

transition:0.3s;

}

/* ANIMAÇÃO */

.menu-btn.active span:nth-child(1){

transform:rotate(45deg) translate(5px,5px);

}

.menu-btn.active span:nth-child(2){

opacity:0;

}

.menu-btn.active span:nth-child(3){

transform:rotate(-45deg) translate(6px,-6px);

}

/* MENU LATERAL */

.menu{

position:fixed;

top:0;
left:-260px;

width:260px;
height:100%;

background:#020617;

padding-top:80px;

display:flex;
flex-direction:column;

transition:0.35s;

z-index:999;

box-shadow:4px 0 20px rgba(0,0,0,0.4);

}

.menu.open{

left:0;

}

.menu a{

padding:15px 25px;

text-decoration:none;

color:#e2e8f0;

border-bottom:1px solid #1e293b;

transition:0.2s;

}

.menu a:hover{

background:#1e293b;

}

/* OVERLAY */

#overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.6);

opacity:0;

visibility:hidden;

transition:0.3s;

z-index:998;

}

#overlay.show{

opacity:1;

visibility:visible;

}

/* MAIN */

main{

padding-top:90px;

}

/* HERO */

.hero{

position:relative;

padding:120px 20px 80px;

text-align:center;

overflow:hidden;

max-width:900px;
margin:auto;

}

/* IMAGEM FUNDO */

.hero-bg{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background-image:url("img/legado-protocolos.png");

background-size:cover;
background-position:center;

opacity:0.35;

filter:contrast(1.1) brightness(0.9);

z-index:1;

}

/* DEGRADÊ */

.hero::after{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:linear-gradient(

180deg,
rgba(15,23,42,0.3) 0%,
rgba(15,23,42,0.9) 70%,
#0f172a 100%

);

z-index:2;

}

/* CONTEÚDO HERO */

.hero-content{

position:relative;

z-index:3;

max-width:700px;

margin:auto;

}

.hero h1{

font-size:30px;

margin-bottom:15px;

}

/* SEÇÕES */

.conteudo{

padding:40px 25px;

max-width:800px;

margin:auto;

}

.conteudo h2{

margin-bottom:20px;

}

/* GRID CARDS */

.cards{

display:grid;

gap:15px;

}

/* DESKTOP GRID */

@media (min-width:700px){

.cards{

grid-template-columns:1fr 1fr;

}

}

/* CARDS */

.card{

background:#1e293b;

padding:20px;

margin:15px 0;

border-radius:10px;

border:1px solid #334155;

transition:0.25s;

}

.card:hover{

transform:translateY(-4px);

background:#273449;

}

/* CARD LINK */

.card-link{

display:block;

text-decoration:none;

color:inherit;

margin:15px 0;

}

.card-link .card{

cursor:pointer;

}

.card-link .card:hover{

transform:translateY(-5px);

background:#273449;

box-shadow:0 10px 25px rgba(0,0,0,0.3);

}

/* FOOTER */

footer{

padding:40px;

text-align:center;

color:#94a3b8;

border-top:1px solid #1e293b;

margin-top:40px;

}

/* BOTÃO INSTALAR */

.install-btn{

position:fixed;

bottom:20px;

right:20px;

background:linear-gradient(135deg,#6366f1,#8b5cf6);

color:white;

border:none;

padding:14px 20px;

border-radius:30px;

font-size:14px;

cursor:pointer;

display:none;

box-shadow:0 10px 25px rgba(0,0,0,0.4);

z-index:2000;

transition:0.3s;

}

.install-btn:hover{

transform:scale(1.05);

}

/* CARD EBOOK */

.ebook{

text-align:center;

background:linear-gradient(135deg,#1e293b,#312e81);

border:1px solid #6366f1;

}

/* BOTÃO EBOOK */

.btn-ebook{

display:inline-block;

margin-top:15px;

padding:14px 22px;

background:linear-gradient(135deg,#6366f1,#8b5cf6);

color:white;

text-decoration:none;

border-radius:10px;

font-weight:bold;

transition:0.3s;

}

.btn-ebook:hover{

transform:scale(1.05);

box-shadow:0 10px 25px rgba(0,0,0,0.3);

}

/* SPLASH SCREEN */

#splash{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:linear-gradient(
180deg,
#020617,
#0f172a
);

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

overflow:hidden;

z-index:9999;

animation:splashFadeOut 1s ease 5.8s forwards;

}

/* LUZ */

.splash-light{

position:absolute;

width:600px;
height:600px;

background:radial-gradient(
circle,
rgba(139,92,246,0.35),
transparent 70%
);

animation:lightPulse 7s ease;

}

/* CONTEÚDO */

.splash-content{

text-align:center;
color:white;

position:relative;

z-index:2;

}

/* LOGO SPLASH */

.splash-logo{

width:110px;

opacity:0;

transform:scale(0.6);

animation:logoReveal 3s ease 0.6s forwards;

}

/* TÍTULO */

.splash-title{

font-size:34px;
font-family:"Cinzel",serif;
margin-top:20px;
letter-spacing:2px;
opacity:0;

animation:titleReveal 2s ease 1.9s forwards;

}

/* SUB */

.splash-sub{

margin-top:10px;

font-size:14px;

opacity:0;

animation:subtitleReveal 2s ease 2.5s forwards;

}

/* ANIMAÇÕES */

@keyframes logoReveal{

to{

opacity:1;
transform:scale(1);

}

}

@keyframes titleReveal{

to{

opacity:1;

}

}

@keyframes subtitleReveal{

to{

opacity:1;

}

}

@keyframes lightPulse{

0%{

transform:scale(0.6);
opacity:0;

}

50%{

opacity:1;

}

100%{

transform:scale(1.4);
opacity:0.5;

}

}

@keyframes splashFadeOut{

to{

opacity:0;
visibility:hidden;

}

}