/* Identidad visual compartida por la landing y la aplicación */

:root {
  --ink: #14213d;
  --ink-2: #22355c;
  --text: #1a2230;
  --text-2: #475467;
  --muted: #667085;
  --paper: #f7f5f0;
  --paper-2: #efebe3;
  --surface: #ffffff;
  --line: #e6e1d7;
  --line-2: #d6cfc2;
  --gold: #b9841c;
  --gold-soft: #fbf4e4;
  --gold-ink: #85600f;
  --green: #1d7a57;
  --green-soft: #e9f4ee;
  --blue: #2c5cc5;
  --blue-soft: #ebf0fb;
  --violet: #6a4bc4;
  --violet-soft: #f1edfb;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --ring: 0 0 0 3px rgba(44, 92, 197, .28);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 8px 20px -6px rgba(20, 33, 61, .14), 0 2px 6px -2px rgba(20, 33, 61, .08);
  --shadow-lg: 0 28px 56px -16px rgba(20, 33, 61, .24), 0 10px 20px -10px rgba(20, 33, 61, .12);
  --radius: 12px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 15px/1.5 var(--sans);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--blue); }
img { max-width: 100%; }

/* Íconos SVG en línea */
svg.i {
  width: 18px; height: 18px; flex-shrink: 0; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
svg.i.sm { width: 15px; height: 15px; }
svg.i.lg { width: 22px; height: 22px; }

/* Marca */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: -.01em;
  font-variation-settings: "opsz" 36;
}
.brand .mark { width: 32px; height: 32px; flex-shrink: 0; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  font-weight: 600; font-size: 14.5px; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.secondary, .btn.light { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn.secondary:hover, .btn.light:hover { background: var(--paper); border-color: var(--line-2); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--paper); }
.btn.gold, .btn.warn { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn.gold:hover, .btn.warn:hover { background: var(--gold-ink); border-color: var(--gold-ink); }
.btn.lg { padding: 14px 22px; font-size: 16px; border-radius: 12px; }
.btn.small { padding: 6px 11px; font-size: 13px; border-radius: 8px; gap: 6px; }

/* Etiquetas */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold-ink);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  font-size: 13px; font-weight: 600;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent); }

.serif { font-family: var(--serif); font-variation-settings: "opsz" 72; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 10px;
  z-index: 50; font-size: 14px; max-width: 90vw; box-shadow: var(--shadow-lg);
}
.offline { position: fixed; top: 0; left: 0; right: 0; background: var(--danger); color: #fff; text-align: center; padding: 8px 12px; font-weight: 600; font-size: 14px; z-index: 60; }