:root {
--preto: #000; --branco: #e7e7e7; --amarelo: #fcaf17;  --azul: #1D4ED8; --azul-2: #0176fb; --azul-medio: #01018f; --azul-escuro: #000057;
--azul-escuro-2: #0c002b; --azul-sombra: #0051ff54; 
--bg-gradient: linear-gradient(var(--preto), var(--azul), var(--preto));
--bg-azul: linear-gradient(0deg, var(--azul-escuro-2), var(--azul));    
--bg-azul-B: linear-gradient(0deg, var(--azul), var(--azul-escuro-2));    
--bg-azul-escuro-medio: linear-gradient(var(--azul-medio), var(--azul-escuro));
--bg-azul-medio-meio: linear-gradient(var(--preto), var(--azul-medio), var(--preto));
--bg-azul-medio-azul-2: linear-gradient(var(--azul-medio), var(--azul-2) 50%, var(--azul-medio));
--bg-azul-meio: linear-gradient(var(--azul-escuro-2), var(--azul), var(--azul-escuro-2));
--bg-azul-escuro-cima: linear-gradient(var(--azul-escuro), var(--preto));
--bg-azul-escuro-baixo: linear-gradient(var(--preto), var(--azul-escuro) 40%);
--bg-header: linear-gradient(var(--azul-escuro-2), var(--azul-escuro) 70%);
--sombra: inset -5px -10px 15px rgba(0, 0, 0, 0.81);
--sombra-Cima: inset 5px 10px 15px rgba(0, 0, 0, 0.81);
--sombra-botao: rgb(0 0 0 / 40%) 0 9px 6px;
--sombra-letras: 1px 1px 0 #000, 2px 2px 0 #000;
--sombra-botao-hover: inset 0 -5px 15px var(--azul), 5px 5px 15px var(--preto);
--sombra-lateral: inset 5px 5px 7px var(--azul-sombra), inset -5px -5px 15px var(--preto), 7px 5px 15px var(--azul); 
--sombra-azul: inset 5px 5px 5px var(--azul-sombra), 10px 0 15px var(--azul), 5px 5px 5px var(--azul-sombra);
--sombra-section: inset 5px 5px 5px rgba(136, 136, 136, 0.329), inset -5px -5px 15px var(--preto);
}                  
*{margin:0; padding:0; outline: none; box-sizing: border-box; font-family: 'Poppins', sans-serif;}       
html::-webkit-scrollbar{width:1.4rem;}
html::-webkit-scrollbar-track{background:#222;}
html::-webkit-scrollbar-thumb{background: var(--bg-gradient); border: 2px solid #000; border-radius: 30px; box-shadow: 0 0 5px 5px rgba(136, 136, 136, 0.989);}      
html {font-size: 62.5%;}     
body {min-height: 100vh; max-width: 1920px; padding-left: 28rem; margin-inline: 20rem; scroll-behavior: smooth; transition: all .2s linear; background: var(--preto); box-shadow: var(--sombra-azul); text-shadow: var(--sombra-letras);}    
section {padding: clamp(6rem, 5vw, 8rem) clamp(3rem, 5vw, 8rem);}
.overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 900; opacity: 0; visibility: hidden; background-color: rgba(0,0,0,0.5); transition: opacity 0.3s ease, visibility 0.3s ease;}  
.popup {position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); background: rgba(0, 0, 0, 0.4); visibility: hidden; z-index: 1000; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease;}
.popup.ativo {visibility: visible; opacity: 1;}
.popup.saindo {opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease 0.3s;}
.popup-content {width: 90%; padding: 2rem; max-width: 320px; text-align: center; border: 3px solid var(--amarelo); border-radius: 30px; opacity: 0; transform: scale(0.8) translateY(-20px); transition: all 0.3s ease; background: var(--bg-azul-medio-azul-2); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);}
.popup.ativo .popup-content {transform: scale(1) translateY(0); opacity: 1;}
.popup-content #popup-titulo {font-size: 1.6rem; font-weight: 900; margin-bottom: 1rem; color: var(--amarelo); text-shadow: var(--sombra-letras);}
.popup-content #popup-mensagem {text-align: center; margin-bottom: 1rem;}
#fechar-popup {color: #fff; border:none; cursor: pointer; font-size: 1.5rem; font-weight: bold; padding: 9px 30px; border-radius: 30px; display: inline-block; letter-spacing: 2px; background: linear-gradient(0deg, #0c002b, var(--azul)); background-size: 200% 200%; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 6px 10px rgba(0,0,0,0.4); text-shadow: 1px 1px 0 #000, 2px 2px 0 #000; transition: all 0.3s ease, background-position 2s ease-in-out; animation: gradientShift 5s ease-in-out infinite;}
#fechar-popup:hover {box-shadow: inset 0 4px 8px rgba(0,0,0,0.6); transform: translateY(2px);}  
h2 {text-align: center; color: var(--branco); margin-bottom: 2rem; letter-spacing: 1.5px; font-size: clamp(2.2rem, 2.5vw, 2.4rem); text-shadow: 1px 2px 0 #000, 2px 2px 0 var(--azul), 3px 3px 0 var(--azul), 4px 4px 0 var(--azul), 10px 10px 0 rgb(0, 0, 0, 0.2);}
h3 {color:var(--amarelo); margin: 1.5rem 0; font-weight: 900; font-size: clamp(1.6rem, 2.5vw, 1.8rem);}
h3 strong,
h3 b {font-size: inherit;}
h3 b {color: var(--azul);}
h4 {color:var(--azul-2); margin: 1.5rem 0; font-weight: 900; font-size: clamp(1.6rem, 2.5vw, 1.8rem);}
hr {margin-bottom: 2rem;}
p, ul li, ol li, strong, b {color: var(--branco); font-size: clamp(1.2rem, 2.5vw, 1.3rem); line-height: 1.7; margin-bottom: 1.5rem; text-align: justify;}
strong, b {font-weight: 900;}
p:last-child {margin-bottom: 0;}
ul li, ol li {line-height: 1.5; text-align: left; margin: 0 0 0 2rem;}
ul li::marker, ol li::marker {color: var(--azul); font-size: 1.5rem;}
a {cursor: pointer; color: var(--branco); text-decoration: none;}
a:hover {color: var(--amarelo);}
i {color: var(--branco);}
.par p {text-indent: 25px;}  
.bg {position: relative;}
.bg-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; object-fit: contain; pointer-events: none; object-position: right;}
.bg-img-cover {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; object-fit: cover; pointer-events: none; object-position: right;}   
.logo {position: relative; min-height: 100vh; overflow: hidden; background: #000 url(/src/assets/Image/logomarca.png) center/contain no-repeat;}
#logo h1 {position: absolute; inset-inline: 0; top: 50%; transform: translateY(-50%); padding: 1rem 1.5rem 1.5rem; box-sizing: border-box; color: var(--amarelo); text-align: center; text-wrap: balance; font-size: clamp(1.8rem, 5vw, 3rem); mix-blend-mode: screen; box-shadow: var(--sombra-section); background: rgba(255, 255, 255,.8);}      
.btn {color:var(--branco); font-size: 1.3rem; font-weight: bold; padding: 9px 30px; margin-top: 1.5rem; cursor: pointer; border: 2px solid var(--azul); border-radius: 5rem; display: inline-block; background: var(--bg-azul); box-shadow: var(--sombra-botao); transition: .1s linear; animation: animacaoBotao .4s linear 1s backwards;}
.btn:hover {transition: .3s; transform: scale(1.1) translateY(1px); box-shadow: var(--sombra-botao-hover);}
.btn i {padding: 0 .5rem; font-size: 1.8rem;}
@keyframes animacaoBotao {0%{opacity: 0; transform: scale(.5) translateY(-50px);}
} 
.top {position: fixed; bottom: 2rem; right: 22rem; opacity: 0; visibility: hidden; animation: anime_Logo 5s linear infinite; transition: opacity 0.5s ease, visibility 0.5s ease;}
.top.show {opacity: 1; visibility: visible;}   
footer {height: 20rem; background: var(--bg-azul);} 
footer a:hover {color: #fff; font-weight: bold;}
footer #info {position: relative; font-size: 1.2rem; padding: 1rem 1.5rem 1.5rem; box-shadow: inset 0 0 15px, inset 0 0 10px rgb(0, 0, 0);}
footer .contato-icone {padding: 0.2rem 0; color: var(--branco);}
footer .contato-icone i {padding: .4rem 1rem;}
footer .redes-sociais {padding: 1.2rem; text-align: center; box-shadow: inset 0 0 15px, inset 0 0 15px rgb(0, 0, 0), 5px 0 15px rgb(0, 0, 0);}
footer .redes-sociais li {text-align: center; display: inline-block;}
footer .redes-sociais li a {display: flex; flex-direction: column; gap: .5rem;}
footer .redes-sociais li a i {transition: .3s;}
footer .redes-sociais a:hover i {transform: scale(1.1) translateY(-3px) rotate(360deg);}
footer .redes-sociais li a span {font-size: 1.2rem;}
footer .redes-sociais li a span:hover {color: #fff; font-weight: 900;}
footer .credit {padding: 1rem; text-align: center; font-size: 1rem; font-weight: 700; color: var(--amarelo);}
footer .credit span {color: var(--branco);}
footer .credit a:hover {color:var(--azul);}
  
@media (max-width: 1600px){body {margin-inline: 0;} .top {right: 1rem;}}     
@media (max-width: 1024px){body {padding: 0;} .overlay.visible {opacity: 1; visibility: visible;}}     
@media (max-width: 768px){p, h3 {text-align: center;}}