/* --- RESET E CONFIGURAÇÕES GERAIS --- */
* { margin:0; padding:0; box-sizing:border-box; }
body { background:#f4f7f6; font-family:sans-serif; display:flex; flex-direction:column; align-items:center; }

header { 
    background:#0066FF; 
    width:100%; 
    padding:40px 0 60px 0; /* Aumentei o espaço no fundo para o azul aparecer mais */
    text-align:center; 
    color:#fff; 
}

.container { 
    width:95%; 
    max-width:400px; 
    margin-top:-30px; /* Ajustado para um encaixe suave e elegante */
    position: relative;
    z-index: 10;
}

.app-card { 
    background:#fff; 
    border-radius:15px; 
    padding:20px; 
    box-shadow:0 5px 15px rgba(0,0,0,0.1); 
    text-align:center; 
    margin-bottom:25px; 
}

/* SLIDE SEM FAIXAS PRETAS */
.screenshot-container { width:100%; height:210px; overflow:hidden; border-radius:10px; margin:15px 0; background:#000; position:relative; }
.screenshot-track { display:flex; height:100%; width:500%; animation:slide 15s infinite; }
.screenshot-track img { width:20%; height:100%; object-fit:cover; }

@keyframes slide { 0%, 15% { transform:translateX(0); } 20%, 35% { transform:translateX(-20%); } 40%, 55% { transform:translateX(-40%); } 60%, 75% { transform:translateX(-60%); } 80%, 95% { transform:translateX(-80%); } }

.info-item { border-bottom:1px solid #eee; padding:8px 0; display:flex; flex-direction:column; align-items:center; }
.info-label { font-size:10px; color:#999; font-weight:bold; }
.info-value { font-size:16px; font-weight:bold; color:#333; }
.btn-download { background:#0066FF; color:#fff; border:none; width:100%; padding:15px; border-radius:10px; font-weight:bold; margin-top:15px; cursor:pointer; display:block; box-sizing:border-box; text-align:center; text-decoration:none; }

/* MODAL DE DOWNLOAD */
.modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:1000; justify-content:center; align-items:center; }
.modal-content { background:#1e1e26; padding:25px; border-radius:15px; width:85%; text-align:center; color:#fff; }
.progress-container { width:100%; background:#333; height:30px; border-radius:5px; margin-top:15px; overflow:hidden; }
.progress-bar { width:0%; height:100%; background:#2ecc71; line-height:30px; color:#fff; font-weight:bold; transition:width 0.2s; }

/* BOTÃO WHATSAPP FLUTUANTE */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999; /* Garante que fique acima de tudo */
    transition: transform 0.3s ease;
    text-decoration: none;
}

.whatsapp-icon { width: 35px; height: 35px; }
.whatsapp-float:hover { transform: scale(1.1); background-color: #128c7e; }

/* TOOLTIP WHATSAPP (Apenas Desktop) */
.tooltip-whatsapp {
    position: absolute;
    right: 75px;
    background: #fff;
    color: #333;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    display: none;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

@media (min-width: 768px) {
    .whatsapp-float:hover .tooltip-whatsapp { display: block; }
}