:root {
  --bg: #0d0d0d; --bg2: #151515; --card: #1a1a1a; --card2: #222; --line: #2a2a2a;
  --tx: #f4f4f2; --tx2: #a3a3a0; --tx3: #6b6b68;
  --ac: #3d7bff; --ac2: #8fb4ff; --acbg: rgba(61,123,255,.14);
  --ok: #3ddc84; --okbg: rgba(61,220,132,.14); --ice: #5cc8ff; --icebg: rgba(92,200,255,.14);
  --bad: #ff5470;
  --r: 16px; --r2: 10px;
  --f: "Space Grotesk", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
html.light {
  --bg: #f6f5f1; --bg2: #ecebe6; --card: #fff; --card2: #f2f1ec; --line: #e2e0d9;
  --tx: #141414; --tx2: #5c5b57; --tx3: #9a9893;
  --acbg: rgba(61,123,255,.12); --okbg: rgba(30,170,90,.12); --ok: #1aa65a; --icebg: rgba(20,140,210,.12); --ice: #1a8fd6;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { background: var(--bg); color: var(--tx); font-family: var(--f); font-size: 16px; line-height: 1.45; }
body { min-height: 100dvh; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; }
img, video { max-width: 100%; display: block; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 999px; background: var(--ac); color: #fff; font-weight: 700; text-decoration: none; transition: transform .12s, filter .12s; }
.btn:hover { filter: brightness(1.08); } .btn:active { transform: scale(.97); }
.btn.sec { background: var(--card2); color: var(--tx); border: 1px solid var(--line); }
.btn.ghost { background: transparent; color: var(--tx2); }
.btn.peq { padding: 9px 14px; font-size: 14px; }
.btn.full { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label { font-size: 13px; color: var(--tx2); font-weight: 500; }
.in { width: 100%; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r2); padding: 12px 14px; outline: none; }
.in:focus { border-color: var(--ac); }
textarea.in { min-height: 90px; resize: vertical; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line); font-size: 14px; color: var(--tx2); }
.chip.on { background: var(--acbg); border-color: var(--ac); color: var(--ac); font-weight: 600; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.muted { color: var(--tx2); } .tiny { font-size: 12px; color: var(--tx3); }
.err { color: var(--bad); font-size: 14px; min-height: 20px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; text-decoration: none; letter-spacing: -.02em; }
.logo svg { width: 28px; height: 28px; }
h1, h2, h3 { letter-spacing: -.03em; line-height: 1.1; }
:root { --fuego: #ff8a3d; --oro: #ffcc4d; --sobre-ac: #ffffff; }
/* Botón de compra: naranja llamativo sobre la marca azul */
:root { --cta1: #ff8a3d; --cta2: #ff4d2e; }
.btn.cta, .landing .btn:not(.sec):not(.ghost), .cuenta .btn:not(.sec):not(.ghost) { background: linear-gradient(135deg, var(--cta1), var(--cta2)); color: #fff; box-shadow: 0 12px 32px -10px rgba(255,90,40,.65); }