/* ============================================================
   MERIDIANO CAPITAL — design system (tokens + base + components)
   Fonte única de verdade para cores, tipografia e espaçamento.
   ============================================================ */

/* — Tokens: cor — */
:root {
  --mc-navy: #0D1B2A;
  --mc-navy-deep: #08131e;
  --mc-navy-raised: #10202f;
  --mc-navy-tint: #14263a;
  --mc-cream: #F5F0E8;
  --mc-steel: #2E5D8E;

  --mc-copper: #BE7F53;
  --mc-copper-ink: #8A5533;
  --mc-gold: #C9A84C;
  --mc-gold-ink: #9A7F2E;

  --mc-ink-900: #0D1B2A;
  --mc-ink-700: #33404d;
  --mc-ink-500: #4a5560;
  --mc-ink-400: #7a8592;
  --mc-ink-300: #9aa4ae;
  --mc-line: rgba(13,27,42,0.12);
  --mc-line-strong: rgba(13,27,42,0.18);

  --mc-on-navy: #F5F0E8;
  --mc-on-navy-80: rgba(245,240,232,0.82);
  --mc-on-navy-60: rgba(245,240,232,0.6);
  --mc-on-navy-45: rgba(245,240,232,0.45);
  --mc-line-navy: color-mix(in srgb, var(--mc-copper) 22%, transparent);
  --mc-grid-navy: color-mix(in srgb, var(--mc-copper) 6%, transparent);

  --mc-bg: var(--mc-cream);
  --mc-bg-navy: var(--mc-navy);
  --mc-surface: var(--mc-cream);
  --mc-text: var(--mc-ink-900);
  --mc-text-body: var(--mc-ink-700);
  --mc-text-muted: var(--mc-ink-400);
  --mc-accent: var(--mc-copper);
  --mc-accent-ink: var(--mc-copper-ink);
  --mc-secondary: var(--mc-steel);
  --mc-divider: var(--mc-line);

  /* — Tokens: tipografia — */
  --mc-font-display: 'Cormorant Garamond', Georgia, serif;
  --mc-font-body: 'Archivo', system-ui, sans-serif;
  --mc-wt-display: 500;
  --mc-wt-display-bold: 600;
  --mc-wt-body: 400;
  --mc-wt-body-med: 500;
  --mc-wt-body-bold: 600;
  --mc-track-eyebrow: 0.3em;
  --mc-track-capital: 0.42em;
  --mc-track-caps: 0.2em;
  --mc-track-wordmark: 0.08em;

  /* — Tokens: espaçamento — */
  --mc-space-9: 130px;
  --mc-grid-cell: 64px;
  --mc-radius-none: 0;
  --mc-radius-pill: 100px;
  --mc-shadow-card: 0 30px 60px -20px rgba(13,27,42,0.55);
  --mc-shadow-cover: 0 30px 70px -24px rgba(13,27,42,0.5);
  --mc-measure: 1200px;
}

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Archivo:wght@400;500;600;700&display=swap');

/* — Base — */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--mc-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--mc-text);
  background: var(--mc-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--mc-font-display);
  font-weight: var(--mc-wt-display);
  line-height: 1.2;
  margin: 0;
}
p { margin: 0 0 18px; text-wrap: pretty; }
strong { font-weight: var(--mc-wt-body-bold); color: var(--mc-text); }
em { font-family: var(--mc-font-display); font-style: italic; }
a { color: var(--mc-accent-ink); text-decoration: none; text-underline-offset: 3px; transition: color .18s ease; }
a:hover { color: var(--mc-accent); }
::selection { background: var(--mc-accent); color: var(--mc-navy); }

.mc-eyebrow {
  font-family: var(--mc-font-body);
  font-size: 13px;
  font-weight: var(--mc-wt-body-bold);
  letter-spacing: var(--mc-track-eyebrow);
  text-transform: uppercase;
  color: var(--mc-accent-ink);
}

/* — Componentes: Button — */
.mc-btn {
  -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  cursor: pointer; font-family: var(--mc-font-body); font-weight: var(--mc-wt-body-bold);
  letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid transparent;
  border-radius: var(--mc-radius-none); text-decoration: none; line-height: 1;
  transition: background .18s ease, color .18s ease, border-color .18s ease; white-space: nowrap;
}
.mc-btn[data-size="sm"] { padding: 9px 18px; font-size: 11px; }
.mc-btn[data-size="md"] { padding: 13px 26px; font-size: 12px; }
.mc-btn[data-size="lg"] { padding: 16px 34px; font-size: 13px; }
.mc-btn[data-variant="primary"] { background: var(--mc-accent); color: var(--mc-navy); border-color: var(--mc-accent); }
.mc-btn[data-variant="primary"]:hover { background: color-mix(in srgb, var(--mc-copper) 86%, #000); border-color: color-mix(in srgb, var(--mc-copper) 86%, #000); }
.mc-btn[data-variant="primary"]:active { background: var(--mc-copper-ink); border-color: var(--mc-copper-ink); }
.mc-btn[data-variant="secondary"][data-ondark="0"] { background: transparent; color: var(--mc-navy); border-color: var(--mc-line-strong); }
.mc-btn[data-variant="secondary"][data-ondark="0"]:hover { background: color-mix(in srgb, var(--mc-navy) 6%, transparent); border-color: var(--mc-ink-700); }
.mc-btn[data-variant="secondary"][data-ondark="1"] { background: transparent; color: var(--mc-cream); border-color: var(--mc-line-navy); }
.mc-btn[data-variant="secondary"][data-ondark="1"]:hover { background: color-mix(in srgb, var(--mc-cream) 8%, transparent); border-color: var(--mc-accent); }
.mc-btn[data-variant="ghost"][data-ondark="0"] { background: transparent; color: var(--mc-accent-ink); border-color: transparent; letter-spacing: 0.24em; }
.mc-btn[data-variant="ghost"][data-ondark="1"] { background: transparent; color: var(--mc-copper); border-color: transparent; letter-spacing: 0.24em; }
.mc-btn[data-variant="ghost"]:hover { color: var(--mc-accent); text-decoration: underline; text-underline-offset: 5px; }
.mc-btn:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 3px; }

/* — Componentes: Input — */
.mc-field { display: block; }
.mc-field label {
  display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mc-ink-400); margin-bottom: 8px;
}
.mc-field[data-ondark="1"] label { color: var(--mc-on-navy-60); }
.mc-input {
  width: 100%; min-height: 44px; padding: 12px 14px; font-family: var(--mc-font-body);
  font-size: 15px; color: var(--mc-ink-900); background: #ffffff;
  border: 1px solid var(--mc-line-strong); border-radius: var(--mc-radius-none);
  caret-color: var(--mc-accent); outline: none;
}
.mc-input[data-ondark="1"] { color: var(--mc-cream); background: var(--mc-navy-raised); border-color: var(--mc-line-navy); }
textarea.mc-input { min-height: 92px; resize: vertical; }
.mc-input::placeholder { color: var(--mc-ink-400); }
.mc-input:hover { border-color: var(--mc-ink-500); }
.mc-input:focus-visible { border-color: var(--mc-accent); outline: none; box-shadow: 0 0 0 1px var(--mc-accent); }

/* — Componentes: Kicker (rótulo numerado de seção) — */
.mc-kicker {
  display: inline-block; font-family: var(--mc-font-body); font-size: 12px;
  font-weight: var(--mc-wt-body-bold); letter-spacing: var(--mc-track-eyebrow);
  text-transform: uppercase; color: var(--mc-accent-ink);
}
.mc-kicker[data-ondark="1"] { color: var(--mc-accent); }
.mc-kicker .idx { opacity: 0.85; }

/* — Componentes: Rule (linha cobre) — */
.mc-rule { display: inline-block; height: 1px; width: 54px; background: var(--mc-accent); flex: none; }
.mc-rule-cluster { display: inline-flex; align-items: center; gap: 22px; }
.mc-rule-cluster .lbl {
  font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--mc-accent);
  padding-left: 0.4em; font-family: var(--mc-font-body);
}

/* — Componentes: Tag — */
.mc-tag-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px;
  border: 1px solid color-mix(in srgb, var(--mc-accent) 40%, transparent);
  border-radius: var(--mc-radius-pill); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--mc-accent); font-family: var(--mc-font-body);
}
.mc-tag-pill[data-ondark="1"] { border-color: var(--mc-line-navy); }
.mc-tag-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mc-accent); }

/* — Logo / GlobeMark — */
.mc-logo { display: inline-flex; align-items: center; gap: 20px; }
.mc-logo .wm { font-family: var(--mc-font-display); font-weight: var(--mc-wt-display); letter-spacing: var(--mc-track-wordmark); line-height: 1; }
.mc-logo .cap-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.mc-logo .cap { font-size: 10px; letter-spacing: var(--mc-track-capital); text-transform: uppercase; padding-left: 0.42em; }

/* — Cabeçalho: menu suspenso (hambúrguer) no celular/tablet — */
.mc-burger {
  display: none; margin-left: auto; width: 44px; height: 44px; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: 1px solid var(--mc-line-navy); color: var(--mc-copper); cursor: pointer;
}
.mc-burger span { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
.mc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mc-burger:focus-visible { outline: 2px solid var(--mc-copper); outline-offset: 3px; }

.mc-mnav {
  display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
  background: var(--mc-navy-deep); border-top: 1px solid var(--mc-line-navy); border-bottom: 1px solid var(--mc-line-navy);
  max-height: calc(100vh - 72px); overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mc-mnav.open { display: flex; }
.mc-mnav a {
  padding: 17px 24px; border-bottom: 1px solid rgba(245,240,232,0.07);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mc-on-navy-80);
}
.mc-mnav a:last-child { border-bottom: none; }
.mc-mnav a:hover, .mc-mnav a.active { color: var(--mc-copper); }
.mc-mnav a.cta { color: var(--mc-copper); font-weight: 600; }

@media (max-width: 1180px) {
  .mc-header-nav, .mc-header-cta { display: none !important; }
  .mc-burger { display: flex; }
}
@media (min-width: 1181px) {
  .mc-mnav { display: none !important; }
}