/* ============================================================
   IMPULS ORIGEN · Color tokens
   Brand: two blues in dialogue —
     · #006BC9 (bright, luminous)  → primary / impuls / energy
     · #1E63A4 (deep, calm)        → origen / hover-pressed / dark surfaces
   The pair "plays combinations": bright fills, deep grounds,
   and 006BC9 → 1E63A4 gradients carry the impulse-from-origin idea.
   Accent: coral (acogida / human welcome) — kept as the warm
           functional accent the app side depends on.
   Neutrals: warm stone (kept warm on purpose, to soften the blue
             and carry the welcome — never cold SaaS blue-grey).
   Impuls Origen belongs to the Impuls family; its own signature
   is the ascending-chevron SYMBOL (origen → impuls) + TYPOGRAPHY.
   ============================================================ */
:root {
  /* --- Blue scale · primary brand (two anchors: 006BC9 + 1E63A4) --- */
  --blue-50:  #E7F1FC;  /* brand soft — page tint, chips */
  --blue-100: #CBE1F8;
  --blue-200: #9CC7F1;
  --blue-300: #63A6E6;
  --blue-400: #2E86D8;
  --blue-500: #0F76CE;
  --blue-600: #006BC9;  /* PRIMARY — bright impuls blue */
  --blue-700: #1E63A4;  /* deep origen blue — hover / pressed / secondary */
  --blue-800: #164A78;  /* deeper — text on brand-soft, dark surfaces */
  --blue-900: #0F3556;  /* deepest — bezel, dynamic island */

  /* --- Coral scale · accent (warmth, welcome) --- */
  --coral-50:  #FFF0EE;
  --coral-100: #FFD9D4;
  --coral-200: #FFB8AF;
  --coral-300: #FF9488;  /* on-dark accent */
  --coral-400: #FF7D6E;
  --coral-500: #FF6F61;  /* accent (decorative / large) */
  --coral-600: #C93D2B;  /* accent interactive — AA with white text */
  --coral-700: #AB3526;
  --coral-800: #832A20;
  --coral-900: #551F18;

  /* --- Warm neutral scale · stone (kept warm on purpose) --- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F6F3;  /* paper — app + page background */
  --neutral-100: #EFEDE7;
  --neutral-200: #E2DFD7;
  --neutral-300: #CFCBBF;
  --neutral-400: #ABA697;
  --neutral-500: #827D6F;
  --neutral-600: #615D52;
  --neutral-700: #46433B;
  --neutral-800: #2D2B25;
  --neutral-900: #1B1A16;  /* ink */

  /* --- Semantic raw --- */
  --green-success: #1E7A52;
  --green-success-soft: #E2F1E8;
  --amber-warning: #9A6B12;
  --amber-warning-soft: #FAEFD6;
  --red-danger: #B4402C;
  --red-danger-soft: #F8E5E0;
  --teal-info: #25706B;
  --teal-info-soft: #E0EFEE;

  /* ===========================================================
     Semantic aliases — reference these in components
     =========================================================== */
  --color-brand:        var(--blue-600);
  --color-brand-strong: var(--blue-800);
  --color-brand-soft:   var(--blue-50);
  --color-accent:       var(--coral-500);
  --color-accent-strong:var(--coral-600);
  --color-accent-soft:  var(--coral-50);

  /* Impuls gradient — origen (deep) → impuls (bright). Use where
     it carries meaning (welcome hero, offer-detail hero, carnet). */
  --gradient-brand: linear-gradient(135deg, #1E63A4 0%, #006BC9 100%); /* @kind other */

  --text-strong: var(--neutral-900);
  --text-body:   var(--neutral-800);
  --text-muted:  var(--neutral-600);
  --text-subtle: var(--neutral-500);
  --text-on-brand:  #FFFFFF;
  --text-on-accent: #FFFFFF;
  --text-on-brand-soft: var(--blue-800);  /* #164A78 — text over brand-soft */
  --text-link: var(--blue-600);

  --surface-page:   var(--neutral-50);
  --surface-card:   var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --surface-brand:      var(--blue-600);
  --surface-brand-deep: var(--blue-700);   /* #1E63A4 — origen dark surface */
  --surface-brand-soft: var(--blue-50);
  --surface-accent-soft:var(--coral-50);

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand:  var(--blue-600);
  --ring: rgba(0, 107, 201, 0.34);   /* focus ring (blue-600 #006BC9 @ 34%) */

  --status-success: var(--green-success);
  --status-success-soft: var(--green-success-soft);
  --status-warning: var(--amber-warning);
  --status-warning-soft: var(--amber-warning-soft);
  --status-danger: var(--red-danger);
  --status-danger-soft: var(--red-danger-soft);
  --status-info: var(--teal-info);
  --status-info-soft: var(--teal-info-soft);
}

/* -----------------------------------------------------------
   THEME SCOPES — same identity, two temperatures.
   .theme-dashboard  → Andorra side: sober, dense, white surfaces
   .theme-app        → origin side: warm, spacious, paper + coral
   ----------------------------------------------------------- */
.theme-dashboard {
  --surface-page: var(--neutral-0);
  --surface-card: var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --color-accent: var(--coral-600);   /* accent used sparingly, AA-strong */
}
.theme-app {
  --surface-page: var(--neutral-50);
  --surface-card: var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --color-accent: var(--coral-500);   /* warmth comes forward */
}
/* ============================================================
   VINCLE · Typography tokens
   Display: Spectral (serif)   — warm, editorial headlines + wordmark
   UI/Body: Albert Sans        — clean geometric sans, data & UI
   Mono:    Spline Sans Mono   — IDs, codes, tabular data (dashboard)
   Warmth comes from the editorial serif + space + copy — never a
   handwritten script (Impuls Jove's signature, vetoed).
   Full Catalan + Castilian coverage (ç, ñ, accents).
   ============================================================ */
:root {
  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans:    'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extra:   800;

  /* type scale (16px base) */
  --text-2xs:  0.6875rem; /* 11 */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5rem;    /* 24 */
  --text-2xl:  1.875rem;  /* 30 */
  --text-3xl:  2.375rem;  /* 38 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  3.75rem;   /* 60 */

  /* line height */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.018em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.09em;  /* overlines / eyebrows */

  /* semantic roles */
  --display-font: var(--font-display);
  --display-weight: var(--weight-bold);
  --display-tracking: var(--tracking-tight);
  --heading-font: var(--font-display);
  --heading-weight: var(--weight-semibold);
  --body-font: var(--font-sans);
  --body-weight: var(--weight-regular);
  --label-weight: var(--weight-semibold);
  --eyebrow-tracking: var(--tracking-caps);
}
/* ============================================================
   VINCLE · Spacing, radii, layout tokens · 4px base grid
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* corner radii — soft, friendly, never pill-everything */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);
  --radius-control: var(--radius-md);

  /* layout */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1120px;
  --container-xl:  1320px;
  --app-width: 390px;       /* mobile app design width */
  --control-h: 44px;        /* min hit target (a11y floor) */
  --control-h-sm: 36px;
  --control-h-lg: 52px;
}
/* ============================================================
   VINCLE · Elevation, shadows, motion tokens
   Shadows are warm-tinted (ink, not pure black) and restrained.
   Motion is calm and confident — short fades + gentle ease.
   ============================================================ */
:root {
  --shadow-xs: 0 1px 2px rgba(27,26,22,0.06);
  --shadow-sm: 0 1px 2px rgba(27,26,22,0.06), 0 2px 5px rgba(27,26,22,0.05);
  --shadow-md: 0 2px 4px rgba(27,26,22,0.05), 0 8px 20px rgba(27,26,22,0.08);
  --shadow-lg: 0 4px 10px rgba(27,26,22,0.06), 0 18px 40px rgba(27,26,22,0.12);
  --shadow-xl: 0 8px 18px rgba(27,26,22,0.08), 0 32px 64px rgba(27,26,22,0.16);
  --shadow-brand: 0 8px 24px rgba(0,107,201,0.22);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.4);
  --shadow-focus: 0 0 0 3px var(--ring);

  /* motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.005em; /* gentle — Spectral is a serif */
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

::selection { background: var(--blue-200); color: var(--blue-900); }

/* ============================================================
   Impuls Origen · web pública (reglas propias)
   ============================================================ */
html{scroll-behavior:smooth}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--blue-700);text-decoration:none}
:target{scroll-margin-top:84px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--neutral-900);color:#fff;padding:8px 14px;border-radius:var(--radius-sm)}
.skip:focus{left:8px}
img{max-width:100%}

/* nav */
@media(min-width:880px){ .io-nav{display:flex !important} .io-lang{margin-left:0 !important} }
@media(max-width:879px){
  .io-split,.io-split-r{grid-template-columns:1fr !important;gap:40px !important}
  .io-split-r > *{order:0 !important}
}

/* selector de idioma */
.io-lang{display:flex;align-items:center;gap:0;border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:3px;background:var(--surface-card)}
.io-lang a{font-weight:700;font-size:13px;letter-spacing:0.02em;padding:6px 13px;border-radius:999px;color:var(--text-muted);transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast)}
.io-lang a.is-active{background:var(--color-brand);color:#fff}

/* FAQ nativo con <details> */
.io-faq{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.io-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;cursor:pointer}
.io-faq summary::-webkit-details-marker{display:none}
.io-faq summary h3{font-family:var(--font-sans);font-size:var(--text-md);font-weight:600;color:var(--text-strong);margin:0;letter-spacing:0;line-height:1.4}
.io-faq-sign::before{content:"+";color:var(--color-brand);font-size:22px;line-height:1}
.io-faq[open] .io-faq-sign::before{content:"\2212"}
.io-faq > p{padding:0 22px 22px;margin:0;font-size:var(--text-base);line-height:1.65;color:var(--text-muted)}

/* botones de tienda pendientes */
a[aria-disabled="true"]{opacity:0.7;cursor:default}

/* página legal */
.leg-body p{font-size:var(--text-base);line-height:1.72;color:var(--text-body);margin:0 0 16px}
.leg-body ul{margin:0 0 18px;padding-left:22px}
.leg-body li{font-size:var(--text-base);line-height:1.7;color:var(--text-body);margin-bottom:8px}
.leg-body h2{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);color:var(--text-strong);letter-spacing:-0.01em;margin:44px 0 14px;scroll-margin-top:96px}
.leg-body h2:first-of-type{margin-top:0}
.pend{background:var(--amber-warning-soft);color:var(--amber-warning);font-weight:600;padding:1px 7px;border-radius:6px;font-family:var(--font-mono);font-size:0.88em}
@media(max-width:899px){ .leg-grid{grid-template-columns:1fr !important} .leg-toc{display:none} }