/* Fundo da página */
body {
margin: 0;
padding: 0;
min-height: 100vh;
background: #ffffff !important;
display: flex;
justify-content: center;
align-items: center;
font-family: "Arial", sans-serif;
animation: fadeIn 1.5s ease;
}


/* Container principal */
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 100%;
padding: 20px;
}


/* Logo */
.logo {
width: 30vw;
max-width: 180px;
min-width: 120px;
animation: float 3s ease-in-out infinite;
}


/* Cartão central */
.card {
background: rgba(0, 0, 0, 0.6);
padding: 30px 40px;
border-radius: 16px;
backdrop-filter: blur(6px);
color: #fff;
text-align: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
animation: slideUp 1.2s ease;
width: 90%;
max-width: 450px;
}


.card h1 {
font-size: clamp(24px, 5vw, 32px);
margin-bottom: 10px;
}


.card p {
font-size: clamp(16px, 3.5vw, 18px);
}


/* Escurecimento do fundo para leitura em telas menores */




/* Media Queries para telas pequenas */
@media (max-width: 600px) {
.card {
padding: 20px;
}


.logo {
width: 40vw;
max-width: 150px;
}
}


/* Animações */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}


@keyframes slideUp {
from {
transform: translateY(40px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}


@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}