/* ============================================================
   Multidev — Estilos de páginas legais
   (Termo de Uso e Política de Privacidade)
   ============================================================ */

@font-face {
  font-family: 'Big Noodle Titling';
  src: url('../assets/fonts/BigNoodleTitling.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Big Noodle Titling';
  src: url('../assets/fonts/BigNoodleTitling-Oblique.ttf') format('truetype');
  font-weight: 400;
  font-style: oblique;
  font-display: swap;
}

:root {
  --md-blue-500: #54749F;
  --md-blue-600: #466189;
  --md-blue-700: #394e6e;
  --md-blue-800: #2d3e57;
  --md-blue-900: #1f2c3f;
  --md-blue-950: #11192a;
  --md-green-500: #42784E;
  --md-green-600: #356340;
  --md-green-700: #2a4f33;
  --neutral-0:   #ffffff;
  --neutral-50:  #f4f6f8;
  --neutral-100: #e9ecf0;
  --neutral-200: #d4dae1;
  --neutral-300: #b3bcc7;
  --neutral-400: #8b96a4;
  --neutral-500: #6b7685;
  --neutral-600: #525c6a;
  --neutral-700: #3f4855;
  --neutral-800: #2a323d;
  --neutral-900: #161b22;
  --font-sans: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --font-display: 'Big Noodle Titling', 'Impact', sans-serif;
  --font-serif: 'Instrument Serif', 'Times New Roman', serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

html, body {
  min-height: 100vh;
  font-family: var(--font-sans);
  background: var(--neutral-50);
  color: var(--neutral-900);
  -webkit-font-smoothing: antialiased;
}

/* ── Topbar ── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: rgba(31, 44, 63, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.topbar-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 18px clamp(20px, 4vw, 56px);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.topbar .logo { height: 22px; width: auto; display: block; }
.topbar-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
  transition: color 160ms;
  text-decoration: none;
}
.topbar-back:hover { color: rgba(255,255,255,0.8); }
.topbar-back::before { content: "\2190"; font-family: var(--font-sans); }

/* ── Header band ── */
.legal-header {
  background: var(--md-blue-900);
  position: relative; overflow: hidden;
  padding: clamp(72px, 11vw, 132px) clamp(20px, 5vw, 56px) clamp(48px, 7vw, 80px);
  margin-top: 61px;
}
.legal-header::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 8% 95%, color-mix(in oklab, var(--md-green-500) 16%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 45% at 92% 5%, color-mix(in oklab, var(--md-blue-500) 22%, transparent), transparent 65%);
  pointer-events: none;
}
.legal-header-inner {
  position: relative;
  max-width: 820px; margin: 0 auto;
}
.legal-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--md-green-500); margin-bottom: 22px;
  display: flex; align-items: center; gap: 10px;
}
.legal-eyebrow::before {
  content: ""; width: 20px; height: 1px; background: var(--md-green-500);
}
.legal-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 9vw, 76px);
  line-height: 0.98; letter-spacing: 0.01em; font-weight: 400;
  color: #fff; margin-bottom: 20px; max-width: 16ch;
}
.legal-title em {
  font-family: var(--font-serif); font-style: italic;
  color: #b8d4be; font-size: 0.74em; letter-spacing: -0.005em;
}
.legal-subtitle {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.55; color: #7a8fa8;
  max-width: 46ch;
}

/* ── Identification meta grid ── */
.legal-meta {
  position: relative;
  max-width: 820px; margin: 0 auto;
  margin-top: clamp(32px, 5vw, 48px);
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 28px;
  display: grid; gap: 22px 40px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.legal-meta-item .k {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.32); margin-bottom: 5px;
}
.legal-meta-item .v {
  font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.74);
}

/* ── Document body ── */
.legal-doc {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 56px) clamp(64px, 8vw, 96px);
}

.legal-intro {
  font-family: var(--font-serif); font-style: italic;
  font-size: 18px; line-height: 1.6;
  color: var(--neutral-600);
  border-left: 2px solid var(--md-green-500);
  padding-left: 22px;
  margin-bottom: clamp(36px, 5vw, 52px);
}

.legal-doc section {
  padding-top: clamp(30px, 4vw, 44px);
}
.legal-doc section + section {
  border-top: 1px solid var(--neutral-200);
}

.legal-doc h2 {
  font-family: var(--font-sans);
  font-size: clamp(20px, 2.6vw, 25px);
  font-weight: 600; line-height: 1.25;
  color: var(--md-blue-900);
  margin-bottom: 18px;
  display: flex; gap: 12px; align-items: baseline;
}
.legal-doc h2 .num {
  font-family: var(--font-mono);
  font-size: 0.66em; font-weight: 500;
  color: var(--md-green-600);
  flex-shrink: 0;
}

.legal-doc h3 {
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 600;
  color: var(--md-blue-800);
  margin: 26px 0 10px;
}

.legal-doc p {
  font-size: 16px; line-height: 1.75;
  color: var(--neutral-700);
  margin-bottom: 14px;
}
.legal-doc p:last-child { margin-bottom: 0; }

.legal-doc strong { color: var(--neutral-900); font-weight: 600; }

.legal-doc a {
  color: var(--md-blue-600);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--md-blue-600) 35%, transparent);
  transition: color 160ms, border-color 160ms;
}
.legal-doc a:hover {
  color: var(--md-blue-800);
  border-color: var(--md-blue-800);
}

.legal-doc ul {
  list-style: none;
  margin: 4px 0 14px;
  display: grid; gap: 10px;
}
.legal-doc li {
  position: relative;
  padding-left: 22px;
  font-size: 16px; line-height: 1.7;
  color: var(--neutral-700);
}
.legal-doc li::before {
  content: "";
  position: absolute; left: 2px; top: 0.62em;
  width: 6px; height: 6px;
  background: var(--md-green-500);
  border-radius: 1.5px;
}
.legal-doc li strong { color: var(--neutral-900); }

/* ── Callout (destaque — ex.: exclusão de dados) ── */
.legal-callout {
  background: color-mix(in oklab, var(--md-green-500) 7%, var(--neutral-0));
  border: 1px solid color-mix(in oklab, var(--md-green-500) 28%, transparent);
  border-radius: 10px;
  padding: clamp(20px, 3vw, 28px);
  margin: 22px 0 6px;
}
.legal-callout p { color: var(--neutral-700); }
.legal-callout p:first-child { margin-top: 0; }
.legal-callout .callout-label {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--md-green-700);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.legal-callout .callout-label::before {
  content: ""; width: 6px; height: 6px;
  background: var(--md-green-500); border-radius: 50%;
}

/* ── Cross-link to the other document ── */
.legal-crosslink {
  max-width: 820px; margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}
.legal-crosslink-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: 10px;
  padding: 22px clamp(20px, 3vw, 28px);
}
.legal-crosslink-card .cl-text .cl-k {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--neutral-500); margin-bottom: 4px;
}
.legal-crosslink-card .cl-text .cl-v {
  font-size: 16px; font-weight: 600; color: var(--md-blue-900);
}
.legal-crosslink-card a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 4px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  background: var(--md-blue-900); color: #fff;
  text-decoration: none; white-space: nowrap;
  transition: background 180ms;
}
.legal-crosslink-card a:hover { background: var(--md-blue-700); }
.legal-crosslink-card a .arrow { font-family: var(--font-mono); }

/* ── Footer ── */
.legal-footer {
  background: var(--md-blue-950);
  color: rgba(255,255,255,0.55);
  margin-top: clamp(48px, 7vw, 80px);
  padding: clamp(40px, 6vw, 60px) clamp(20px, 5vw, 56px);
}
.legal-footer-inner {
  max-width: 820px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
.legal-footer .ft-name {
  font-family: var(--font-display);
  font-size: 24px; letter-spacing: 0.02em;
  color: #fff;
}
.legal-footer p {
  font-size: 13.5px; line-height: 1.65;
}
.legal-footer a {
  color: rgba(255,255,255,0.78); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.legal-footer a:hover { color: #fff; }
.legal-footer .ft-links {
  display: flex; gap: 20px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.legal-footer .ft-links a { border-bottom: none; color: rgba(255,255,255,0.5); }
.legal-footer .ft-links a:hover { color: #fff; }

/* ── Responsive ── */
@media (max-width: 620px) {
  .legal-meta { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Print ── */
@media print {
  .topbar, .legal-crosslink, .legal-footer { display: none; }
  html, body { background: #fff; }
  .legal-header {
    background: #fff; margin-top: 0; padding: 0 0 24px;
    border-bottom: 2px solid #000;
  }
  .legal-header::before { display: none; }
  .legal-eyebrow, .legal-title, .legal-subtitle,
  .legal-meta-item .k, .legal-meta-item .v { color: #000; }
  .legal-meta { border-color: #999; }
  .legal-doc { padding: 16px 0; }
  .legal-doc a { color: #000; border: none; }
  .legal-doc section { break-inside: avoid; }
}