/* =============================================================
 * INCA — Inversiones Cabrera
 * Design tokens: colors + type
 * Source of truth for all surfaces (web, slides, mocks).
 * ============================================================= */

/* ---------- Type ----------
 *  Montserrat (uploaded brand fonts) → body, UI, labels, micro-copy
 *  Cormorant Garamond → editorial display (luxury real-estate voice)
 *
 *  Weights shipped: 400 / 600 / 700 / 900 — covers the full source-template
 *  scale (light body, semibold accents, bold runs, black headlines).
 */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  /* =========================================================
   * COLORS — Brand
   * Azul marino + azul oscuro anchor every surface.
   * Everything else is a tinted derivative or a neutral.
   * ========================================================= */
  --inca-navy:        #132040;   /* primary — azul marino */
  --inca-navy-deep:   #0a1432;   /* navbar / hero overlays — azul oscuro */
  --inca-navy-ink:    #050e1f;   /* deepest, near-black for headlines on light */

  /* Brand tints (used for hover states, highlights, links).
   * Tuned darker than a pure tint ramp so they read as branded
   * navy variations rather than washed-out pastels. */
  --inca-sky:         #4a6b94;   /* nav hover — muted navy sky */
  --inca-azure:       #2e78d6;   /* link hover */
  --inca-cobalt:      #0e3fb2;   /* button hover fill */

  /* =========================================================
   * COLORS — Neutrals
   * Warm-cool grays tuned to look correct beside navy.
   * ========================================================= */
  --inca-white:       #ffffff;
  --inca-paper:       #f0f4f8;   /* alt section bg */
  --inca-mist:        #e4ecf3;
  --inca-line:        #d6dde6;   /* hairline borders */
  --inca-muted:       #777777;   /* body copy on light */
  --inca-ink:         #1a2236;   /* main text on light */
  --inca-black:       #000000;

  /* =========================================================
   * COLORS — Semantic
   * ========================================================= */
  --inca-success:     #2fca2d;   /* form success, slick active dot */
  --inca-danger:      #ff0000;
  --inca-wa-green:    #25d366;   /* WhatsApp float button */

  /* =========================================================
   * SURFACES — pre-mixed transparencies for glassmorphism
   * ========================================================= */
  --inca-glass-navbar: rgba(10, 20, 50, 0.78);   /* navbar fill */
  --inca-glass-top:    rgba(10, 20, 50, 0.82);   /* top bar fill */
  --inca-glass-stroke: rgba(255, 255, 255, 0.08);/* glass bottom hairline */
  --inca-hero-overlay: rgba(5, 14, 31, 0.55);    /* dark photo overlay */
  --inca-feature-edge: rgba(255, 255, 255, 0.50);/* dotted card border on dark */
  --inca-btn-outline:  rgba(255, 255, 255, 0.40);/* ghost button border */

  /* =========================================================
   * RADII — flat, mostly square. Pills for primary CTAs.
   * ========================================================= */
  --inca-radius-none:  0;
  --inca-radius-sm:    10px;   /* secondary buttons */
  --inca-radius-md:    14px;
  --inca-radius-lg:    25px;   /* primary pill button */
  --inca-radius-full:  9999px;

  /* =========================================================
   * SHADOWS — restrained. Real-estate aesthetic, not webby.
   * ========================================================= */
  --inca-shadow-card:  0 2px 8px rgba(10, 20, 50, 0.06);
  --inca-shadow-pop:   0 12px 40px rgba(10, 20, 50, 0.18);
  --inca-shadow-wa:    0 4px 15px rgba(37, 211, 102, 0.5);

  /* =========================================================
   * SPACING SCALE — modest 4px ramp
   * ========================================================= */
  --inca-space-1:  4px;
  --inca-space-2:  8px;
  --inca-space-3:  12px;
  --inca-space-4:  16px;
  --inca-space-5:  24px;
  --inca-space-6:  32px;
  --inca-space-7:  48px;
  --inca-space-8:  64px;
  --inca-space-9:  96px;
  --inca-space-10: 130px;  /* section padding standard */

  /* =========================================================
   * MOTION
   * ========================================================= */
  --inca-ease:        cubic-bezier(.22, .61, .36, 1);
  --inca-duration:    0.3s;
  --inca-duration-lg: 0.5s;

  /* =========================================================
   * GLASS
   * ========================================================= */
  --inca-blur:        10px;

  /* =========================================================
   * TYPE — family + tokens
   * ========================================================= */
  --inca-font-sans:   'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --inca-font-serif:  'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Sizes (desktop scale from existing site) */
  --inca-fs-h1: 72px;
  --inca-fs-h2: 48px;
  --inca-fs-h3: 36px;
  --inca-fs-h4: 24px;
  --inca-fs-h5: 18px;
  --inca-fs-h6: 14px;
  --inca-fs-body: 16px;
  --inca-fs-small: 13px;
  --inca-fs-eyebrow: 12px;

  /* Tracking — Montserrat is wider than Lato, so the brand's generous
   * tracking from the source template is dialed back a notch here. */
  --inca-track-tight:   0.02em;
  --inca-track-default: 0.06em;
  --inca-track-loose:   0.12em;

  /* Weights — full Montserrat range (400 / 600 / 700 / 900) is available. */
  --inca-w-thin: 400;
  --inca-w-light: 400;
  --inca-w-regular: 400;
  --inca-w-semibold: 600;
  --inca-w-bold: 700;
  --inca-w-black: 900;
}

/* =============================================================
 * SEMANTIC TYPE — drop-in classes / element defaults
 * Body uses 300-weight Lato; headlines use 900 with caps tracking.
 * ============================================================= */

body, .inca {
  font-family: var(--inca-font-sans);
  font-size: var(--inca-fs-body);
  font-weight: var(--inca-w-light);
  line-height: 1.75;
  letter-spacing: var(--inca-track-default);
  color: var(--inca-muted);
  -webkit-font-smoothing: antialiased;
}

.inca-h1, h1.inca {
  font-size: var(--inca-fs-h1);
  font-weight: var(--inca-w-black);
  line-height: 1.2;
  letter-spacing: var(--inca-track-tight);
  color: var(--inca-navy-ink);
  margin: 0;
}
.inca-h2, h2.inca {
  font-size: var(--inca-fs-h2);
  font-weight: var(--inca-w-black);
  line-height: 1.2;
  letter-spacing: var(--inca-track-default);
  color: var(--inca-navy-ink);
  margin: 0;
}
.inca-h2 .accent, h2.inca .accent { color: var(--inca-navy); }

.inca-h3, h3.inca {
  font-size: var(--inca-fs-h3);
  font-weight: var(--inca-w-black);
  line-height: 1.2;
  letter-spacing: 0.075em;
  color: var(--inca-navy-ink);
  margin: 0;
}
.inca-h4, h4.inca {
  font-size: var(--inca-fs-h4);
  font-weight: var(--inca-w-light);
  line-height: 1.6;
  letter-spacing: var(--inca-track-default);
  color: var(--inca-muted);
  margin: 0;
}
.inca-h5, h5.inca {
  font-size: var(--inca-fs-h5);
  font-weight: var(--inca-w-light);
  line-height: 1.5;
  letter-spacing: 0.075em;
  color: var(--inca-muted);
  margin: 0;
}
.inca-h6, h6.inca {
  font-size: var(--inca-fs-h6);
  font-weight: var(--inca-w-black);
  line-height: 1.4;
  letter-spacing: var(--inca-track-default);
  text-transform: uppercase;
  color: var(--inca-navy-ink);
  margin: 0;
}
.inca-p, p.inca {
  font-size: var(--inca-fs-body);
  font-weight: var(--inca-w-light);
  line-height: 1.75;
  letter-spacing: var(--inca-track-default);
  color: var(--inca-muted);
  margin: 0;
}
.inca-eyebrow {
  font-size: var(--inca-fs-eyebrow);
  font-weight: var(--inca-w-black);
  letter-spacing: var(--inca-track-default);
  text-transform: uppercase;
  color: var(--inca-navy);
}
.inca-blockquote, blockquote.inca {
  font-size: 18px;
  font-style: italic;
  line-height: 2;
  font-weight: var(--inca-w-light);
  letter-spacing: var(--inca-track-default);
  color: var(--inca-muted);
}