/* ═══════════════════════════════════════════════════════════════════════════
   Domus Invest Spain · Brand layer (Domus Venari family)
   assets/domus-brand.css

   Loaded on every page AFTER the page's own <style> block. It remaps the
   design tokens every template already uses (navy / gold / ink / bg …) to
   the Domus Venari palette and type, then patches the few components
   whose colours are hard-coded. Values measured from domusvenari.com.

   Palette   #222222 charcoal · #393939 body · #999999 muted · #DBDBDB line
             #F3F3F3 tint · #FAFAFA ground · #FFFFFF white
   Type      Tenor Sans (headings, uppercase, 400) · Inter 300/400/500 (body)
   Buttons   Inter 14px · 0.14em tracking · uppercase · 1px border · 4px radius
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Token remap (light context) ───────────────────────────────────────── */
:root {
  --navy-mid:    #393939;
  --bg-dark:     #222222;
  --gold:        #222222;
  --gold-light:  #999999;
  --gold-dark:   #000000;
  --gold-dim:    #DBDBDB;
  --eco:         #393939;
  --eco-light:   #F3F3F3;

  --offwhite:    #FAFAFA;
  --off-white:   #FAFAFA;
  --bg:          #FAFAFA;
  --bg-warm:     #F3F3F3;
  --white:       #FFFFFF;

  --text-dark:   #222222;
  --text-primary:#222222;
  --ink:         #222222;
  --text-mid:    #393939;
  --text-body:   #393939;
  --ink-mid:     #393939;
  --text-light:  #999999;
  --text-muted:  #999999;
  --ink-light:   #999999;
  --ink-fade:    #999999;

  --border:      #DBDBDB;
  --border-light:#DBDBDB;
  --rule:        #DBDBDB;
  --border-inv:  rgba(255,255,255,0.14);
  --outline-white: rgba(255,255,255,0.7);

  --font-serif:  'Tenor Sans', 'Trebuchet MS', 'Gill Sans', sans-serif;
  --display:     'Tenor Sans', 'Trebuchet MS', 'Gill Sans', sans-serif;
  --font-sans:   'Inter', 'Helvetica Neue', Arial, sans-serif;
  --body:        'Inter', 'Helvetica Neue', Arial, sans-serif;

  --navy-light:  #2C2C2C;
  --border-mid:  rgba(0,0,0,0.12);
  --color-eco:   #393939;
  --color-eco-light: #F3F3F3;
  --color-mid:   #393939;
  --color-body:  #393939;
  --color-rule:  #DBDBDB;

  --chart-1: #222222;
  --chart-2: #6B6B6B;
  --chart-3: #B5B5B5;
}

/* ── 2. Token remap (dark context) ─────────────────────────────────────────
   Containers painted charcoal. Custom properties inherit, so redefining them
   here recolours every descendant that uses var(--gold) etc.               */
.site-header, .site-header__nav, .nav, .hero, .hero__bg, .contact-hero,
.cta-band, .cta-band--dark, .cta-band--form, .cta-band--quote,
.footer, .site-footer, .footer__bottom, footer,
.authority, .stats-dark, .stats-strip--dark, .eyebrow-strip, .ev-platform-strip,
.area-guide-platform,
.section--dark, .section--mid, .section--navy, .callout--dark, .data-panel, .form-band,
.about-process, .about-process .process__card, .services__left, .request, .market-access, .selling, .conversion,
.opportunity, .opp-block, .final-cta, .contact-panel--dark, .portfolio-card__media,
.research-card--featured, .card--route.card--primary, .card--article.card--featured,
.split-section--dark .split-section__body, .model-grid__cell--navy, .img-bg,
.card__avatar, .card__person-initials, .video-feature__media, .hero-split__card--right {
  --gold:        #FFFFFF;
  --gold-light:  #BBBBBB;
  --gold-dark:   #DDDDDD;
  --gold-dim:    rgba(255,255,255,0.25);
  --text-dark:   #FFFFFF;
  --text-primary:#FFFFFF;
  --text-mid:    rgba(255,255,255,0.8);
  --text-body:   rgba(255,255,255,0.8);
  --ink-mid:     rgba(255,255,255,0.8);
  --text-light:  #999999;
  --text-muted:  #999999;
  --ink-light:   #999999;
  --ink-fade:    #999999;
  --border:      rgba(255,255,255,0.14);
  --border-light:rgba(255,255,255,0.14);
  --rule:        rgba(255,255,255,0.14);
  --navy:        #222222;
}
/* Light cards that sit inside a dark container: restore light tokens. */
.card:not(.card--dark):not(.card--route):not(.card--article), .research-card:not(.research-card--featured),
.portfolio-card__body, .contact-panel:not(.contact-panel--dark), .process__card .card--light,
.sidebar-card, .fundamental-card, .risk-card, .micromarket-card, .hero-split__card--left, .kmi__panel {
  --gold: #222222; --gold-light: #999999; --gold-dark: #000000;
  --text-dark: #222222; --text-primary: #222222; --ink: #222222;
  --text-mid: #393939; --text-body: #393939; --ink-mid: #393939;
  --text-light: #999999; --text-muted: #999999; --ink-light: #999999; --ink-fade: #999999;
  --border: #DBDBDB; --border-light: #DBDBDB; --rule: #DBDBDB;
  --bg: #FAFAFA; --bg-warm: #F3F3F3; --offwhite: #FAFAFA; --off-white: #FAFAFA;
}

/* ── 3. Type ──────────────────────────────────────────────────────────────── */
body { font-family: var(--font-sans); font-weight: 300; -webkit-font-smoothing: antialiased; }
h1, h2, .hero__headline, .hero__heading, .heading-xl, .heading-lg, .heading--lg, .heading--xl,
.kmi__title, .positioning__title, .gateway__title, .cta-band__heading, .section-title, .section__title, .section-header__title {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
}
h3, h4, .heading-md, .heading-sm, .heading--md, .heading--sm, .card__title, .hero-split__title, .gateway-card__title, .kmi__headline {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}
h1 em, h2 em, h3 em { font-style: normal; color: var(--text-light); }
strong, b { font-weight: 500; }
p, li, td, dd { font-weight: 300; }

/* eyebrows / labels: Inter, tracked, muted (no gold) */
.label, .eyebrow, [class*="__eyebrow"], [class*="__label"], [class*="figure-label"], .hero__tag, .section-label, .stat-label, .footer__col-title, .credibility-strip__label {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* stat / metric numerals */
.stat-value, .stat__value, .authority__value, .credibility-strip__value, .stats-strip__value, .metric__value, .kpi__value, .stat-number, [class*="stat__num"], [class*="__stat-value"] {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
}

/* ── 4. Buttons ───────────────────────────────────────────────────────────── */
a[class*="btn"], button[class*="btn"], .nav__cta, a[class*="cta-btn"], a[class*="__cta"], button[class*="submit"], .contact-form__submit, input[type="submit"] {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: 13px;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  border-radius: 4px !important;
  border-width: 1px !important;
  transition: background .2s, color .2s, border-color .2s;
}
/* charcoal-filled buttons (previously gold-filled) on light ground */
.btn--gold, .btn-primary, .hero-split__btn--invest, .kmi__cta-btn--invest, .positioning__btn--invest, .gateway-card__btn--invest,
.contact-form__submit, .portfolio-card__cta, .portfolio-modal__submit, .btn--navy, .btn-navy, .research-card__btn--primary {
  background: #222222 !important; border-color: #222222 !important; color: #FFFFFF !important;
}
.btn--gold:hover, .btn-primary:hover, .hero-split__btn--invest:hover, .kmi__cta-btn--invest:hover, .positioning__btn--invest:hover, .gateway-card__btn--invest:hover,
.contact-form__submit:hover, .portfolio-card__cta:hover, .portfolio-modal__submit:hover, .btn--navy:hover, .btn-navy:hover {
  background: #000000 !important; border-color: #000000 !important; color: #FFFFFF !important;
}
/* inside dark containers the filled button flips to white */
.hero .btn--gold, .cta-band .btn--gold, .cta-band .btn-primary, .cta-band--dark .btn-primary, .section--dark .btn-primary, .final-cta .btn--gold, .request .btn--gold, .stats-dark .btn--gold,
.hero .btn-primary, .contact-hero .btn-primary, .hero-split__card--right .hero-split__btn, .process .btn-primary, .selling .btn-primary, .conversion .btn-primary, .market-access .btn-primary, .services__left .btn-primary {
  background: #FFFFFF !important; border-color: #FFFFFF !important; color: #000000 !important;
}
.hero .btn--gold:hover, .cta-band .btn--gold:hover, .cta-band .btn-primary:hover, .final-cta .btn--gold:hover, .hero-split__card--right .hero-split__btn:hover {
  background: #DBDBDB !important; border-color: #DBDBDB !important; color: #000000 !important;
}
/* outlined buttons */
.btn--outline-white, .btn-outline, .kmi__cta-btn--venari, .positioning__btn--venari, .gateway-card__btn--brokerage, .hero-split__btn--brokerage, .btn--outline, .btn-secondary {
  background: transparent !important;
}
.nav__cta, .site-header__nav .nav__cta, .nav .nav__cta { color: #FFFFFF !important; border: 1px solid #FFFFFF !important; background: transparent !important; }
.nav__cta:hover, .site-header__nav .nav__cta:hover, .nav .nav__cta:hover { background: #FFFFFF !important; color: #000000 !important; }

/* ── 5. Navigation ────────────────────────────────────────────────────────── */
.site-header, .nav { background: rgba(34,34,34,0.92) !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; backdrop-filter: blur(6px); }
.site-header__nav a, .nav__links a { font-family: var(--font-sans) !important; font-size: 12px; font-weight: 400 !important; letter-spacing: 0.14em; color: rgba(255,255,255,0.85) !important; }
.site-header__nav a:hover, .nav__links a:hover, .nav__links a.active { color: #FFFFFF !important; }
.hamburger { color: #FFFFFF !important; }
/* Logo lock-up: roof mark + DOMUS + descriptor */
.site-header__logo, .nav__logo-link, .footer__logo { text-decoration: none !important; }
.logo__primary, .nav__logo, .footer__logo, .site-header__logo-text {
  font-family: var(--font-serif) !important; font-weight: 400 !important; font-size: 19px !important; letter-spacing: 0.22em !important; text-transform: uppercase; color: #FFFFFF !important;
}
.logo__tagline, .nav__logo-sub, .footer__tagline { font-family: var(--font-sans) !important; font-size: 8px !important; letter-spacing: 0.42em !important; text-transform: uppercase; color: #FFFFFF !important; margin-top: 3px !important; }
.brand-mark { display: block; width: 24px; height: 12px; margin: 0 auto 3px auto; }
.brand-mark path { fill: #FFFFFF; }

/* ── 6. Surfaces & misc components ────────────────────────────────────────── */
.footer, .site-footer, footer { background: #222222 !important; color: #FFFFFF; }
.footer__bottom, .footer__legal, .footer__reg { color: #999999 !important; }
.site-footer a, .footer a, footer a { color: #999999 !important; } .site-footer a:hover, .footer a:hover, footer a:hover { color: #FFFFFF !important; }
.footer__col-title { color: #FFFFFF !important; }
.hero__eyebrow-line, .rule-under::after, .section-header__rule { background: #999999 !important; }
[class*="card"] { border-radius: 4px; }
.fundamental-card, .sidebar-card { border-top: 1px solid #DBDBDB !important; box-shadow: none !important; border: 1px solid #DBDBDB; }
.callout, .pricing-note, .source-note { border-left-color: #DBDBDB !important; }
.whatsapp-float, .wa-float, [class*="whatsapp"] { background: #222222 !important; box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
::selection { background: #222222; color: #FFFFFF; }
img { filter: none; }

/* ── 7. Logo lock-up ──────────────────────────────────────────────────────── */
.brand-logo { display: flex !important; flex-direction: column; align-items: center; line-height: 1; gap: 0; }
.brand-logo--left { align-items: flex-start; }
.brand-logo .logo__primary { font-family: var(--font-serif) !important; font-size: 19px !important; letter-spacing: 0.22em !important; margin-left: 0.22em; color: #FFFFFF !important; text-transform: uppercase; }
.brand-logo .logo__tagline { font-family: var(--font-sans) !important; font-size: 8px !important; letter-spacing: 0.42em !important; margin-left: 0.42em; margin-top: 4px !important; color: #FFFFFF !important; text-transform: uppercase; }
.brand-logo--left .logo__primary, .brand-logo--left .logo__tagline { margin-left: 0; }
.brand-logo--left .brand-mark { margin: 0 0 3px 0; }

/* ── 8. Page-specific patches ─────────────────────────────────────────────── */
.contact-panel--dark .contact-form__submit, .contact-form__submit--navy { background: #FFFFFF !important; border-color: #FFFFFF !important; color: #000000 !important; }
.contact-panel--dark .contact-form__submit:hover, .contact-form__submit--navy:hover { background: #DBDBDB !important; border-color: #DBDBDB !important; }
.stats-dark .stat__num, .eyebrow-strip .stat__num, .authority .stat__num, .section--dark .stat__num { color: #FFFFFF !important; }
.site-header__nav a.nav--active { color: #FFFFFF !important; }
.zone-card__status--established { color: #6B6B6B !important; }

/* area-guide header: the tel link sits outside the flex row */
.site-header > .site-header__nav-link--tel { display: none; }
.site-header__logo span { color: #FFFFFF !important; }
.eco-callout { background: #2C2C2C !important; border-color: rgba(255,255,255,0.18) !important; }

/* article template: compact nav on phones (links wrap over the logo otherwise) */
@media (max-width: 760px) {
  .nav .nav__links { display: none !important; }
  .nav .nav__tel { display: none !important; }
  .nav .nav__cta { padding: 7px 14px !important; }
}

/* Area-guide listing cards: photo + readable tag */
.listing-card__image .listing-card__tag { position: relative; z-index: 1; background: rgba(255,255,255,0.92); color: #222222; }