/* Layout: degradado de marca arriba (como la app) y texto largo sobre superficie clara, en una columna de lectura. */
:root {
  --brand-1: #6B13E2; --brand-2: #3B03A5; --brand-3: #1D036F;
  --mint: #12F7C2; --on-brand: #ffffff; --on-brand-muted: rgba(255,255,255,0.72);
  --bg: #FDF7FF; --surface: #F2EBFA; --fg: #1D1A24; --muted: #494455; --line: #CBC3D8;
  --link: #4100A3; --note-bg: #E8DFF5; --mark-bg: #FFE7A8; --mark-fg: #3B2A00;
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #15121C; --surface: #211D2A; --fg: #E8E0F2; --muted: #CBC3D8; --line: #3A3446;
  --link: #CFBDFF; --note-bg: #2B2440; --mark-bg: #5A4300; --mark-fg: #FFE7A8; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #15121C; --surface: #211D2A; --fg: #E8E0F2; --muted: #CBC3D8; --line: #3A3446;
  --link: #CFBDFF; --note-bg: #2B2440; --mark-bg: #5A4300; --mark-fg: #FFE7A8; color-scheme: dark }

* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.6 var(--font); }
a { color: var(--link); text-underline-offset: 3px }
a:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 8px }
.wrap { width: 100%; max-width: 720px; margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }

.band { background: linear-gradient(180deg, var(--brand-1) 0%, var(--brand-2) 55%, var(--brand-3) 100%); color: var(--on-brand) }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px }
.nav .home { display: flex; align-items: center; gap: 10px; color: var(--on-brand); text-decoration: none; font-weight: 700 }
.nav .home img { height: 36px; width: auto }
.nav ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; font-size: 15px }
.nav ul a { color: var(--on-brand-muted); text-decoration: none }
.nav ul a[aria-current="page"], .nav ul a:hover { color: var(--on-brand) }

.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding-block: 40px 64px }
.hero img { width: 168px; height: auto }
.hero h1 { margin: 8px 0 0; font-size: clamp(32px, 7vw, 44px); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance }
.hero p { margin: 0; max-width: 30ch; color: var(--on-brand-muted); font-size: 19px; text-wrap: balance }
.badge { display: inline-block; line-height: 0 }
.badge img { width: 220px; height: auto }

.steps { display: grid; gap: 28px; padding-block: 56px; margin: 0; list-style: none; counter-reset: step }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; counter-increment: step }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 40px; height: 40px;
  border: 1.5px solid var(--brand-1); border-radius: 50%; color: var(--brand-1); font-weight: 700 }
:root[data-theme="dark"] .steps li::before { border-color: var(--link); color: var(--link) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .steps li::before { border-color: var(--link); color: var(--link) } }
.steps h2 { margin: 6px 0 4px; font-size: 19px }
.steps p { margin: 0; color: var(--muted) }

.facts { border-top: 1px solid var(--line); padding-block: 40px; display: grid; gap: 10px }
.facts h2 { margin: 0 0 6px; font-size: 22px }
.facts ul { margin: 0; padding-left: 20px; color: var(--muted) }

.doc-head { padding-block: 28px 44px }
.doc-head h1 { margin: 0; font-size: clamp(30px, 6vw, 40px); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance }
.doc-head p { margin: 10px 0 0; color: var(--on-brand-muted); font-size: 15px }
.doc { padding-block: 40px 56px }
.doc h2 { margin: 40px 0 10px; font-size: 21px; line-height: 1.3; text-wrap: balance }
.doc h2:first-child { margin-top: 0 }
.doc p, .doc li { max-width: 65ch }
.doc ul { padding-left: 22px }
.doc li + li { margin-top: 6px }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line) }
.doc th { font-weight: 700; background: var(--surface) }
.table { overflow-x: auto; margin: 12px 0 }
.note { background: var(--note-bg); border-radius: 12px; padding: 16px 18px; margin: 16px 0 }
.note p { margin: 0 }
mark { background: var(--mark-bg); color: var(--mark-fg); padding: 0 4px; border-radius: 4px }

footer { border-top: 1px solid var(--line); padding-block: 28px; font-size: 14px; color: var(--muted) }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between }
footer nav { display: flex; gap: 16px }