/* RESET PADRÃO */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #f8f9fa; color: #333; line-height: 1.6; }

/* CABEÇALHO */
header { background: #fff; padding: 20px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.logo { font-size: 24px; font-weight: 800; color: #111; }
.logo span { color: #fe2c55; } /* Cor sutil remetendo ao TikTok */

/* ÁREA PRINCIPAL (HERO) */
.hero { text-align: center; padding: 50px 20px; background: linear-gradient(135deg, #111, #222); color: white; }
.hero h1 { font-size: 32px; margin-bottom: 10px; }
.hero p { font-size: 16px; color: #ccc; margin-bottom: 30px; }

/* CAIXA DE DOWNLOAD */
.downloader-box { background: white; padding: 30px; border-radius: 12px; max-width: 600px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
input { width: 100%; padding: 16px; border: 2px solid #eee; border-radius: 8px; font-size: 16px; margin-bottom: 20px; outline: none; transition: 0.3s; }
input:focus { border-color: #fe2c55; }
button { width: 100%; padding: 16px; background: #fe2c55; color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; transition: 0.3s; }
button:hover { background: #e0264a; }

/* ARMADILHA DE CARREGAMENTO */
.loading-area { display: none; margin-top: 20px; color: #333; }
.progress-bar { width: 100%; background: #eee; height: 20px; border-radius: 10px; margin: 10px 0; overflow: hidden; }
.progress { width: 0%; height: 100%; background: #28a745; transition: width 0.1s linear; }
.wait-text { font-size: 14px; color: #666; margin-bottom: 20px; }

/* ESPAÇOS ADSENSE */
.ad-placeholder { background: #f1f1f1; border: 1px dashed #ccc; padding: 50px 0; color: #999; margin: 20px auto; max-width: 300px; }
.ad-placeholder-wide { background: #f1f1f1; border: 1px dashed #ccc; padding: 40px 0; color: #999; text-align: center; margin: 40px auto; max-width: 728px; }

/* SEO E TEXTOS */
.content-section { max-width: 900px; margin: 40px auto; padding: 0 20px; }
.content-section h2 { text-align: center; margin-bottom: 30px; font-size: 26px; color: #111; }
.steps { display: flex; gap: 20px; margin-bottom: 50px; }
@media (max-width: 768px) { .steps { flex-direction: column; } }
.step { background: white; padding: 25px; border-radius: 8px; flex: 1; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.step h3 { margin-bottom: 10px; color: #fe2c55; }
.faq { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.faq h3 { margin-top: 20px; margin-bottom: 10px; color: #333; }
.faq p { color: #555; }

/* RODAPÉ E LEGAL */
footer { background: #111; color: #888; text-align: center; padding: 40px 20px; margin-top: 50px; }
.disclaimer { font-size: 12px; max-width: 800px; margin: 0 auto 20px auto; line-height: 1.5; }
.legal-links { margin-bottom: 20px; }
.legal-links a { color: #ccc; text-decoration: none; margin: 0 10px; }
.legal-links a:hover { color: white; }