/* Estilos minimalistas y agradables */
:root {
  --max-w: 900px;
  --radius: 16px;
  --shadow: 0 10px 20px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji'; line-height: 1.5; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #f2f2f2; padding: 0.2em 0.4em; border-radius: 6px; }

.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 24px; }
header { padding-top: 32px; }
header h1 { margin: 0 0 8px 0; }
nav a { margin-right: 16px; font-weight: 600; }

main { padding: 16px 0 64px; }

.card {
  background: white;
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  border: 1px solid #eee;
}

.note { opacity: 0.7; }

.footer {
  border-top: 1px solid #eee;
  opacity: 0.8;
}

/* Fondo suave */
body {
  background: linear-gradient(180deg, #fafafa 0%, #f7f7ff 50%, #f5fbff 100%);
}