.slides {min-height: 0; padding: 0;height: calc(100vh - 20rem); box-shadow: var(--sombra-section);}
.slides .container {position: relative;}
.slides .slide-container {display: none;}
.slides .slide-container.active {display: block;}
.slides .slide {width: 100%; padding: 0;height: calc(100vh - 20rem); display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(0, 0, 0, 0.2);}
.slides .home-content p {color: var(--branco); font-size: clamp(3rem, 1.2vw, 3.5rem); font-weight: bold; text-align: center;}
.slides .home-content h1 {color: var(--branco); font-size: 7rem; font-weight: bold; margin-block: 3rem; line-height: 0.70em; letter-spacing: 3px; animation: animate-1 5s linear infinite; -webkit-box-reflect: below -1px linear-gradient(transparent, rgba(82, 81, 81, 0.493));}
@keyframes animate-1 
{0%,18%,20%,50.1%,65.1%,80%,90.1%,92% {text-shadow: none;} 18.1%,20.1%,30%,50%,60.1%,65%,80.1%,90%,92.1%,100% {text-shadow: 0 0 10px var(--azul-2), 0 0 20px var(--azul-2), 0 0 40px var(--azul-2), 0 0 80px var(--azul-2), 0 0 160px var(--azul-2);}}
.slides .home-content h2 {color: var(--branco); font-size: clamp(4.5rem, 1.2vw, 5rem); font-weight: 500; text-shadow: 1px 2px 0 #000, 2px 2px 0 #0162c8, 3px 3px 0 #0162c8, 10px 10px 0 rgb(0, 0, 0, 0.2);}
.slides .home-content h2 span {color: var(--azul-2); font-weight: bold; position: relative; -webkit-text-stroke: 0.1vw var(--preto);}
.slides .home-content h2 span::before {content: "Galáctico"; position: absolute; top: 0; left: 0; width: 0; height: 100%; color: var(--azul); -webkit-text-stroke: 0.1vw var(--branco); overflow: hidden; animation: animate-2 4s linear infinite;}
@keyframes animate-2 {0% {width: 0;} 100% {width: 100%;}}
.slides .content {margin-inline: 12rem;}
.slides .content h2 {font-size: 4rem; color: var(--azul); text-shadow: 1px 2px 0 var(--branco), 2px 4px 0 #000;}
.slides .content p {max-width: 700px; font-weight: 700; text-align: center;}
.slides .content p strong {color: var(--amarelo);}
.slides video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; object-fit: cover; animation: animate-3 .4s linear;} 
@keyframes animate-3 {0% {transform: scale(.5);}}
.slides .creditos {position: absolute; top: 94%; right: 12px; font-size: 1.2rem; color: var(--branco);}
.slides .creditos a {color: var(--amarelo); font-size: 1.2rem; text-decoration: underline;}
.slides #next img,
#prev img {position: absolute; cursor: pointer; width: 6rem; top: 40%;}
.slides #next img {right: 35px;}
.slides #prev img {left: 35px;}       
#login-btn {right: 2.5rem; bottom: 2.5rem; font-weight: 900; font-size: 1.25rem; padding: 7px 20px; position: absolute; cursor: pointer; border: none; border-radius: 15px; color: var(--amarelo); transition: all 0.3s ease; background: transparent; text-shadow: var(--sombra-letras); box-shadow: inset 5px 5px 5px rgba(136, 136, 136, .1), inset -5px -5px 15px rgb(0, 0, 0), 5px 5px 15px rgb(0, 0, 0);}
#login-btn:hover {color: #fff; transition: 0.4s ease; letter-spacing: 1.5px; background: var(--azul);}
.login {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; z-index: 1000;}
.login.ativo {opacity: 1; visibility: visible;}
.login #form-close {position: absolute; top: 1rem; right: 8rem; font-size: 4rem; color: #fff; cursor: pointer; transition: transform 0.3s ease;}
.login #form-close:hover {transform: rotate(90deg);}
.login form {width: 50rem; max-width: 90%; margin: 2rem; color: #fff; padding: 2rem 3rem; text-align: center; border: 3px solid var(--amarelo); border-radius: 30px; background: var(--bg-azul-meio); transform: scale(0.8); opacity: 0; transition: all 0.4s ease;}
.login.ativo form {transform: scale(1); opacity: 1;}
.login form legend {padding: 1rem 0; font-size: 3rem; font-weight: 900; color: var(--amarelo); text-align: center; text-transform: uppercase; text-shadow: var(--sombra-letras);}
.login form .content {position: relative; text-align: left; margin: 0;}
.login form label {font-size: 1.5rem; font-weight: 900; color: var(--amarelo);}
.input-wrapper {display: flex; align-items: center; gap: 10px; position: relative;}
.login form .box {flex: 1; padding: 1rem; margin: 0.6rem 0; font-size: 1.3rem; font-weight: 900; letter-spacing: 1px; border-radius: 30px; color: var(--branco); border: 2px solid var(--azul); background: var(--bg-azul-medio-azul-2); box-shadow: rgb(0 0 0 / 40%) -1px 9px 6px; transition: all 0.3s ease;}
.login form .box::placeholder {color: #eee; font-weight: 500; transition: color 0.3s ease;}
.login form .box:-webkit-autofill {-webkit-text-fill-color: var(--branco) !important; background: linear-gradient(#01018f, #0176fb 50%, #01018f) !important; -webkit-background-clip: padding-box !important; transition: background-color 5000s ease-in-out 0s;}
.login form .box:-moz-autofill {-moz-text-fill-color: var(--branco) !important; background: linear-gradient(#01018f, #0176fb 50%, #01018f) !important;}
.login form .content i {position: absolute; top: 50%; right: 15px; transform: translateY(-50%); font-size: 1.5rem; color: var(--amarelo); pointer-events: auto;}
.content i.toggle-password {position: absolute; cursor: pointer; color: var(--amarelo); font-size: 1.2rem;}
.content i.toggle-password:hover {color: var(--branco);}
.login form .botao {
color: #fff; border:none; cursor: pointer; font-size: 1.5rem; font-weight: bold; padding: 9px 30px; margin: 2rem 2rem 0; 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;}
.login form .botao:hover {box-shadow: inset 0 4px 8px rgba(0,0,0,0.6); transform: translateY(2px);}
.login form .botao:active {box-shadow: inset 0 6px 12px rgba(0,0,0,0.7), 0 2px 3px rgba(0,0,0,0.2); transform: translateY(4px);}
@keyframes gradientShift {0% { background-position: 0% 50%;} 50% { background-position: 100% 50%;} 100% { background-position: 0% 50%;}}
.login form h2 {margin: 2rem 0; font-size: 1.5rem; color: var(--branco); text-shadow: var(--sombra-letras);}
.login form h2 span {color: var(--amarelo); font-size: 1.6rem; font-weight: 900;}

@media (max-width:1024px){    
#login-btn {bottom: 3rem;}}    
@media (max-width: 768px){    
.slides .content {margin-inline: min(8em, 8%);}
.slides #prev img {left: 1.5rem;}
.slides #next img {right: 1.5rem;}
.slides #next img, #prev img {top: 75%;}}