/* Reset e Base Styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.6;color:#2c2c2c;background:linear-gradient(135deg,#f8f4f0 0%,#e8ddd4 100%);min-height:100vh}

/* Container */
.container{width:100%;max-width:800px;margin:0 auto;padding:0 20px}

/* Header */
.header{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);padding:15px 0;box-shadow:0 2px 20px rgba(0,0,0,0.1);position:sticky;top:0;z-index:100}.logo{height:60px;width:auto;display:block;margin:0 auto}

/* Layout */
.main{padding:40px 0 80px}.screen{display:none;animation:fadeIn 0.5s ease-in-out}.screen.active{display:block}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}

/* Welcome Screen */
.welcome-content{text-align:center;max-width:600px;margin:0 auto}.title{font-size:2.8rem;font-weight:700;color:#8b4513;margin-bottom:20px;line-height:1.2}.subtitle{font-size:1.2rem;color:#6b5b4f;margin-bottom:40px;line-height:1.5}

.welcome-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin:50px 0;padding:0 20px}.feature{text-align:center;padding:20px;background:rgba(255,255,255,0.8);border-radius:15px;box-shadow:0 5px 15px rgba(0,0,0,0.1);transition:transform 0.3s ease}.feature:hover{transform:translateY(-5px)}.feature-icon{font-size:2.5rem;margin-bottom:15px;display:block}.feature span{font-weight:600;color:#8b4513}

/* Buttons */
.btn-primary,.btn-secondary,.btn-whatsapp{padding:15px 30px;border:none;border-radius:50px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;text-decoration:none;display:inline-block;text-align:center;min-width:150px}

.btn-primary{background:linear-gradient(45deg,#d2691e,#cd853f);color:white;box-shadow:0 4px 15px rgba(210,105,30,0.3)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(210,105,30,0.4)}.btn-primary:disabled{opacity:0.6;cursor:not-allowed;transform:none}

.btn-secondary{background:rgba(139,69,19,0.1);color:#8b4513;border:2px solid #8b4513}.btn-secondary:hover{background:#8b4513;color:white}

.btn-whatsapp{background:linear-gradient(45deg,#25d366,#128c7e);color:white;font-size:1.2rem}.btn-whatsapp:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,211,102,0.4)}

/* Progress Bar */
.progress-container{margin-bottom:40px;text-align:center}.progress-bar{width:100%;height:8px;background:rgba(139,69,19,0.2);border-radius:10px;overflow:hidden;margin-bottom:15px}.progress-fill{height:100%;background:linear-gradient(45deg,#d2691e,#cd853f);border-radius:10px;transition:width 0.5s ease;width:0}.progress-text{font-weight:600;color:#8b4513;font-size:1.1rem}

/* Question Styles */
.question-container{min-height:400px;margin-bottom:40px}.question{text-align:center;animation:slideIn 0.5s ease-in-out}.question h2{font-size:2rem;color:#8b4513;margin-bottom:30px;line-height:1.3}.question p{font-size:1.1rem;color:#6b5b4f;margin-bottom:40px}

.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:700px;margin:0 auto}.option{background:rgba(255,255,255,0.9);border:3px solid transparent;border-radius:15px;padding:25px;cursor:pointer;transition:all 0.3s ease;text-align:center;position:relative}.option:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,0.15);border-color:#d2691e}.option.selected{border-color:#d2691e;background:linear-gradient(45deg,rgba(210,105,30,0.1),rgba(205,133,63,0.1));transform:translateY(-3px)}.option-icon{font-size:2.5rem;margin-bottom:15px;display:block}.option-text{font-weight:600;color:#8b4513;font-size:1.1rem;line-height:1.4}

/* Quiz Navigation */
.quiz-navigation{display:flex;justify-content:space-between;align-items:center;margin-top:40px;gap:20px}

/* Results Screen */
.results-content{text-align:center;max-width:900px;margin:0 auto}.results-title{font-size:2.5rem;color:#8b4513;margin-bottom:20px}.results-subtitle{font-size:1.2rem;color:#6b5b4f;margin-bottom:50px}

.recommendations{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-bottom:60px}.recommendation-card{background:rgba(255,255,255,0.95);border-radius:20px;padding:30px;box-shadow:0 10px 30px rgba(0,0,0,0.1);transition:transform 0.3s ease;border:2px solid transparent}.recommendation-card:hover{transform:translateY(-5px);border-color:#d2691e}.recommendation-card.primary{border-color:#d2691e;background:linear-gradient(45deg,rgba(210,105,30,0.05),rgba(205,133,63,0.05))}

.card-header{margin-bottom:20px}.card-title{font-size:1.5rem;color:#8b4513;margin-bottom:10px;font-weight:700}.card-subtitle{color:#6b5b4f;font-size:1rem}.card-description{color:#6b5b4f;margin-bottom:25px;line-height:1.6}.card-notes{background:rgba(139,69,19,0.1);padding:15px;border-radius:10px;margin-bottom:25px}.card-notes strong{color:#8b4513}.card-actions{display:flex;flex-direction:column;gap:15px}.product-link{background:linear-gradient(45deg,#d2691e,#cd853f);color:white;padding:12px 20px;border-radius:25px;text-decoration:none;font-weight:600;transition:all 0.3s ease;font-size:0.95rem}.product-link:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(210,105,30,0.4)}

/* CTA Section */
.cta-section{background:rgba(255,255,255,0.9);padding:40px;border-radius:20px;margin:50px 0;box-shadow:0 10px 30px rgba(0,0,0,0.1)}.cta-section h3{font-size:1.8rem;color:#8b4513;margin-bottom:15px}.cta-section p{color:#6b5b4f;margin-bottom:30px;font-size:1.1rem}

.restart-btn{margin-top:30px}

/* WhatsApp Float */
.whatsapp-float{position:fixed;bottom:25px;right:25px;width:60px;height:60px;background:linear-gradient(45deg,#25d366,#128c7e);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px rgba(37,211,102,0.3);z-index:1000;transition:all 0.3s ease}.whatsapp-float:hover{transform:scale(1.1);box-shadow:0 6px 25px rgba(37,211,102,0.4)}.whatsapp-icon{font-size:1.5rem}

/* Responsive Design */
@media (max-width: 768px){.container{padding:0 15px}.title{font-size:2.2rem}.subtitle{font-size:1.1rem}.welcome-features{grid-template-columns:1fr;gap:20px;margin:30px 0}.feature{padding:15px}.question h2{font-size:1.6rem}.options{grid-template-columns:1fr;gap:15px}.option{padding:20px}.option-icon{font-size:2rem}.quiz-navigation{flex-direction:column}.quiz-navigation .btn-secondary,.quiz-navigation .btn-primary{width:100%}.recommendations{grid-template-columns:1fr}.results-title{font-size:2rem}.cta-section{padding:25px}.whatsapp-float{width:55px;height:55px;right:20px;bottom:20px}}

@media (max-width: 480px){.title{font-size:1.9rem}.question h2{font-size:1.4rem}.option{padding:15px}.option-text{font-size:1rem}.btn-primary,.btn-secondary,.btn-whatsapp{padding:12px 25px;font-size:1rem;min-width:120px}.recommendation-card{padding:20px}.card-title{font-size:1.3rem}}