/* ============================================================
   NUMO INVESTIMENTOS IMOBILIÁRIOS — Foundations
   Cores + Tipografia oficiais. Fonte de verdade:
   docs (brand-foundation.md) + assets/identity-screens/Numo_TelaConceitualXX.jpg
   ============================================================ */

/* ---------- Utendo Family (única fonte da marca) ---------- */
@font-face { font-family: "Utendo"; font-weight: 100; font-display: swap;
  src: url("assets/fonts/utendo/Utendo-Hairline.ttf") format("truetype"); }
@font-face { font-family: "Utendo"; font-weight: 200; font-display: swap;
  src: url("assets/fonts/utendo/Utendo-Thin.ttf") format("truetype"); }
@font-face { font-family: "Utendo"; font-weight: 300; font-display: swap;
  src: url("assets/fonts/utendo/Utendo-Light.ttf") format("truetype"); }
@font-face { font-family: "Utendo"; font-weight: 400; font-display: swap;
  src: url("assets/fonts/utendo/Utendo-Regular.ttf") format("truetype"); }
@font-face { font-family: "Utendo"; font-weight: 500; font-display: swap;
  src: url("assets/fonts/utendo/Utendo-Medium.ttf") format("truetype"); }
@font-face { font-family: "Utendo"; font-weight: 600; font-display: swap;
  src: url("assets/fonts/utendo/Utendo-Semibold.ttf") format("truetype"); }
@font-face { font-family: "Utendo"; font-weight: 700; font-display: swap;
  src: url("assets/fonts/utendo/Utendo-Bold.ttf") format("truetype"); }
@font-face { font-family: "Utendo"; font-weight: 800; font-display: swap;
  src: url("assets/fonts/utendo/Utendo-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Utendo"; font-weight: 900; font-display: swap;
  src: url("assets/fonts/utendo/Utendo-Black.ttf") format("truetype"); }
/* extras disponíveis: Utendo-ExtraLight (250), Utendo-ExtraBlack (950) — usar só se a peça pedir */
@font-face { font-family: "Utendo ExtraLight"; font-weight: 250; font-display: swap;
  src: url("assets/fonts/utendo/Utendo-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Utendo ExtraBlack"; font-weight: 950; font-display: swap;
  src: url("assets/fonts/utendo/Utendo-ExtraBlack.ttf") format("truetype"); }

:root {
  /* ---------- PALETA OFICIAL (4 cores — não inventar fora dela) ---------- */
  --azul-escuro:   #040E17;  /* quase-preto azulado — textos e fundos muito escuros */
  --imperial-blue: #011746;  /* Pantone 2768 C — cor-assinatura, heroes e fundos */
  --branco-gelo:   #F7FFFF;  /* off-white frio — fundos claros */
  --branco:        #FFFFFF;  /* knock-out em fundos escuros */

  /* ---------- Tons derivados (apenas opacidades/misturas da paleta — sem cor nova) ---------- */
  --imperial-700:  #02205f;  /* clareamento controlado do imperial p/ gradientes */
  --imperial-300:  #5b6f95;  /* imperial dessaturado p/ texto secundário em claro */
  --line-dark:     rgba(255,255,255,0.16); /* divisórias sobre escuro */
  --line-light:    rgba(4,14,23,0.10);     /* divisórias sobre claro */
  --veil-dark:     rgba(1,23,70,0.55);     /* véu p/ legibilidade sobre foto */

  /* ---------- Papéis semânticos ---------- */
  --bg:            var(--branco-gelo);
  --bg-elevated:   var(--branco);
  --bg-invert:     var(--imperial-blue);
  --bg-deep:       var(--azul-escuro);
  --fg:            var(--azul-escuro);   /* texto principal sobre claro */
  --fg-muted:      var(--imperial-300);  /* texto secundário sobre claro */
  --fg-on-dark:    var(--branco);        /* texto sobre escuro */
  --fg-on-dark-muted: rgba(247,255,255,0.66);
  --accent:        var(--imperial-blue); /* cor de ação / destaque */
  --border:        var(--line-light);
  --border-on-dark:var(--line-dark);

  /* ---------- Tipografia ---------- */
  --font: "Utendo", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* pesos (telas 9–10): Light=secundário, Regular=corpo, Bold=destaque, ExtraBold/Black=títulos/wordmark */
  --w-hairline: 100; --w-thin: 200; --w-light: 300; --w-regular: 400;
  --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-extrabold: 800; --w-black: 900;

  /* tracking — a marca usa caps com tracking largo em taglines/labels */
  --track-tag:   0.22em;  /* INVESTIMENTOS IMOBILIÁRIOS, eyebrows, labels */
  --track-tight: -0.02em; /* títulos grandes */

  /* escala tipográfica (clamp p/ responsivo; base 16px) */
  --fs-display: clamp(2.75rem, 6vw, 5rem);   /* heroes */
  --fs-h1:      clamp(2rem, 4vw, 3.25rem);
  --fs-h2:      clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.625rem);
  --fs-lead:    clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-small:   0.9375rem;   /* 15px */
  --fs-eyebrow: 0.8125rem;   /* 13px caps */

  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-body:  1.6;

  /* ---------- Espaçamento (escala 4px) ---------- */
  --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;

  /* ---------- Raio (cantos suavizados — filosofia tipográfica da designer) ---------- */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 40px; --r-pill: 999px;

  /* ---------- Sombras (discretas, premium — nunca dramáticas) ---------- */
  --shadow-sm: 0 1px 2px rgba(1,23,70,0.06);
  --shadow-md: 0 8px 24px rgba(1,23,70,0.10);
  --shadow-lg: 0 24px 60px rgba(1,23,70,0.16);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms; --dur: 280ms; --dur-slow: 520ms;

  /* ---------- Gradientes editoriais da marca ---------- */
  --grad-hero: radial-gradient(120% 90% at 50% 110%, #06245f 0%, var(--imperial-blue) 45%, var(--azul-escuro) 100%);
  --grad-light: linear-gradient(135deg, var(--branco) 0%, var(--branco-gelo) 55%, #e9f2fb 100%);
}

/* ============================================================
   ELEMENTOS SEMÂNTICOS
   ============================================================ */
.numo-display, .numo-h1, .numo-h2, .numo-h3 { color: var(--fg); margin: 0; text-wrap: balance; }

.numo-display {
  font-family: var(--font); font-weight: var(--w-extrabold);
  font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--track-tight);
}
.numo-h1 { font-family: var(--font); font-weight: var(--w-bold); font-size: var(--fs-h1);
  line-height: var(--lh-snug); letter-spacing: var(--track-tight); }
.numo-h2 { font-family: var(--font); font-weight: var(--w-bold); font-size: var(--fs-h2);
  line-height: var(--lh-snug); }
.numo-h3 { font-family: var(--font); font-weight: var(--w-semibold); font-size: var(--fs-h3);
  line-height: var(--lh-snug); }

.numo-eyebrow {
  font-family: var(--font); font-weight: var(--w-semibold); font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: var(--track-tag); color: var(--fg-muted);
}
.numo-lead { font-family: var(--font); font-weight: var(--w-light); font-size: var(--fs-lead);
  line-height: 1.45; color: var(--fg); }
.numo-body { font-family: var(--font); font-weight: var(--w-regular); font-size: var(--fs-body);
  line-height: var(--lh-body); color: var(--fg); text-wrap: pretty; }
.numo-small { font-family: var(--font); font-weight: var(--w-regular); font-size: var(--fs-small);
  line-height: 1.5; color: var(--fg-muted); }

/* tagline oficial — duas linhas, peso leve, caps tracking largo */
.numo-tagline { font-family: var(--font); font-weight: var(--w-light); text-transform: uppercase;
  letter-spacing: var(--track-tag); line-height: 1.25; color: inherit; }

/* destaque sublinhado da marca (banner-so-texto.jpg) */
.numo-underline { font-weight: var(--w-bold); border-bottom: 3px solid currentColor; padding-bottom: 2px; }