/* ============================================================
   LD SEGUROS — Color & Type Foundations
   Lucas D'Ambrosio · Productor Asesor de Seguros
   ------------------------------------------------------------
   Brand palette extracted from the official logo/wallpaper:
   orange #EF912D on soft-black #141414 with dark-gray geometry.
   ============================================================ */

/* --- Webfonts (Google Fonts) ----------------------------------
   Display : Sora    — geometric, confident, modern (headings)
   Body    : Manrope — clean humanist sans, fast to load (text)
   NOTE: the brand wordmark uses a custom bold grotesque; Sora is
   the nearest readily-available match. See README "Type".
--------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brand color ---- */
  --ld-orange:        #EF912D;  /* primary — CTAs, accents, logo  */
  --ld-orange-600:    #D97D1A;  /* hover / pressed                */
  --ld-orange-300:    #F6C283;  /* tints, borders on dark         */
  --ld-orange-100:    #FCEAD3;  /* soft wash backgrounds          */

  /* ---- Ink / neutrals ---- */
  --ld-ink:           #141414;  /* negro suave — primary text, dark sections */
  --ld-ink-900:       #0A0A0A;  /* true black — logo backing      */
  --ld-graphite:      #3A3A3A;  /* dark-gray geometry / lines     */
  --ld-slate:         #5C5C5C;  /* secondary text on light        */
  --ld-mute:          #8A8A8A;  /* tertiary / captions            */
  --ld-line:          #E6E6E6;  /* hairline borders               */
  --ld-cloud:         #F4F4F5;  /* gris claro — section bg        */
  --ld-paper:         #FFFFFF;  /* base surface                   */

  /* ---- Semantic foreground ---- */
  --fg-1: var(--ld-ink);        /* headings / primary             */
  --fg-2: var(--ld-slate);      /* body                           */
  --fg-3: var(--ld-mute);       /* muted                          */
  --fg-on-dark:  #F6F6F4;       /* text on ink sections           */
  --fg-on-dark-2:#B7B7B5;       /* muted text on ink              */

  /* ---- Semantic surfaces ---- */
  --bg-base:  var(--ld-paper);
  --bg-sub:   var(--ld-cloud);
  --bg-dark:  var(--ld-ink);
  --accent:   var(--ld-orange);

  /* ---- Type families ---- */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;

  /* ---- Type scale (mobile-first; clamps up on larger screens) ---- */
  --t-hero:   clamp(2.25rem, 6vw, 4rem);     /* 36 → 64 */
  --t-h1:     clamp(1.9rem, 4.4vw, 3rem);    /* 30 → 48 */
  --t-h2:     clamp(1.5rem, 3.2vw, 2.125rem);/* 24 → 34 */
  --t-h3:     clamp(1.2rem, 2.2vw, 1.5rem);  /* 19 → 24 */
  --t-lead:   clamp(1.06rem, 1.8vw, 1.3rem); /* 17 → 21 */
  --t-body:   1.0625rem;                     /* 17      */
  --t-sm:     0.9375rem;                     /* 15      */
  --t-eyebrow:0.8125rem;                     /* 13      */

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---- Elevation (soft, low-contrast) ---- */
  --sh-1: 0 1px 2px rgba(20,20,20,.06), 0 2px 8px rgba(20,20,20,.05);
  --sh-2: 0 8px 24px rgba(20,20,20,.08), 0 2px 6px rgba(20,20,20,.05);
  --sh-orange: 0 10px 26px rgba(239,145,45,.30);

  /* ---- Spacing rhythm (8px base) ---- */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;
}

/* ---- Base elements (use directly or as reference) ---- */
.ld-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ld-orange-600);
}
h1, .ld-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--t-h1); line-height: 1.05; letter-spacing: -.02em; color: var(--fg-1); }
h2, .ld-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.015em; color: var(--fg-1); }
h3, .ld-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); line-height: 1.2; color: var(--fg-1); }
p, .ld-p   { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body); line-height: 1.6; color: var(--fg-2); }
.ld-lead   { font-family: var(--font-body); font-weight: 500; font-size: var(--t-lead); line-height: 1.5; color: var(--fg-2); }