/* ============================================================
   Base: reset, documento, tipografia y botones
   ============================================================ */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
html { overflow-x: hidden; }
body {
  margin: 0; overflow-x: hidden; max-width: 100%;
  background:
    radial-gradient(1100px 620px at 50% -8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--bg)), var(--bg) 45%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { margin: 0; font-weight: 600; }
.muted { color: var(--muted); }

/* ---------------- Botones base ---------------- */
.btn {
  font: inherit; font-weight: 500; border-radius: var(--radius-sm);
  border: 1px solid var(--border); padding: 0.5rem 0.85rem; cursor: pointer;
  background: var(--surface); color: var(--text);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.btn:hover { border-color: var(--border-strong); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary {
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
  font-weight: 600; letter-spacing: 0.01em;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; border-color: transparent; padding: 0.4rem 0.6rem; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: transparent; }

/* Movil: el cuerpo baja de escala */
@media (max-width: 560px) {
  body { font-size: 14px; }
}