/* Familia Mileo — design tokens (portado de uploads/Claude Design/styles.css).
   FUENTE DE VERDAD VISUAL. No cambiar colores ni fuentes sin avisar al cliente. */
:root {
  /* Neutros cálidos */
  --paper: #F2EBE0;        /* hueso — fondo principal */
  --paper-soft: #FAF6EE;   /* crema — fondo secundario */
  --paper-deep: #E6DCC9;   /* hueso oscuro — divisores */
  --ink: #1A1612;          /* tinta cálida — texto / fondos oscuros */
  --ink-soft: #3D352B;     /* texto secundario */
  --ink-mute: #7A6F5E;     /* texto terciario / labels */

  /* Acentos */
  --terracotta: #B85638;   /* ÚNICO color de acción (CTA, alertas) */
  --terracotta-deep: #8A3F28;
  --olive: #6E6B3F;
  --olive-soft: #9A9669;
  --gold: #B89968;
  --gold-soft: #D9C497;

  /* Estados */
  --ok: #4E7A4A;
  --warn: #C28A1C;
  --hot: #B85638;

  /* Fuentes */
  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans: 'Manrope', 'Söhne', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Ritmo / radios / sombras (sutiles, estética editorial) */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  --shadow-soft: 0 1px 2px rgba(26,22,18,.06), 0 8px 24px rgba(26,22,18,.06);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Helpers de marca */
.fm-paper { background: var(--paper); color: var(--ink); }
.fm-ink   { background: var(--ink);   color: var(--paper); }

.fm-wordmark { font-family: var(--serif); font-weight: 500; letter-spacing: .06em; }

.fm-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-mute);
}

.fm-rule { display: inline-block; height: 1px; background: currentColor; opacity: .55; }

/* CTA — terracota, único color de acción */
.fm-btn {
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  padding: 12px 22px; border: 0; border-radius: var(--r-md);
  background: var(--terracotta); color: var(--paper-soft);
  cursor: pointer; transition: background .22s ease-out, transform .22s ease-out;
}
.fm-btn:hover { background: var(--terracotta-deep); }
.fm-btn:active { transform: translateY(1px); }
.fm-mono { font-family: var(--mono); }