:root { --accent: #4f46e5; --accent-alt: #db2777; }
* { margin: 0; padding: 0; box-sizing: border-box; }

body {  
    background: #020202; 
    height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow: hidden; 
    font-family: 'Segoe UI', sans-serif;
    color: white;
}

.dynamic-background {
    position: absolute; width: 100%; height: 100%; z-index: -1;
    background: radial-gradient(circle at 0% 0%, var(--accent), transparent 50%),
                radial-gradient(circle at 100% 100%, var(--accent-alt), transparent 50%);
    animation: rotate-bg 15s infinite linear;
}

@keyframes rotate-bg {
    0% { filter: hue-rotate(0deg) blur(80px); }
    100% { filter: hue-rotate(360deg) blur(80px); }
}

/* Container adaptável e inteligente */
.main-container {
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 3rem;
    border-radius: 20px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Adaptabilidade fluida */
    width: 90%;             
    max-width: 600px;       
    min-width: 280px;       
    
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Isso garante que a transição de tamanho seja suave ao rotacionar */
    transition: width 0.3s ease, padding 0.3s ease;
}

/* Ajuste específico para garantir que ele flua melhor em telas menores ou rotação */
@media screen and (max-width: 480px) {
    .main-container {
        padding: 1.5rem; /* Reduz o padding para ganhar espaço em celulares */
        width: 95%;      /* Aproveita mais a tela em modo retrato */
    }
}



/* 2. Container da Logo - Agora com tratamento de isolamento */
.logo-box { 
    width: 280px; 
    height: 280px; 
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent; /* Removemos o fundo do container para sumir o "quadro" */
    border: none;
}

.logo-box img { 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain;
}




.progress-wrapper { width: 100%; height: 4px; background: #333; border-radius: 2px; overflow: hidden; }
.progress-bar { height: 100%; width: 0%; background: white; transition: width 0.1s linear; }
#percent { margin-top: 10px; font-size: 0.9rem; opacity: 0.8; }

.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

.whatsapp-float img {
    width: 70%;
    height: 70%;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #128c7e;
}

/* Ajuste para celular */
@media (max-width: 480px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
}