/* Estilos para index.html */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh;}
.header { background: #fff; padding: 20px; }
.logo { color: #6c5ce7; font-size: 2rem; font-weight: bold; }
.hero { text-align: center; color: #fff; padding: 60px 20px 40px; }
.hero h1 { font-size: 2.8rem; margin-bottom: 12px;}
.hero p { font-size: 1.2rem;}
.tests-grid { max-width: 1100px; margin: 30px auto; padding: 0 20px; display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.test-card { background: #fff; border-radius: 16px; box-shadow: 0 3px 14px rgba(0,0,0,0.13); padding: 30px; transition: transform .22s; }
.test-card:hover { transform: translateY(-7px);}
.test-icon { font-size: 44px; margin-bottom: 20px; }
.test-card h3 { color: #333366; }
.test-card p { color: #666; margin: 15px 0; line-height: 1.6; }
.test-button { display: inline-block; padding: 11px 36px; background: #6c5ce7; color:#fff; border-radius: 30px; margin-top: 22px; text-decoration: none; font-weight: 600;}
.test-button:hover { background: #5b4cdb; }
.coming-soon { opacity: 0.6; }
.badge { background: #ffd93d; color: #333; padding: 5px 13px; border-radius: 12px; margin-left: 8px; font-size: .86em; }
footer { background: rgba(255,255,255,0.07); color: #fff; text-align: center; padding: 30px; margin-top: 70px;}
@media (max-width: 768px) {
    .hero h1 { font-size: 2rem; }
    .tests-grid { grid-template-columns: 1fr; }
}