/* ============================================================
   LUMIOTAX — Base / Reset / Elements
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Global scale — rem-based type & spacing scale proportionally across all pages.
   Bumped 90% → 100% (per Juan: la interfaz se veía muy pequeña). */
html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  background-image: var(--page-wash);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 540;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--text);
  font-optical-sizing: auto;
}

h1 { font-size: clamp(1.9rem, 4.2vw, var(--fs-5xl)); }
h2 { font-size: clamp(1.45rem, 2.8vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { color: var(--text-soft); }

a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

::selection { background: var(--jade-400); color: var(--ink-900); }

:focus-visible { outline: 2px solid var(--jade-600); outline-offset: 3px; border-radius: 4px; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }

/* numeric values throughout the app use tabular figures */
.figure { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---- Layout helpers ---- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }
.narrow { max-width: var(--maxw-narrow); }
.section { padding: var(--sp-9) 0; }
.center { text-align: center; }
.grid { display: grid; gap: var(--sp-5); }
.flex { display: flex; }
.between { display: flex; align-items: center; justify-content: space-between; }
.gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); }
.hidden { display: none !important; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--jade-700);
  font-weight: 600;
}
[data-theme="dark"] .eyebrow { color: var(--jade-500); }

.lead { font-size: var(--fs-md); color: var(--text-soft); line-height: var(--lh-base); }

.text-grad {
  background: linear-gradient(120deg, var(--jade-600), var(--jade-500) 40%, var(--amber-500));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}