/* —— RESET RÁPIDO —— */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, sans-serif; line-height: 1.6; color: #222; }

/* —— LAYOUT BÁSICO —— */
.header { display: flex; justify-content: space-between; align-items: center;
          padding: 1rem 2rem; background: #fff; }
.logo { height: 48px; }
nav ul { list-style: none; display: flex; gap: 1.5rem; }
nav a { text-decoration: none; color: #222; font-weight: 600; }
nav a:hover { color: #0070f3; }

.hero { text-align: center; padding: 4rem 2rem; background: #f5f7ff; }
.hero h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.hero p { max-width: 600px; margin: 0 auto 2rem; }
.btn { background: #0070f3; color: #fff; padding: 0.75rem 1.5rem;
       border-radius: 4px; text-decoration: none; font-weight: 700; }
.btn:hover { background: #0059c1; }

.content, .features { padding: 3rem 2rem; max-width: 800px; margin: auto; }
.content h2, .features h2 { margin-bottom: 1rem; font-size: 1.8rem; }
.content h3 { margin-top: 1.5rem; margin-bottom: 0.5rem; }

.features ul { margin-top: 1rem; display: grid; gap: 1rem; }
.features li { background: #eef2ff; padding: 1rem; border-radius: 6px; }

.cta { text-align: center; padding: 3rem 2rem; background: #0070f3; color: #fff; }
.cta a { color: #fff; font-weight: 700; text-decoration: underline; }

.footer { text-align: center; padding: 1rem; font-size: 0.875rem; background: #f0f0f0; }