/* ============================================================
   GRUPO ORIGEM — colors_and_type.css
   Foundation tokens: brand palette, sub-brand palettes,
   typography (Overused Grotesk variable), semantic styles.
   ============================================================ */

@font-face {
  font-family: "Overused Grotesk";
  src: url("/blog-assets/og-grotesk.woff2") format("woff2-variations"),
       url("/blog-assets/og-grotesk.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- CORE BRAND COLORS (Grupo Origem) ---------- */
  --origem-azul-principal: #0A2140;   /* Pantone 289 C — Azul Principal */
  --origem-azul-aux-01:    #91BFE8;   /* Pantone 283 C — light blue */
  --origem-azul-aux-02:    #297DE0;   /* Pantone 2727 C — bright blue */
  --origem-cinza-01:       #BABABA;   /* Cool Gray 4C */
  --origem-cinza-02:       #8A8A8C;   /* Cool Gray 8C */
  --origem-branco:         #FFFFFF;

  /* ---------- SUB-BRAND ACCENTS ---------- */
  /* Origem Invest: prata (silver, for hot stamping) */
  --origem-invest-prata:   #C9CCCE;
  /* Origem Capital: verde — Pantone 345 C */
  --origem-capital-verde:  #8FD6AB;
  /* Origem Wealth: dourado — Pantone 4545 C */
  --origem-wealth-dourado: #CFC294;
  /* Origem International: uses Azul Aux 01 */
  --origem-international-azul: #91BFE8;
  /* Origem Multi Family Office: laranja — Pantone 715 C */
  --origem-mfo-laranja:    #F78C29;

  /* ---------- EXTENDED NAVY SCALE (derived for UI use) ---------- */
  /* Built around --origem-azul-principal #0A2140 */
  --azul-950: #050F1F;
  --azul-900: #0A2140;   /* === Azul Principal === */
  --azul-800: #102E55;
  --azul-700: #173D6E;
  --azul-600: #1F4D88;
  --azul-500: #297DE0;   /* === Azul Aux 02 === */
  --azul-400: #5A9AE8;
  --azul-300: #91BFE8;   /* === Azul Aux 01 === */
  --azul-200: #BFD8F0;
  --azul-100: #E2EDF8;
  --azul-50:  #F2F7FC;

  /* ---------- NEUTRAL SCALE ---------- */
  --neutral-950: #0E1218;
  --neutral-900: #1A1F26;
  --neutral-800: #2A2F37;
  --neutral-700: #4A4F57;
  --neutral-600: #6B6F76;
  --neutral-500: #8A8A8C;   /* Cinza 02 */
  --neutral-400: #BABABA;   /* Cinza 01 */
  --neutral-300: #D6D6D6;
  --neutral-200: #E6E6E6;
  --neutral-100: #F2F2F2;
  --neutral-50:  #F8F8F8;
  --neutral-0:   #FFFFFF;

  /* ---------- SEMANTIC TOKENS — surfaces ---------- */
  --bg-canvas:        var(--neutral-0);
  --bg-canvas-muted:  var(--neutral-50);
  --bg-elevated:      var(--neutral-0);
  --bg-inverse:       var(--azul-900);
  --bg-accent-soft:   var(--azul-50);
  --bg-accent:        var(--azul-900);

  /* ---------- SEMANTIC TOKENS — foreground ---------- */
  --fg-primary:       var(--azul-900);
  --fg-secondary:     var(--neutral-700);
  --fg-muted:         var(--neutral-500);
  --fg-disabled:      var(--neutral-400);
  --fg-on-accent:     var(--neutral-0);
  --fg-inverse:       var(--neutral-0);
  --fg-link:          var(--azul-500);
  --fg-gold:          var(--origem-wealth-dourado);

  /* ---------- SEMANTIC TOKENS — borders ---------- */
  --border-subtle:    var(--neutral-200);
  --border-default:   var(--neutral-300);
  --border-strong:    var(--neutral-700);
  --border-accent:    var(--azul-900);

  /* ---------- SEMANTIC TOKENS — status ---------- */
  --status-success:   var(--origem-capital-verde);
  --status-warning:   var(--origem-mfo-laranja);
  --status-info:      var(--origem-azul-aux-02);
  --status-error:     #C0392B;

  /* ---------- TYPOGRAPHY — families ---------- */
  --font-sans: "Overused Grotesk", -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- TYPOGRAPHY — weights ---------- */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* Per brandbook hierarchy:
     - Títulos principais: Regular, tracking -25 (i.e. -0.025em), leading 1
     - Subtítulos: Medium, tracking -25, leading 1
     - Body: Regular, tracking -25, leading 1.2
     - Legends/footer caps: Regular/Medium ALL CAPS, tracking 100 (i.e. 0.1em), leading 1.5
  */

  /* ---------- TYPE SCALE ---------- */
  --text-3xs: 10px;
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-md:  16px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 88px;
  --text-7xl: 120px;

  /* ---------- TRACKING & LEADING (per brandbook) ---------- */
  --track-tight:   -0.025em;   /* "-25" in Adobe units */
  --track-normal:   0em;
  --track-wide:     0.1em;     /* "100" — for ALL CAPS legends */
  --leading-tight:  1;
  --leading-snug:   1.15;
  --leading-body:   1.4;       /* body comfort (brandbook spec'd 1.2 for tight) */
  --leading-loose:  1.5;

  /* ---------- SPACING ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- RADII (subtle — brand favors crisp, architectural shapes) ---------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 9999px;

  /* ---------- ELEVATION (restrained, premium feel) ---------- */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(10, 33, 64, 0.04);
  --shadow-sm:   0 1px 3px rgba(10, 33, 64, 0.06), 0 1px 2px rgba(10, 33, 64, 0.04);
  --shadow-md:   0 4px 12px rgba(10, 33, 64, 0.08), 0 1px 3px rgba(10, 33, 64, 0.05);
  --shadow-lg:   0 12px 32px rgba(10, 33, 64, 0.12), 0 2px 6px rgba(10, 33, 64, 0.06);
  --shadow-xl:   0 24px 56px rgba(10, 33, 64, 0.18);
  --shadow-inset-hairline: inset 0 0 0 1px rgba(10, 33, 64, 0.08);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);  /* @kind other */
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1.4);  /* @kind other */
  --ease-exit:     cubic-bezier(0.4, 0.0, 1, 1);  /* @kind other */
  --dur-fast: 140ms;  /* @kind other */
  --dur-base: 220ms;  /* @kind other */
  --dur-slow: 360ms;  /* @kind other */

  /* ---------- LAYOUT ---------- */
  --max-w-prose: 68ch;
  --max-w-container: 1200px;
  --max-w-wide: 1440px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — opt-in via .origem-prose / utilities
   ============================================================ */

body, .origem-base {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  letter-spacing: var(--track-tight);
  color: var(--fg-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.origem-display {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-primary);
}

.origem-h1 {
  font-weight: var(--weight-regular);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-primary);
}
.origem-h2 {
  font-weight: var(--weight-regular);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-primary);
}
.origem-h3 {
  font-weight: var(--weight-medium);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg-primary);
}
.origem-h4 {
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg-primary);
}
.origem-subtitle {
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg-secondary);
}
.origem-body {
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  letter-spacing: var(--track-tight);
  color: var(--fg-primary);
}
.origem-small {
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  letter-spacing: var(--track-tight);
  color: var(--fg-secondary);
}
/* "LEGENDAS E RODAPÉ" — all caps, tracking 100, leading 1.5 */
.origem-caps {
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  line-height: var(--leading-loose);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-secondary);
}
.origem-eyebrow {
  font-weight: var(--weight-medium);
  font-size: var(--text-2xs);
  line-height: var(--leading-loose);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.origem-quote {
  font-weight: var(--weight-light);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg-primary);
}
.origem-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
}



    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:var(--font-sans);color:var(--azul-900);background:#fff;-webkit-font-smoothing:antialiased;letter-spacing:-0.025em}
    a{color:inherit;text-decoration:none}
    a.tlink{transition:color 180ms cubic-bezier(0.2,0,0,1)}
    a.tlink:hover{color:var(--azul-500)}
    input,select,textarea,button{font-family:var(--font-sans)}
    ::selection{background:var(--accent-gold);color:var(--azul-900)}
    image-slot{display:block;width:100%;height:100%}
    @keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
    @keyframes slowZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
    @keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
    .goldline{background:linear-gradient(90deg,transparent,var(--accent-gold),transparent);background-size:200% 100%;animation:shimmer 6s linear infinite}
    .post{transition:transform 340ms cubic-bezier(0.2,0,0,1)}
    .post:hover{transform:translateY(-5px)}
    .post:hover .post-img-inner{transform:scale(1.06)}
    .post:hover h3{color:var(--azul-700)}
    .post-img-inner{transition:transform 720ms cubic-bezier(0.2,0,0,1)}
    .post h3{transition:color 260ms cubic-bezier(0.2,0,0,1)}
    .post-arrow{transition:transform 300ms cubic-bezier(0.2,0,0,1)}
    .post:hover .post-arrow{transform:translateX(5px)}
    .chip{transition:background 200ms cubic-bezier(0.2,0,0,1),color 200ms,border-color 200ms}
    .feat:hover .feat-img-inner{transform:scale(1.04)}
    .feat-img-inner{transition:transform 900ms cubic-bezier(0.2,0,0,1)}
    .cta-lux{position:relative;overflow:hidden}
    .cta-lux::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.5),transparent);transform:skewX(-18deg);transition:left 700ms cubic-bezier(0.2,0,0,1)}
    .cta-lux:hover::after{left:140%}