/* ============================================================
   AG & Atapuma — Design Tokens
   Two sister societies under one group (Asistencia Gerencial):
   - ATAPUMA ABOGADOS  (legal firm) — teal #016F82 + polygonal mosaic
   - AG ASESORES BF    (financial/advisory) — navy #0D3E66 + red #8A2527
   Values transcribed from the 2026 official brand manuals.
   The two identities NEVER mix in a single document.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Poppins:wght@300;400;500;600;700&family=Raleway:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- ATAPUMA ABOGADOS — TEAL (oficial 2025) ----------
     Teal primario #007D91 (RGB 0·125·145), teal oscuro #15425D (RGB 22·66·93),
     gris #494849. El disco del logo usa un degradado teal→oscuro
     (Gradacion.png) — el degradado vive SÓLO dentro del imagotipo. */
  --atapuma-teal-900: #0c2f42;        /* deep teal (mosaic shadow / contraportada) */
  --atapuma-teal-800: #15425d;        /* TEAL OSCURO — cover/mosaic, "abogados", borders */
  --atapuma-teal-700: #0a5f6e;
  --atapuma-teal-600: #006d7e;        /* teal medio — subtitles, mosaic accent */
  --atapuma-teal-500: #007d91;        /* TEAL PRIMARIO — titles, headers, side-rail */
  --atapuma-teal-400: #2a96a7;
  --atapuma-teal-300: #66b6c2;
  --atapuma-teal-200: #aed8df;
  --atapuma-teal-100: #e0eff2;
  --atapuma-teal-50:  #f1f8f9;

  --atapuma-gray:     #494849;        /* gris institucional — "atapuma", pies, citas */

  /* Logo/disc gradient — ONLY inside the imagotipo or a single hero disc.
     Never on document body surfaces. */
  --atapuma-gradient: linear-gradient(135deg, #007d91 0%, #15425d 100%); /* @kind color */

  /* Mosaic motif — flat polygonal triangles, ~60% oscuro / 30% primario / 10% medio. */
  --atapuma-mosaic-1: #15425d; /* @kind color */
  --atapuma-mosaic-2: #007d91; /* @kind color */
  --atapuma-mosaic-3: #006d7e; /* @kind color */

  /* ---------- AG ASESORES BF — NAVY + RED (manual 2026) ----------
     Azul #0D3E66 estructural (primary), azul oscuro #000006 (cover bg),
     rojo #8A2527 acento principal, rojo vivo #BD181D restringido (puntual).
     Retired burgundy #922325/#781E1F/#A02020 must NOT be used.
     Red and blue never share a gradient outside the logo. */
  --ag-red-700: #571618;        /* darkest red shade (derived) */
  --ag-red-600: #6f1d1f;        /* hover / deep accent (derived) */
  --ag-red-500: #8a2527;        /* ROJO ACENTO — subtitles, bullets, rules, CTA */
  --ag-red-400: #a83a3c;
  --ag-red-300: #c87a7c;
  --ag-red-200: #e6bcbd;
  --ag-red-100: #f6e5e6;
  --ag-red-50:  #fbf3f3;
  --ag-red-vivid: #bd181d;      /* ROJO VIVO — restricted punctual accent only */

  --ag-blue-900: #000006;       /* AZUL OSCURO — cover/contraportada bg */
  --ag-blue-800: #06223b;
  --ag-blue-700: #0d3e66;       /* AZUL PRIMARIO — titles, headers, side-rails */
  --ag-blue-600: #134f7e;
  --ag-blue-500: #1f6396;
  --ag-blue-400: #4682ad;
  --ag-blue-300: #82a9c5;
  --ag-blue-200: #c1d4e1;
  --ag-blue-100: #e6edf3;
  --ag-blue-50:  #f4f7fa;

  /* Logo monogram ONLY — "a" (red) stacked over "G" (navy). Never reuse
     this red+blue gradient on product/document surfaces. */
  --ag-gradient-mark: linear-gradient(180deg, #8a2527 0%, #571618 45%, #0d3e66 55%, #000006 100%); /* @kind color */

  /* ---------- SHARED NEUTRALS (both manuals) ---------- */
  --ink-1000: #0a0a0a;
  --ink-900:  #000000;        /* body text (manual: Negro #000000) */
  --ink-800:  #2a2a2a;
  --ink-700:  #484847;        /* AG gris — secondary text, footers, quotes */
  --ink-600:  #595959;        /* Atapuma gris texto — footers, quotes */
  --ink-500:  #737373;
  --ink-400:  #a3a3a3;
  --ink-300:  #cfcfcf;
  --ink-200:  #e8e8e8;        /* gris formal medio — soft borders, separators */
  --ink-150:  #ededed;
  --ink-100:  #f2f2f2;        /* gris formal claro — zebra bands, neutral boxes */
  --ink-50:   #fafafa;
  --paper:    #ffffff;

  /* Body surfaces are pure white in both manuals; warm tone kept for optional
     long-form layouts only. */
  --paper-warm: #fbf9f5;
  --paper-cool: #f7f9fb;

  /* ---------- SEMANTIC (default = AG; override per-brand) ---------- */
  --bg:           var(--paper);
  --bg-subtle:    var(--paper-cool);
  --bg-elevated:  #ffffff;
  --bg-inverse:   var(--ag-blue-900);

  --fg-1:         var(--ink-900);    /* primary text */
  --fg-2:         var(--ink-700);    /* secondary text — matches both logos' wordmarks */
  --fg-3:         var(--ink-500);    /* tertiary / meta */
  --fg-mute:      var(--ink-400);
  --fg-on-dark:   #ffffff;
  --fg-on-brand:  #ffffff;

  --brand:        var(--ag-blue-700);
  --brand-fg:     #ffffff;
  --accent:       var(--ag-red-500);

  --border:       var(--ink-200);
  --border-soft:  var(--ink-150);
  --border-strong:var(--ink-300);
  --rule:         var(--ink-200);

  /* Semantic STATUS colors — used only for figures/state, never decoration,
     and always paired with a sign or label (manual accessibility rule). */
  --success: #548235;            /* verde positivo — superávits, favorable */
  --warning: #b06a00;
  --danger:  #c00000;            /* rojo alerta — déficits (≠ brand reds) */
  --info:    var(--ag-blue-700);

  /* ---------- TYPE FAMILIES (manual 2026) ----------
     Body & UI (both brands): Poppins. System fallback: Calibri.
     Display (AG):       Raleway — cover & body titles (Raleway 48–56pt covers).
     Display (Atapuma):  Barlow Condensed Bold — full-bleed teal covers/portadillas.
     Any other typeface is off-brand. No serif family is used by either brand;
     --font-serif is kept as a legacy alias that resolves to the active brand's
     display face (default = AG / Raleway; overridden under [data-brand]).
  */
  --font-sans:    'Poppins', 'Calibri', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display-ag:      'Raleway', 'Poppins', 'Calibri', system-ui, sans-serif;
  --font-display-atapuma: 'Barlow Condensed', 'Poppins', 'Calibri', system-ui, sans-serif;
  --font-serif:   var(--font-display-ag);
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE (modular, ~1.250) ---------- */
  --fs-xs:   0.75rem;     /* 12 — caption, eyebrow */
  --fs-sm:   0.8125rem;   /* 13 — small ui */
  --fs-base: 0.9375rem;   /* 15 — body default */
  --fs-md:   1rem;        /* 16 — comfortable body */
  --fs-lg:   1.125rem;    /* 18 — lede / large body */
  --fs-xl:   1.375rem;    /* 22 — h4 */
  --fs-2xl:  1.75rem;     /* 28 — h3 */
  --fs-3xl:  2.25rem;     /* 36 — h2 */
  --fs-4xl:  3rem;        /* 48 — h1 */
  --fs-5xl:  4rem;        /* 64 — display */
  --fs-6xl:  5.5rem;      /* 88 — hero display */

  --lh-tight:   1.05;  /* @kind font */
  --lh-snug:    1.18;  /* @kind font */
  --lh-normal:  1.45;  /* @kind font */
  --lh-relaxed: 1.6;   /* @kind font */
  --lh-loose:   1.75;  /* @kind font */

  --tr-tight:   -0.02em;  /* @kind font */
  --tr-snug:    -0.01em;  /* @kind font */
  --tr-normal:  0;        /* @kind font */
  --tr-wide:    0.04em;   /* @kind font */
  --tr-eyebrow: 0.18em;   /* @kind font */  /* ALL-CAPS eyebrow labels */

  /* ---------- SPACING (4-px base) ---------- */
  --sp-0:  0; /* @kind spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;
  --sp-13: 128px;

  /* ---------- RADIUS ---------- */
  --r-0:    0; /* @kind radius */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;        /* default for inputs/buttons — restrained */
  --r-lg:   10px;       /* cards */
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-pill: 999px;

  /* ---------- BORDERS ---------- */
  --bw-hair:  1px;
  --bw-thin:  1px;
  --bw-med:   1.5px;
  --bw-thick: 2px;
  --bw-rule:  3px;        /* brand accent rule under section labels */

  /* ---------- SHADOWS (restrained — this is a financial/legal brand) ---------- */
  --shadow-xs:  0 1px 2px rgba(15, 30, 50, 0.04);
  --shadow-sm:  0 1px 3px rgba(15, 30, 50, 0.06), 0 1px 2px rgba(15, 30, 50, 0.04);
  --shadow-md:  0 4px 12px rgba(15, 30, 50, 0.08), 0 2px 4px rgba(15, 30, 50, 0.04);
  --shadow-lg:  0 12px 32px rgba(15, 30, 50, 0.12), 0 4px 8px rgba(15, 30, 50, 0.06);
  --shadow-xl:  0 24px 56px rgba(15, 30, 50, 0.16), 0 8px 16px rgba(15, 30, 50, 0.06);
  --shadow-inset: inset 0 0 0 1px rgba(15, 30, 50, 0.06);
  --ring-focus: 0 0 0 3px rgba(13, 62, 102, 0.25);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 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 */
  --dur-slower: 480ms;  /* @kind other */

  /* ---------- LAYOUT ---------- */
  --container-sm: 640px;   /* @kind spacing */
  --container-md: 880px;   /* @kind spacing */
  --container-lg: 1120px;  /* @kind spacing */
  --container-xl: 1280px;  /* @kind spacing */
  --container-2xl:1440px;  /* @kind spacing */
}

/* ---------- BRAND THEME OVERRIDES ----------
   Apply [data-brand="atapuma"] or [data-brand="ag"] to the root of any page,
   section, or component to flip semantic tokens to that brand's palette.
*/
[data-brand="atapuma"] {
  --brand:      var(--atapuma-teal-500);   /* teal primario #007D91 */
  --brand-fg:   #ffffff;
  --accent:     var(--atapuma-teal-600);   /* teal medio #006D7E */
  --bg-inverse: var(--atapuma-teal-800);   /* teal oscuro #15425D */
  --bg-subtle:  var(--atapuma-teal-50);
  --info:       var(--atapuma-teal-500);
  --font-serif: var(--font-display-atapuma);
  --ring-focus: 0 0 0 3px rgba(0, 125, 145, 0.28);
}

[data-brand="ag"] {
  --brand:      var(--ag-blue-700);         /* azul #0D3E66 */
  --brand-fg:   #ffffff;
  --accent:     var(--ag-red-500);          /* rojo acento #8A2527 */
  --bg-inverse: var(--ag-blue-900);         /* azul oscuro #000006 */
  --bg-subtle:  var(--ag-blue-50);
  --info:       var(--ag-blue-700);
  --font-serif: var(--font-display-ag);
  --ring-focus: 0 0 0 3px rgba(13, 62, 102, 0.28);
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */

html {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  margin: 0;
}

/* Semantic typography (style by default; can be overridden per-brand) */
.h-display, h1.display {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(3rem, 5vw + 1rem, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-6);
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-5);
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-2);
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.lede {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.eyebrow::before {
  content: '';
  width: 24px;
  height: var(--bw-rule);
  background: currentColor;
  display: inline-block;
}

.meta {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  letter-spacing: var(--tr-wide);
}

.caption {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}

a {
  color: var(--brand);
  text-decoration: none;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover { text-decoration: underline; }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--ink-100);
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
}

blockquote {
  border-left: var(--bw-rule) solid var(--accent);
  padding: var(--sp-2) var(--sp-5);
  margin: var(--sp-6) 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--fg-2);
}

hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: var(--sp-8) 0;
}

::selection { background: var(--accent); color: white; }