* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Hero */
.hero { background: #0081ff; color: white; text-align: center; padding: 80px 20px; }
.hero h1 { font-size: 4rem; margin-bottom: 10px; }
.hero p { font-size: 1.2rem; margin-bottom: 20px; opacity: 0.9; }
.cta { background: rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; margin: 20px auto; max-width: 600px; }
.cta code { color: white; font-size: 1.2rem; }

/* Botones */
.btn { display: inline-block; padding: 12px 24px; margin: 10px; border-radius: 6px; text-decoration: none; font-weight: bold; }
.btn-primary { background: white; color: #0081ff; }
.btn-secondary { background: transparent; color: white; border: 2px solid white; }

/* Features */
.features { padding: 80px 0; }
.features h2 { text-align: center; margin-bottom: 40px; font-size: 2rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.card { background: #f5f5f5; padding: 20px; border-radius: 8px; text-align: center; }
.card h3 { margin-bottom: 10px; color: #0081ff; }

/* Screenshot */
.screenshot { padding: 60px 0; background: #f9f9f9; text-align: center; }
.screenshot img { max-width: 100%; border: 1px solid #ddd; border-radius: 8px; margin-top: 20px; }

/* CTA Final */
.cta-final { text-align: center; padding: 80px 20px; background: #0d1b2a; color: white; }
.cta-final h2 { margin-bottom: 20px; }
.cta-final p { margin: 20px 0; opacity: 0.8; }

/* Footer */
footer { text-align: center; padding: 40px 0; color: #666; font-size: 0.9rem; }
footer a { color: #0081ff; text-decoration: none; }
/* Auditoría Web */
.audit-tool { padding: 80px 0; background: #f9f9f9; text-align: center; }
.audit-tool h2 { margin-bottom: 20px; font-size: 2rem; color: #0081ff; }
.audit-tool p { margin-bottom: 30px; font-size: 1.1rem; }
.audit-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 30px; }
.audit-form input { flex: 1; min-width: 300px; padding: 15px; border: 2px solid #ddd; border-radius: 8px; font-size: 1rem; }
.audit-form button { padding: 15px 30px; font-size: 1.1rem; }
.audit-result { margin-top: 40px; }
.audit-result h3 { margin-bottom: 20px; }
.loading { margin: 20px 0; font-size: 1.2rem; color: #0081ff; }
#download-report { background: #0081ff; color: white; border: 2px solid #0081ff; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-weight: bold; display: inline-block; margin-top: 15px; }

