/* ============================================================
   MTB SEGUROS — Color & Type Foundations
   Brand: "MTB Seguros e Consórcio Inteligente"
   Aesthetic: premium dark, metallic gold + tech blue
   ------------------------------------------------------------
   FONT SUBSTITUTION NOTE:
   The original logo wordmark is a custom heavy geometric sans.
   We substitute Montserrat (display/headings) + Mulish (body/UI),
   both from Google Fonts. Flag to client for exact brand fonts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --mtb-black:        #04060D;  /* deepest backdrop */
  --mtb-navy-900:     #080C18;  /* primary background */
  --mtb-navy-800:     #0C1224;  /* raised surface */
  --mtb-navy-700:     #111A30;  /* card surface */
  --mtb-navy-600:     #17223E;  /* hover / border-inner */
  --mtb-navy-500:     #20304F;  /* divider on dark */

  /* ---------- GOLD (metallic) ---------- */
  --gold-100:         #FBEFC4;  /* highlight sheen */
  --gold-200:         #F4DC93;  /* bright */
  --gold-300:         #E9C766;  /* primary gold (text/icons) */
  --gold-400:         #D4AF37;  /* brand gold */
  --gold-500:         #B8860B;  /* deep amber */
  --gold-600:         #8A5E0A;  /* shadow gold */
  /* metallic fill — use as background then bg-clip:text for wordmarks */
  --gold-metal: linear-gradient(160deg,#FBEFC4 0%,#F0D27E 22%,#D4AF37 50%,#B8860B 74%,#E9C766 100%);
  --gold-sheen: linear-gradient(180deg,#FCEFB8 0%,#E4BB4E 48%,#B8860B 100%);

  /* ---------- BLUE (tech / intelligence) ---------- */
  --blue-200:         #8FD0F7;
  --blue-300:         #4FB0EE;
  --blue-400:         #2FA0EA;  /* brand blue */
  --blue-500:         #1B6FB5;
  --blue-600:         #114E84;
  --blue-glow:        radial-gradient(closest-side, rgba(47,160,234,.55), rgba(47,160,234,0));

  /* ---------- INK / TEXT ---------- */
  --fg-1:  #FFFFFF;             /* primary text on dark */
  --fg-2:  #C9D2E2;             /* secondary text */
  --fg-3:  #8694AC;             /* muted / captions */
  --fg-4:  #56627A;             /* disabled / faint */
  --fg-gold: #E9C766;          /* gold text accent */
  --fg-on-gold: #1A1203;       /* ink on gold buttons */

  /* ---------- LINES / BORDERS ---------- */
  --line-gold:    rgba(212,175,55,.40);
  --line-gold-soft: rgba(212,175,55,.18);
  --line-cool:    rgba(143,170,210,.16);
  --line-hair:    rgba(255,255,255,.07);

  /* ---------- SEMANTIC ---------- */
  --ok:    #36B37E;
  --warn:  #E9C766;
  --danger:#E5564B;
  --info:  #2FA0EA;

  /* ---------- ELEVATION / GLOW ---------- */
  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -18px rgba(0,0,0,.8);
  --shadow-raised: 0 24px 60px -22px rgba(0,0,0,.85);
  --glow-gold: 0 0 0 1px rgba(212,175,55,.25), 0 8px 30px -10px rgba(212,175,55,.35);
  --glow-blue: 0 0 28px -6px rgba(47,160,234,.5);
  --ring-gold: 0 0 0 1px var(--line-gold);

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- SPACING (8px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Mulish', system-ui, sans-serif;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC TYPE TOKENS
   ============================================================ */
.mtb-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--fg-gold);
}
.mtb-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--fg-1);
}
.mtb-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--fg-1);
}
.mtb-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--fg-1);
}
.mtb-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--fg-1);
}
.mtb-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--fg-2);
}
.mtb-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-2);
}
.mtb-small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-3);
}
.mtb-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Metallic gold text — apply to a wordmark / number / headline accent */
.mtb-gold-text {
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}