/* Nexus — Brand guidelines · IDV Nexus v3
   Tokens tirados do inventário (docs/IDENTIDADE-VISUAL.md + CSS do portal e do app). */

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0F0F0F;
  --surface: #0B0B0B;
  --card: #101010;
  --raised: #151515;
  --line: #242424;
  --line-2: #2A2A2A;
  --line-3: #3A3A3A;
  --text: #F5F5F5;
  --copy: #A3A3A3;
  --muted: #969696;
  --faint: #8A8A8A;
  --green: #65FC6C;
  --green-hover: #8AFF90;
  --on-green: #071008;
  --prop: #E3C783;
  --danger: #F28B8B;
  --side: 272px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--green); color: #061007; }
img, video, svg { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; }
code { padding: 1px 6px; border-radius: 4px; background: var(--raised); color: #D8D8D8; font: 500 .82em/1.5 Consolas, ui-monospace, monospace; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.defs path { vector-effect: non-scaling-stroke; }

.skip {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 10px 14px; border-radius: 8px;
  background: var(--text); color: #080808; font-weight: 750; text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

/* ---------- Navegação lateral ---------- */
.side {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--side);
  display: flex; flex-direction: column;
  padding: 34px 22px 26px;
  border-right: 1px solid var(--line);
  background: var(--bg);
  overflow-y: auto;
}
.side__brand { display: inline-block; width: fit-content; padding: 4px 6px; margin-left: -6px; border-radius: 6px; }
.side__brand img { display: block; width: 118px; }
.side__title { margin: 14px 0 34px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 7px 10px; margin: 0 -10px;
  border-radius: 7px;
  color: var(--muted); font-size: 13px; font-weight: 550; line-height: 1.35; text-decoration: none;
  transition: color .16s ease, background-color .16s ease;
}
.toc a span { width: 18px; flex: none; color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--text); background: #121212; }
.toc a.is-active { color: var(--text); background: var(--raised); }
.toc a.is-active span { color: var(--green); }
.side__foot { margin-top: auto; padding-top: 28px; }
.side__foot p { margin: 12px 0 0; color: var(--faint); font-size: 11px; }

/* ---------- Barra compacta (celular) ---------- */
.mbar { display: none; }

/* ---------- Estrutura ---------- */
main { margin-left: var(--side); outline: none; }
.wrap { width: min(100% - 128px, 1080px); margin: 0 auto; }
.sec { position: relative; padding: 128px 0; border-top: 1px solid var(--line); scroll-margin-top: 0; }
.sec:first-child { border-top: 0; }
.sec__head { max-width: 820px; margin-bottom: 64px; }

.eyebrow { margin: 0 0 22px; color: var(--green); font-size: 11px; font-weight: 800; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; }
h2 { margin: 0; font-size: clamp(40px, 4.6vw, 68px); font-weight: 700; line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
h3 { margin: 0; font-size: 22px; font-weight: 650; line-height: 1.2; letter-spacing: -.025em; }
h4 { margin: 0; }
.lead { max-width: 660px; margin: 24px 0 0; color: var(--copy); font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.body { max-width: 680px; margin: 0 0 28px; color: var(--copy); font-size: 16px; line-height: 1.65; }
.note { max-width: 840px; margin: 20px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.note b { color: #D8D8D8; font-weight: 650; }
.note .tag { margin-right: 6px; }
.note--list { padding: 0; list-style: none; }
.note--list li { position: relative; padding-left: 16px; }
.note--list li + li { margin-top: 8px; }
.note--list li::before { content: ""; position: absolute; top: .72em; left: 2px; width: 5px; height: 5px; border-radius: 50%; background: #4A4A4A; }
.kicker { margin: 0 0 16px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.subhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 96px 0 22px; }
.subhead.subhead--in { margin: 0 0 20px; }
.subhead.subhead--sm { margin: 40px 0 18px; }
.subhead--sm h4 { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.subhead.subhead--in.subhead--sm { margin: 28px 0 14px; }
.totop {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 72px;
  color: var(--muted); font-size: 12px; font-weight: 700; text-decoration: none;
  transition: color .16s ease;
}
.totop::before { content: "↑"; content: "↑" / ""; font-size: 14px; }
.totop:hover { color: var(--green); }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; }
.grid--tight { margin-top: 24px; }
.grid--top { align-items: start; }

/* ---------- Selos de status do manual ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10px; font-weight: 800; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; vertical-align: middle;
}
.tag--prop { border: 1px dashed rgba(227, 199, 131, .6); background: rgba(227, 199, 131, .07); color: var(--prop); }
.tag--prop::before { content: ""; width: 6px; height: 6px; border: 1.5px solid currentColor; transform: rotate(45deg); }
.tag--rule { border: 1px solid rgba(101, 252, 108, .35); background: rgba(101, 252, 108, .06); color: var(--green); }
.tag--rule::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tag--derived { border: 1px solid var(--line-3); background: var(--raised); color: #BDBDBD; }
.callout {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px;
  margin-top: 48px; padding: 22px 24px;
  border: 1px dashed rgba(227, 199, 131, .45); border-radius: 12px;
  background: rgba(227, 199, 131, .035);
}
.callout p { flex: 1 1 360px; margin: 0; color: #C9C9C9; font-size: 15px; line-height: 1.6; }
.callout--sm { margin-top: 24px; padding: 16px 18px; }
.callout--sm p { font-size: 13px; }

/* ---------- Botões do manual ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px;
  border: 1px solid transparent; border-radius: 7px;
  font-size: 14px; font-weight: 800; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn small { font-size: 11px; font-weight: 650; opacity: .72; }
.btn--green { border-color: var(--green); background: var(--green); color: var(--on-green); }
.btn--green:hover { border-color: var(--green-hover); background: var(--green-hover); transform: translateY(-1px); }
.btn--ghost { border-color: var(--line-3); color: var(--text); }
.btn--ghost:hover { border-color: var(--green); background: rgba(101, 252, 108, .05); transform: translateY(-1px); }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: 12px; }

/* ---------- 01 Abertura ---------- */
.hero { padding: 120px 0 128px; }
.hero__mark { margin: 48px 0 64px; }
.hero__mark img { display: block; width: min(100%, 640px); }
.display { margin: 0; font-size: clamp(56px, 8.6vw, 136px); font-weight: 700; line-height: .9; letter-spacing: -.055em; }
.hero__lead { max-width: 640px; margin: 32px 0 40px; color: var(--copy); font-size: 20px; line-height: 1.55; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 80px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.meta dt { color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.meta dd { margin: 6px 0 0; font-size: 14px; font-weight: 600; }
.legend { margin-top: 40px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 12px; }
.legend .kicker { margin-bottom: 14px; }
.legend-tags { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 10px 16px; margin: 0; }
.legend-tags dt { justify-self: start; }
.legend-tags dd { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.legend-tags i { font-style: normal; font-family: Consolas, ui-monospace, monospace; font-size: .9em; }

/* ---------- 02 Essência e voz ---------- */
.card { padding: 32px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); }
.card--flat { background: var(--surface); border-color: var(--line); }
.card--quote { display: flex; flex-direction: column; }
.card.card--quote .note { margin-top: auto; padding-top: 22px; }
.card--quote blockquote { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 650; line-height: 1.25; letter-spacing: -.03em; text-wrap: pretty; }
.card .note { margin-top: 22px; font-size: 13px; }
.taglines { margin: 0; padding: 0; list-style: none; }
.taglines li { padding: 14px 0; border-top: 1px solid var(--line); }
.taglines li:first-child { border-top: 0; padding-top: 0; }
.taglines strong { display: block; font-size: 17px; font-weight: 650; letter-spacing: -.015em; line-height: 1.35; }
.taglines span { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; }
.taglines em { display: block; margin-top: 6px; color: var(--faint); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.voice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); }
.voice__item { padding: 28px 26px; background: var(--bg); }
.voice__item h4 { margin: 0 0 18px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.do, .dont { margin: 0 0 10px; padding: 13px 15px; border-radius: 8px; font-size: 15px; line-height: 1.45; }
.do { border-left: 2px solid var(--green); background: rgba(101, 252, 108, .05); color: var(--text); }
.dont { margin: 0; border-left: 2px solid var(--danger); background: var(--raised); color: var(--muted); }
.do > span, .dont > span { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.do > span { color: var(--green); }
.dont > span { color: var(--danger); }
.mini-eyebrow { display: block; margin-bottom: 4px; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 999px; color: #D8D8D8; font-size: 13px; font-weight: 600; }
.chips .chips__caps { font-size: 10px; font-weight: 800; letter-spacing: .16em; }

/* ---------- 03 Logo ---------- */
.bg-dark { background: #0F0F0F; }
.bg-green { background: #65FC6C; }
.boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.board { margin: 0; }
.board--wide { grid-column: 1 / -1; }
.board__art {
  display: grid; place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
}
.board__art--line { outline: 1px solid var(--line); outline-offset: -1px; }
.board__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.board figcaption { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; }
.board figcaption b { font-size: 14px; font-weight: 650; }
.board figcaption span { color: var(--muted); font-size: 14px; }
.boards--square { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; }
.board__art--sq { aspect-ratio: 1 / 1; }

.construct { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.construct__art { margin: 0; }
.construct__art svg, .construct-lk svg, .clear svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.svg-label text { font-family: var(--font); font-size: 2.5px; font-weight: 750; }
.svg-label--lg text { font-size: 24px; }
.svg-label--xl text { font-size: 44px; font-weight: 600; }
.specs { margin: 0; }
.specs > div { padding: 14px 0; border-top: 1px solid var(--line); }
.specs dt { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.specs dt i {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; margin-right: 8px;
  border: 1px solid var(--line-3); border-radius: 50%;
  background: var(--raised); color: #D8D8D8;
  font-size: 10px; font-style: normal; letter-spacing: 0;
}
.specs dd { margin: 4px 0 0; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.specs dd small { display: block; color: var(--muted); font-size: 13px; font-weight: 450; }
.construct-lk { margin: 0; }
.specs--row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin-top: 24px; }
.clear { margin: 0; }

.minsize { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.minsize__row { display: flex; align-items: center; gap: 22px; padding: 24px; }
.minsize__row + .minsize__row { border-top: 1px solid var(--line); }
.minsize__row img { display: block; flex: none; }
.minsize__row p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.minsize__row p b { color: var(--text); }

.misuse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; margin: 0; padding: 0; list-style: none; }
.versions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.versions figure { margin: 0; }
.versions__art { display: grid; place-items: center; height: 150px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.versions__art img { display: block; height: auto; }
.versions figcaption { margin-top: 12px; }
.versions figcaption b { display: block; font-size: 14px; font-weight: 650; }
.versions figcaption span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.prodnote { margin-top: 48px; border: 1px solid var(--line); border-radius: 12px; }
.prodnote summary { padding: 16px 20px; color: var(--muted); font-size: 13px; font-weight: 650; cursor: pointer; }
.prodnote summary:hover { color: var(--text); }
.prodnote[open] summary { border-bottom: 1px solid var(--line); }
.prodnote__body { padding: 4px 20px 18px; }
.prodnote__body p { max-width: 840px; margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.misuse li p { margin: 12px 0 0; color: #C9C9C9; font-size: 13px; line-height: 1.45; }
.misuse__art {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px;
  background: #0F0F0F;
  container-type: inline-size;
}
.misuse__art--green { background: #65FC6C; border-color: #65FC6C; }
.misuse__art::after {
  content: "";
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 7l8 8M15 7l-8 8' stroke='%231A0A0A' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.lk { width: 62%; height: auto; overflow: visible; fill: #FFFFFF; }
.lk--stretch { transform: scale(1.38, .72); }
.lk--rotate { transform: rotate(-14deg); }
.lk--blue { fill: #3B82F6; }
.lk--shadow { filter: drop-shadow(6px 8px 3px rgba(255, 255, 255, .35)); }
.lk--outline { fill: none; stroke: #FFFFFF; stroke-width: 1.6px; }
.fake-lockup { display: flex; align-items: center; gap: .32em; font-size: 13.5cqw; line-height: 1; }
.fake-lockup svg { width: 1.08em; height: 1em; fill: #FFFFFF; }
.fake-lockup span { color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 1em; font-weight: 700; letter-spacing: -.01em; }
.stacked { display: flex; flex-direction: column; align-items: center; gap: 3cqw; }
.stacked svg { fill: #FFFFFF; }
.stacked svg:first-child { width: 20cqw; height: auto; }
.stacked svg:last-child { width: 36cqw; height: auto; }

/* ---------- 04 Símbolo e ícones ---------- */
.optical { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.optical figure { margin: 0; }
.optical__big { display: grid; place-items: center; padding: 36px; border: 1px solid var(--line); border-radius: 12px; background: #1C1C1C; }
.optical__big img { display: block; width: 192px; }
.optical__big .px { image-rendering: pixelated; }
.optical__real { display: flex; align-items: flex-end; gap: 12px; height: 76px; margin: 14px 0 10px; color: var(--faint); font-size: 11px; }
.optical__px { display: grid; place-items: center; width: 76px; height: 76px; flex: none; border-radius: 8px; background: #1C1C1C; }
.optical__px img { display: block; max-width: none; }
.optical figcaption b { display: block; font-size: 15px; font-weight: 650; }
.optical figcaption span { color: var(--muted); font-size: 13px; }

.avatars { display: flex; flex-wrap: wrap; gap: 32px; }
.avatars figure { margin: 0; text-align: center; }
.avatars img { display: block; width: 140px; margin: 0 auto; padding: 14px; border-radius: 16px; background: #1C1C1C; }
.avatars figcaption { margin-top: 12px; color: var(--muted); font-size: 12px; }
.avatars--sym span { display: grid; place-items: center; width: 140px; height: 140px; margin: 0 auto; border-radius: 12px; }
.avatars--sym span.bg-dark { box-shadow: inset 0 0 0 1px var(--line-3); }
.avatars--sym img { width: 72px; padding: 0; border-radius: 0; background: none; }

.bgswitch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.bgswitch span { margin-right: 6px; color: var(--muted); font-size: 12px; }
.bgswitch button {
  padding: 6px 12px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: transparent; color: #BDBDBD;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.bgswitch button:hover { border-color: var(--line-3); color: var(--text); }
.bgswitch button[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: #080808; }
.stage {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: center;
  padding: 48px;
  border: 1px solid var(--line); border-radius: 14px;
  background: #1E1E1E;
  transition: background-color .2s ease;
}
.stage[data-bg="mid"] { background: #6B6B6B; }
.stage[data-bg="light"] { background: #ECECEC; }
.stage figure { margin: 0; }
.stage figcaption { margin-top: 18px; color: var(--text); font-size: 13px; }
.stage figcaption b { display: block; font-size: 14px; font-weight: 650; }
.stage figcaption span { color: #BDBDBD; }
.stage[data-bg="mid"] figcaption span, .stage[data-bg="mid"] .ico-row i { color: #F2F2F2; }
.stage[data-bg="light"] figcaption, .stage[data-bg="light"] figcaption b { color: #111111; }
.stage[data-bg="light"] figcaption span, .stage[data-bg="light"] .ico-row i { color: #444444; }
.stage__mac { max-width: 220px; }
.stage__mac img { display: block; width: 192px; }
.ico-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px 20px; }
.ico-grp { display: flex; align-items: flex-end; gap: 20px; }
.ico-row span { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ico-row img { display: block; max-width: none; }
.ico-row i { color: var(--faint); font-size: 10px; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }

.menubars { display: grid; gap: 10px; }
.menubar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; height: 30px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.menubar--light { background: #E9E9EB; color: #1D1D1F; }
.menubar--dark { background: #1F1F21; color: #F5F5F5; border: 1px solid var(--line); }
.menubar img { display: block; width: 18px; }
.menubar .invert { filter: invert(1); }
.menubar__dots { width: 54px; height: 6px; margin-right: auto; border-radius: 3px; background: currentColor; opacity: .22; }
.browser { overflow: hidden; border: 1px solid var(--line-2); border-radius: 10px; background: #1B1B1B; }
.browser__tab { display: inline-flex; align-items: center; gap: 9px; max-width: calc(100% - 16px); margin: 8px 0 0 8px; padding: 9px 14px; border-radius: 8px 8px 0 0; background: #2B2B2B; color: #E8E8E8; font-size: 12px; }
.browser__tab img { display: block; flex: none; }
.browser__tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser__tab i { margin-left: 14px; color: var(--faint); font-style: normal; }
.browser__bar { padding: 8px 10px 10px; background: #2B2B2B; }
.browser__bar span { display: block; padding: 6px 14px; border-radius: 999px; background: #1A1A1A; color: #BDBDBD; font-size: 12px; }

/* ---------- 05 Cores ---------- */
.c-0F0F0F { background: #0F0F0F; } .c-0B0B0B { background: #0B0B0B; } .c-101010 { background: #101010; }
.c-FFFFFF { background: #FFFFFF; } .c-F5F5F5 { background: #F5F5F5; } .c-000000 { background: #000000; }
.c-65FC6C { background: #65FC6C; } .c-242424 { background: #242424; } .c-2A2A2A { background: #2A2A2A; }
.c-969696 { background: #969696; } .c-676767 { background: #676767; } .c-102817 { background: #102817; }
.c-F28B8B { background: #F28B8B; } .c-071008 { background: #071008; } .c-8AFF90 { background: #8AFF90; }
.c-E3C783 { background: #E3C783; } .c-151515 { background: #151515; } .c-A3A3A3 { background: #A3A3A3; }
.c-101110 { background: #101110; } .c-FF7474 { background: #FF7474; } .c-E0A030 { background: #E0A030; }
.swatches { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.swatches--core { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.swatches--core .sw:first-child { grid-column: span 2; }
.swatches--small { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sw { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.sw__chip { display: block; height: 150px; border-bottom: 1px solid var(--line); }
.sw__chip--dark { box-shadow: inset 0 0 0 12px #1E1E1E, inset 0 0 0 13px #2E2E2E; }
.swatches--core .sw:first-child .sw__chip { height: 150px; }
.swatches--small .sw__chip { height: 76px; }
.sw__info { padding: 14px 16px 16px; }
.sw__info b { display: block; color: #D8D8D8; font-size: 13px; font-weight: 650; line-height: 1.35; }
.sw__info small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
.hex {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 6px 0 2px; padding: 0;
  border: 0; background: none; color: var(--text);
  font-size: 16px; font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums;
  cursor: copy;
}
.hex::after { content: "Copiar"; content: "Copiar" / ""; color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transition: opacity .16s ease; }
.hex:hover, .hex:focus-visible { color: var(--green); }
.hex:hover::after, .hex:focus-visible::after { opacity: 1; }
.hex.is-copied::after { content: "Copiado"; content: "Copiado" / ""; color: var(--green); opacity: 1; }

.contrast { width: 100%; border-collapse: collapse; font-size: 14px; }
.contrast th { padding: 0 12px 10px 0; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-align: left; text-transform: uppercase; }
.contrast td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); color: #D8D8D8; vertical-align: middle; }
.contrast td:nth-child(2) { font-weight: 650; font-variant-numeric: tabular-nums; }
.pair { display: inline-grid; place-items: center; width: 34px; height: 26px; margin-right: 12px; border-radius: 5px; font-size: 13px; font-weight: 700; vertical-align: middle; }
.p-ffffff-0f0f0f { background: #0F0F0F; color: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line-3); }
.p-f5f5f5-0f0f0f { background: #0F0F0F; color: #F5F5F5; box-shadow: inset 0 0 0 1px var(--line-3); }
.p-000000-65fc6c { background: #65FC6C; color: #000000; }
.p-071008-65fc6c { background: #65FC6C; color: #071008; }
.p-65fc6c-0f0f0f { background: #0F0F0F; color: #65FC6C; box-shadow: inset 0 0 0 1px var(--line-3); }
.p-a3a3a3-101110 { background: #101110; color: #A3A3A3; box-shadow: inset 0 0 0 1px var(--line-3); }
.p-969696-0f0f0f { background: #0F0F0F; color: #969696; box-shadow: inset 0 0 0 1px var(--line-3); }
.p-676767-0f0f0f { background: #0F0F0F; color: #676767; box-shadow: inset 0 0 0 1px var(--line-3); }
.p-ffffff-65fc6c { background: #65FC6C; color: #FFFFFF; }
.p-071008-8aff90 { background: #8AFF90; color: #071008; }
.p-e3c783-0f0f0f { background: #0F0F0F; color: #E3C783; box-shadow: inset 0 0 0 1px var(--line-3); }
.p-ffb0b0-241414 { background: #241414; color: #FFB0B0; }
.p-f28b8b-0f0f0f { background: #0F0F0F; color: #F28B8B; box-shadow: inset 0 0 0 1px var(--line-3); }
.p-676767-101110 { background: #101110; color: #676767; box-shadow: inset 0 0 0 1px var(--line-3); }
.p-555555-252525 { background: #252525; color: #555555; }
.pair__txt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.contrast td.contrast__use, .contrast th.contrast__use { color: var(--muted); }
.contrast td.contrast__use { font-size: 13px; }
.lvl { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.lvl--aaa { background: rgba(101, 252, 108, .1); color: var(--green); }
.lvl--aa { border: 1px solid var(--line-3); color: #D8D8D8; }
.lvl--large { border: 1px dashed rgba(227, 199, 131, .6); color: var(--prop); }
.lvl--fail { background: rgba(242, 139, 139, .1); color: var(--danger); }

.greenuse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: center; }
.greenuse__demo { display: grid; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.greenuse__line { display: block; height: 10px; width: 80%; border-radius: 5px; background: #2A2A2A; }
.greenuse__line--short { width: 52%; background: #1E1E1E; }
.greenuse__btn { justify-self: start; margin-top: 10px; padding: 10px 16px; border-radius: 6px; background: #65FC6C; color: #071008; font-size: 13px; font-weight: 800; }

/* ---------- 06 Tipografia ---------- */
.type-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 64px; align-items: center; padding: 48px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.type-hero__aa { margin: 0; font-size: clamp(140px, 17vw, 260px); font-weight: 700; line-height: .8; letter-spacing: -.06em; }
.type-hero__name { margin: 0; font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.045em; }
.type-hero__meta { margin: 10px 0 22px; color: var(--muted); font-size: 14px; }
.type-hero__chars { margin: 0; color: #D8D8D8; font-size: 21px; font-weight: 500; line-height: 1.45; letter-spacing: -.01em; overflow-wrap: anywhere; }
.scale { border-bottom: 1px solid var(--line); }
.scale__row { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: baseline; padding: 28px 0; border-top: 1px solid var(--line); }
.scale__spec b { display: block; font-size: 14px; font-weight: 650; }
.scale__spec span { display: block; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.scale__row p { margin: 0; overflow-wrap: anywhere; }
.t-display { font-size: clamp(58px, 6.4vw, 104px); font-weight: 700; line-height: .91; letter-spacing: -.058em; }
.t-h1 { font-size: clamp(44px, 5.2vw, 74px); font-weight: 700; line-height: 1; letter-spacing: -.055em; }
.t-h2 { font-size: clamp(30px, 3vw, 42px); font-weight: 700; line-height: 1.05; letter-spacing: -.05em; }
.t-h3 { font-size: 18px; font-weight: 650; letter-spacing: -.025em; }
.t-body { max-width: 560px; color: var(--copy); font-size: 16px; line-height: 1.65; }
.t-small { color: var(--muted); font-size: 13px; font-weight: 500; }
.t-label { color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.weights { margin: 0; padding: 0; list-style: none; }
.weights li { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 21px; letter-spacing: -.02em; line-height: 1.3; }
.weights li span { width: 40px; flex: none; color: var(--faint); font-size: 12px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.w400 { font-weight: 400; } .w500 { font-weight: 500; } .w650 { font-weight: 650; }
.w700 { font-weight: 700; } .w750 { font-weight: 750; } .w800 { font-weight: 800; }
.w600 { font-weight: 600; } .w850 { font-weight: 850; } .w900 { font-weight: 900; }
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vs > div { position: relative; padding: 26px 22px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.vs__ok { border-color: rgba(101, 252, 108, .35) !important; }
.vs__no { border-color: rgba(242, 139, 139, .35) !important; }
.vs__no::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 7l8 8M15 7l-8 8' stroke='%231A0A0A' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.vs img { display: block; width: 100%; max-width: 200px; height: 50px; object-fit: contain; object-position: left center; }
.vs__typed { display: block; height: 50px; color: #FFFFFF; font-size: 52px; font-weight: 400; line-height: 50px; letter-spacing: -.01em; }
.vs p { margin: 16px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.vs p b { color: var(--text); }
.cond { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.cond span { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 6px; border: 1px solid rgba(101, 252, 108, .55); border-radius: 999px; color: var(--green); font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: -.02em; box-shadow: 0 0 10px #65FC6C55; }
.host { margin: 0 0 4px; padding: 10px 12px; border-radius: 6px; background: #2B2B2B; color: #F2F2F2; font: 12px/1.4 Arial, Helvetica, sans-serif; }
.mono { margin: 0 0 4px; padding: 10px 12px; border-radius: 6px; background: #050505; color: #BDBDBD; font: 11px/1.4 Consolas, ui-monospace, monospace; }

/* ---------- 07 Iconografia ---------- */
.panel { padding: 28px; border: 1px solid var(--line-3); border-radius: 12px; background: #2B2B2B; }
.toolbar { display: flex; flex-wrap: wrap; gap: 20px 14px; margin: 0; padding: 0; list-style: none; }
.toolbar li { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 64px; }
.toolbar b, .family li { color: #E6E6E6; font-size: 12px; font-weight: 600; }
.tool {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: none;
  border-radius: 7px;
  background: #424242; color: #FFFFFF;
  transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.tool svg { width: 36px; height: 36px; filter: drop-shadow(0 0 .4px rgba(255, 255, 255, .72)); }
.tool--down svg { transform: rotate(180deg); }
.tool:hover, .tool.is-hover { background: #505050; box-shadow: 0 3px 9px rgba(0, 0, 0, .2); transform: translateY(-1px); }
.tool.is-pressed { background: #383838; box-shadow: none; transform: none; }
.tool.is-disabled { color: rgba(255, 255, 255, .4); }
.tool.is-disabled:hover { background: #424242; box-shadow: none; transform: none; }
.tool.is-future, .tool.is-future:hover { background: #252525; color: #555555; box-shadow: none; transform: none; }
.family { display: flex; flex-wrap: wrap; gap: 22px; margin: 0; padding: 22px; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: #2B2B2B; }
.family li { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 64px; }
.uiico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 7px; background: #424242; }
.uiico img { display: block; width: 24px; filter: invert(1); }
.panel--states { display: flex; flex-wrap: wrap; gap: 28px 40px; }
.panel--states figure { display: flex; flex-direction: column; align-items: center; margin: 0; text-align: center; }
.panel--states figcaption { margin-top: 12px; color: #E6E6E6; font-size: 12px; font-weight: 650; }
.panel--states small { display: block; color: #C4C4C4; font-size: 11px; font-weight: 500; }

.appstates { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.as { display: flex; align-items: center; gap: 10px; padding: 12px 15px; line-height: 1.4; border: 1px solid #262626; border-radius: 10px; background: #0A0A0A; color: #B7B7B7; font-size: 13px; }
.as b { margin-right: 6px; color: var(--text); font-weight: 650; }
.as > i { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.as--on > i { background: #65FC6C; box-shadow: 0 0 12px rgba(101, 252, 108, .55); }
.as--pending { color: #8A8A8A; }
.as--pending > i { background: #555555; opacity: .48; }
.as--ok { border-color: rgba(101, 252, 108, .38); background: #101A11; }
.as--ok svg { width: 16px; height: 16px; color: #65FC6C; }
.as--err, .as--err b { color: #FF7474; }
.as--warn, .as--warn b { color: #E0A030; }

.badges { border-bottom: 1px solid var(--line); }
.badges__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.badges__row p { width: 200px; margin: 0; color: var(--muted); font-size: 13px; }
.bd { display: inline-grid; place-items: center; flex: none; font-weight: 800; line-height: 1; }
.bd--desk { width: 32px; height: 32px; border-radius: 8px; font-size: 11px; }
.bd--tab { width: 30px; height: 30px; border-radius: 6px; font: 700 12px Arial, Helvetica, sans-serif; }
.bd--fig { width: 38px; height: 38px; border-radius: 7px; font-size: 18px; font-weight: 700; letter-spacing: -.5px; }
.bd-fig { background: #F24E1E; color: #FFFFFF; }
.bd-ai { background: #FF9A00; color: #241500; }
.bd-ae { background: #9999FF; color: #17152D; }
.bd-ps { background: #31A8FF; color: #061C2B; }
.bd-ai2 { background: #FF9A00; color: #211300; }
.bd-fg2 { background: #A259FF; color: #FFFFFF; }
.bd-ps2 { background: #001E36; color: #31A8FF; }
.bd-off { background: #3B3B3B; color: #909090; opacity: .62; }
.bd-ae3 { background: #09005F; color: #A99CFF; }
.bd-ai4 { background: #341D00; color: #FF9A00; }
.bd-ae4 { background: #211354; color: #B9A6FF; box-shadow: inset 0 0 0 1px #3A3354; }

/* ---------- 08 Componentes (valores do portal) ---------- */
.comp { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 36px 0; border-top: 1px solid var(--line); }
.comp:last-of-type { border-bottom: 0; }
.comp--col { display: block; padding: 36px 0 0; }
.states { display: flex; flex-wrap: wrap; gap: 22px 24px; }
.states figure { margin: 0; }
.states figcaption { margin-top: 10px; color: var(--faint); font-size: 11px; font-weight: 600; }
.comp__spec { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 18px; align-content: start; margin: 0; }
.comp__spec dt { color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.comp__spec dd { margin: 2px 0 0; color: #D8D8D8; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.comp__spec.comp__spec--inline { grid-template-columns: 1fr; margin-top: 22px; }
h3.kicker, h4.kicker { line-height: 1.4; }
.hint-touch { display: none; }
@media (hover: none) { .hint-mouse { display: none; } .hint-touch { display: inline; } }
.layout-demo { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; height: 120px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); }
.layout-demo__m { display: grid; place-items: center; background: repeating-linear-gradient(45deg, rgba(227, 199, 131, .08) 0 6px, transparent 6px 12px); color: var(--prop); font-size: 11px; font-weight: 800; }
.layout-demo__c { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 16px; border-inline: 1px dashed rgba(227, 199, 131, .45); }
.layout-demo__c span { position: absolute; top: 10px; left: 16px; color: var(--muted); font-size: 12px; font-weight: 650; }
.layout-demo__c i { margin-top: 26px; border-radius: 6px; background: #151515; }

.p-cta {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 16px;
  border: 1px solid #65FC6C; border-radius: 6px;
  background: #65FC6C; color: #071008;
  font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease;
}
.p-cta:hover, .p-cta.is-hover { border-color: #8AFF90; background: #8AFF90; }
.p-cta:focus-visible, .p-cta.is-focus { outline: 2px solid #FFFFFF; outline-offset: 4px; }
.p-cta[aria-disabled="true"], .p-cta.is-disabled, .p-cta.is-disabled:hover { border-color: #65FC6C; background: #65FC6C; opacity: .55; cursor: not-allowed; }
.p-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 17px;
  border: 1px solid #F5F5F5; border-radius: 8px;
  background: #F5F5F5; color: #080808;
  font-size: 14px; font-weight: 750; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.p-btn:hover, .p-btn.is-hover { border-color: #FFFFFF; background: #FFFFFF; color: #000000; transform: translateY(-1px); }
.p-btn:focus-visible, .p-btn.is-focus { outline: 2px solid #FFFFFF; outline-offset: 4px; }
.p-btn:disabled { opacity: .55; cursor: wait; transform: none; }
.p-btn--full { width: 100%; margin-top: 18px; }
.p-sec {
  display: inline-flex; align-items: center;
  min-height: 50px; padding: 0 17px;
  border: 1px solid #3A3A37; border-radius: 7px;
  background: transparent; color: #F4F4F1;
  font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease;
}
.p-sec:hover, .p-sec.is-hover { border-color: #65FC6C; background: rgba(101, 252, 108, .05); color: #FFFFFF; transform: translateY(-1px); }
.p-sec:focus-visible, .p-sec.is-focus { outline: 2px solid #FFFFFF; outline-offset: 4px; }
.p-sec.is-disabled, .p-sec.is-disabled:hover { border-color: #3A3A37; background: transparent; opacity: .45; transform: none; cursor: not-allowed; }
.p-card { padding: 32px; border: 1px solid #2A2A2A; border-radius: 14px; background: #101010; }
.p-eyebrow { margin: 0; color: #65FC6C; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.p-card__title { margin: 6px 0 4px; color: var(--text); font-size: 30px; font-weight: 700; letter-spacing: -.05em; line-height: 1.15; }
.p-label { display: block; margin: 17px 0; color: #D8D8D8; font-size: 12px; font-weight: 700; }
.p-input {
  display: block; width: 100%; margin-top: 7px; padding: 12px 13px;
  border: 1px solid #3A3A3A; border-radius: 8px; outline: none;
  background: #0B0B0B; color: #F5F5F5;
  font: inherit; font-size: 14px; font-weight: 450;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.p-input::placeholder { color: #5E5E5E; }
.p-input:focus { border-color: #65FC6C; box-shadow: 0 0 0 2px #65FC6C25; }
.p-input:disabled { color: #777777; background: #171717; cursor: not-allowed; }
.p-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; }
.p-soon { padding: 4px 6px; border: 1px solid #3C3C3C; border-radius: 5px; background: #1B1B1B; color: #777777; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.p-reco { color: #65FC6C; font-size: 9px; font-weight: 850; letter-spacing: .11em; }
.p-kicker { display: inline-flex; align-items: center; gap: 10px; color: #8C8C87; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.p-kicker i { width: 18px; height: 1px; background: #65FC6C; }
.p-notice, .p-error { margin: 12px 0; padding: 11px 12px; border: 1px solid; border-radius: 8px; font-size: 12px; line-height: 1.45; }
.p-notice { border-color: #65FC6C; background: #65FC6C12; color: #FFFFFF; }
.p-error { border-color: #5B3030; background: #241414; color: #FFB0B0; }

/* ---------- 09 Movimento ---------- */
.videos { display: grid; gap: 24px 20px; }
.videos--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.videos--tall { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; }
.videos figure { margin: 0; }
.vid { position: relative; overflow: hidden; border-radius: 10px; background: #000000; outline: 1px solid var(--line); outline-offset: -1px; }
.videos video { display: block; width: 100%; height: auto; background: #000000; object-fit: cover; }
.vid__play {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: transparent; color: transparent; font-size: 0; cursor: pointer;
}
.vid__play::before {
  content: ""; position: absolute; left: 14px; bottom: 14px; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(15, 15, 15, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.8v10.4c0 .8.9 1.3 1.6.8l8-5.2c.6-.4.6-1.2 0-1.6l-8-5.2C9.9 5.5 9 6 9 6.8z' fill='%23FFFFFF'/%3E%3C/svg%3E") center / 26px no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
  transition: transform .16s ease, background-color .16s ease;
}
.vid__play:hover::before { transform: scale(1.06); background-color: rgba(15, 15, 15, .86); }
.vid__play:focus-visible { outline-offset: -4px; border-radius: 10px; }
.vid.is-playing .vid__play { display: none; }
.videos--tall .vid__play::before { left: 12px; bottom: 12px; width: 42px; height: 42px; background-size: 20px; }
.videos--wide video { aspect-ratio: 16 / 9; }
.videos--tall video { aspect-ratio: 9 / 16; }
.videos figcaption { margin-top: 10px; }
.videos figcaption b { display: block; font-size: 13px; font-weight: 650; }
.videos figcaption span { display: block; color: var(--muted); font-size: 12px; }
.videos figcaption a { display: inline-flex; align-items: center; min-height: 32px; margin-top: 2px; color: #D8D8D8; font-size: 12px; font-weight: 700; text-decoration: none; }
.videos figcaption a::before { content: "↓"; content: "↓" / ""; margin-right: 6px; color: var(--faint); }
.videos figcaption a:hover { color: var(--green); }

.tlbar { position: relative; height: 44px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.tlbar span { position: absolute; top: 8px; bottom: 8px; border-radius: 5px; background: rgba(101, 252, 108, .18); box-shadow: inset 0 0 0 1px rgba(101, 252, 108, .45); }
.tlbar .s-a { left: 0; width: 10%; } .tlbar .s-b { left: 10%; width: 5%; } .tlbar .s-c { left: 17.5%; width: 2.5%; }
.tlbar .s-d { left: 30%; width: 7.5%; } .tlbar .s-e { left: 40%; width: 10%; }
.tlbar .s-f { left: 50%; width: 50%; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-3); }
.tlscale { display: flex; justify-content: space-between; margin: 0 0 22px; color: var(--faint); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.tl { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--line); }
.tl b { color: var(--green); font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.tl span { color: #C9C9C9; font-size: 14px; line-height: 1.45; }
.tl--f b { color: var(--muted); }

.easings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ez {
  position: relative; display: block;
  padding: 20px 20px 22px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text);
  text-align: left; cursor: default;
}
.ez { cursor: pointer; }
.ez:hover { border-color: var(--line-3); }
.ez b { display: block; font-size: 15px; font-weight: 650; }
.ez small { display: block; margin-top: 2px; color: #C9C9C9; font-size: 12px; font-variant-numeric: tabular-nums; }
.ez em { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; font-style: normal; }
.ez__dot { position: relative; left: 0; display: block; width: 14px; height: 14px; margin-bottom: 18px; border-radius: 50%; background: var(--green); }
.ez--micro .ez__dot { transition: left .18s ease; }
.ez--enter .ez__dot { transition: left .28s cubic-bezier(.2, .8, .2, 1); }
.ez--brick .ez__dot { transition: left .28s cubic-bezier(.22, 1, .36, 1); }
.ez--fill .ez__dot { transition: left .44s cubic-bezier(.2, .78, .2, 1); }
.ez--pop .ez__dot { transition: transform .28s cubic-bezier(.2, 1.4, .4, 1); }
.ez--micro:hover .ez__dot, .ez--micro:focus-visible .ez__dot,
.ez--enter:hover .ez__dot, .ez--enter:focus-visible .ez__dot,
.ez--brick:hover .ez__dot, .ez--brick:focus-visible .ez__dot,
.ez--fill:hover .ez__dot, .ez--fill:focus-visible .ez__dot,
.ez.is-play .ez__dot { left: calc(100% - 14px); }
.ez--pop:hover .ez__dot, .ez--pop:focus-visible .ez__dot, .ez--pop.is-play .ez__dot { left: 0; transform: scale(1.7); }
.ez--shake .ez__dot { background: #FF7474; }
.ez--shake:hover .ez__dot, .ez--shake:focus-visible .ez__dot { animation: shake .38s ease; }
.ez--shake.is-play .ez__dot { left: 0; animation: shake .38s ease; }
@keyframes shake { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 88% { transform: translateX(2px); } 100% { transform: none; } }

/* ---------- 10 Aplicações ---------- */
.mail { overflow: hidden; border-radius: 14px; background: #1F1F1F; font-family: Inter, "Segoe UI", Arial, sans-serif; }
.mail__gutter { padding: 48px 20px; }
.mail__shell { max-width: 600px; margin: 0 auto; border: 1px solid #262926; border-radius: 16px; background: #101110; box-shadow: 0 18px 48px rgba(16, 17, 16, .16); }
.mail__head { padding: 20px 24px 0; }
.mail__head img { display: block; width: 150px; height: 48px; }
.mail__rule { height: 1px; margin: 18px 8px 0; background: #2A2A2A; }
.mail__content { padding: 38px 32px 32px; }
.mail__eyebrow { margin: 0 0 12px; color: #65FC6C; font-size: 11px; font-weight: 800; line-height: 16px; letter-spacing: 1.8px; }
.mail__title { margin: 0 0 16px; color: #F5F5F5; font-size: 32px; font-weight: 750; line-height: 38px; letter-spacing: -1.2px; }
.mail__body { margin: 0; color: #A3A3A3; font-size: 16px; line-height: 26px; }
.mail__btn { display: inline-block; margin-top: 28px; padding: 14px 22px; border-radius: 8px; background: #65FC6C; color: #071008; font-size: 14px; font-weight: 800; line-height: 18px; }
.mail__fine { margin: 26px 0 0; color: #676767; font-size: 11px; line-height: 17px; }
.mail__fine b { color: #8F8F8F; font-weight: 600; }
.mail__foot { padding: 22px 32px 28px; border-top: 1px solid #2A2A2A; color: #676767; font-size: 11px; line-height: 18px; }
.mail__foot p { margin: 0 0 8px; }
.mail__foot p:last-child { margin: 0; }
.mail__foot u { color: #969696; }
.mail__foot i { padding: 0 8px; color: #3A3A3A; font-style: normal; }

.nsis { margin: 0; }
.nsis__win { overflow: hidden; border: 1px solid #8A8A8A; border-radius: 6px; background: #F0F0F0; color: #000000; font-family: "Segoe UI", Tahoma, Arial, sans-serif; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); container-type: inline-size; }
.nsis__title { padding: 1.6cqw 2.4cqw; border-bottom: 1px solid #D9D9D9; background: #FFFFFF; font-size: max(11px, 2.5cqw); }
.nsis__welcome { display: flex; aspect-ratio: 497 / 314; background: #FFFFFF; }
.nsis__welcome img { display: block; width: 33%; height: 100%; object-fit: cover; }
.nsis__text { padding: 5cqw 4.5cqw; }
.nsis__text b { display: block; margin-bottom: 2.4cqw; font-size: max(13px, 3.6cqw); line-height: 1.2; }
.nsis__text span { font-size: max(11px, 2.5cqw); line-height: 1.45; }
.nsis__inner { aspect-ratio: 497 / 314; background: #F0F0F0; }
.nsis__head { display: flex; align-items: stretch; justify-content: space-between; border-bottom: 1px solid #D9D9D9; background: #FFFFFF; }
.nsis__head div { padding: 2.4cqw 3cqw; }
.nsis__head b { display: block; font-size: max(12px, 2.7cqw); }
.nsis__head span { color: #444444; font-size: max(11px, 2.4cqw); }
.nsis__head img { display: block; width: 30.2%; height: auto; align-self: center; }
.nsis__field { margin: 6cqw 4cqw; }
.nsis__field span { display: block; padding: 1.4cqw 2cqw; border: 1px solid #7A7A7A; background: #FFFFFF; font-size: max(11px, 2.5cqw); }
.nsis__btns { display: flex; justify-content: flex-end; gap: 1.6cqw; padding: 2.6cqw 3cqw; border-top: 1px solid #DCDCDC; }
.nsis__btns span { padding: 1cqw 3.4cqw; border: 1px solid #ADADAD; border-radius: 3px; background: #E1E1E1; font-size: max(11px, 2.5cqw); }
.nsis figcaption, .og figcaption, .shot figcaption, .desk figcaption { margin-top: 14px; color: var(--muted); font-size: 13px; }
.og, .shot, .desk { margin: 0; }
.og figcaption b, .shot figcaption b, .desk figcaption b { display: block; color: var(--text); font-size: 14px; font-weight: 650; }
.og img { display: block; width: 100%; border: 1px solid var(--line); border-radius: 10px; }
.shot img { display: block; width: 100%; max-width: 398px; border-radius: 12px; }

.desk__win { overflow: hidden; border: 1px solid #2B2B2B; border-radius: 10px; background: radial-gradient(circle at 100% -10%, rgba(255, 255, 255, .055), transparent 32%), linear-gradient(155deg, #0F0F0F 0%, #080808 48%, #030303 100%); }
.desk__titlebar { display: flex; justify-content: flex-end; height: 34px; border-bottom: 1px solid #2B2B2B; background: #161616; }
.desk__titlebar i { display: grid; place-items: center; width: 46px; color: #AAAAAA; font-size: 16px; font-style: normal; }
.desk__top { display: flex; align-items: center; gap: 10px; padding: 18px 20px; }
.desk__top img { display: block; }
.desk__wm { width: auto; height: 16px; }
.desk__ver { margin-left: auto; color: #8A8A8A; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.desk__card { margin: 0 20px; padding: 18px; border: 1px solid #262626; border-radius: 14px; background: linear-gradient(145deg, rgba(255, 255, 255, .018), transparent 42%), #0A0A0A; box-shadow: 0 18px 48px rgba(0, 0, 0, .28); }
.desk__eyebrow { margin: 0 0 10px; color: #8B8B8B; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.desk__card ul { margin: 0; padding: 0; list-style: none; }
.desk__card li { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: #F5F5F5; font-size: 13px; font-weight: 600; }
.desk__card li + li { border-top: 1px solid #1A1A1A; }
.desk__card li i { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; }
.desk__card li i.on { background: #65FC6C; box-shadow: 0 0 12px rgba(101, 252, 108, .55); }
.desk__card li i.off { background: #555555; }
.desk__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px 20px 22px; }
.desk__primary { padding: 11px 14px; border: 1px solid #FFFFFF; border-radius: 9px; background: #FFFFFF; color: #050505; font-size: 13px; font-weight: 750; }
.desk__ghost { padding: 8px 10px; border: 1px solid #343434; border-radius: 8px; color: #D7D7D7; font-size: 13px; }

/* ---------- 11 Terceiros ---------- */
.names { width: 100%; border-collapse: collapse; font-size: 14px; }
.names th { padding: 0 0 10px; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-align: left; text-transform: uppercase; }
.names th:first-child { color: var(--green); }
.names th:last-child { color: var(--danger); }
.names td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.names td:first-child { color: var(--text); font-weight: 600; }
.names td:last-child { color: var(--muted); }
.cobrand { display: grid; gap: 12px; margin-bottom: 20px; }
.cobrand > div { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; min-height: 76px; padding: 34px 20px 18px; border: 1px solid var(--line); border-radius: 10px; background: #0F0F0F; }
.cobrand__lbl { position: absolute; top: 10px; left: 20px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.cobrand__ok .cobrand__lbl { color: var(--green); }
.cobrand__no .cobrand__lbl { color: var(--danger); }
.names-ok { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.names-ok li { padding: 6px 12px; border: 1px solid rgba(101, 252, 108, .35); border-radius: 999px; color: var(--text); font-size: 14px; font-weight: 600; }
.body--sm { margin-bottom: 16px; font-size: 14px; }
.cobrand__ok { border-color: rgba(101, 252, 108, .3) !important; }
.cobrand__ok img { display: block; width: 132px; }
.cobrand__ok p { margin: 0; color: #C9C9C9; font-size: 14px; }
.cobrand__no { gap: 8px !important; border-color: rgba(242, 139, 139, .35) !important; }
.cobrand__no .lk { width: 132px; }
.cobrand__no::after {
  content: ""; position: absolute; top: 50%; right: 16px; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: var(--danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 7l8 8M15 7l-8 8' stroke='%231A0A0A' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.rules { margin: 0; padding: 0; list-style: none; }
.rules li { position: relative; padding: 9px 0 9px 18px; border-top: 1px solid var(--line); color: #C9C9C9; font-size: 14px; line-height: 1.5; }
.rules li::before { content: ""; position: absolute; top: 18px; left: 2px; width: 6px; height: 6px; border: 1.5px solid var(--prop); transform: rotate(45deg); }
.rules--rule li::before { top: 19px; width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--green); transform: none; }
.rules--wide { max-width: 760px; }
.card .rules li:first-child { border-top: 0; }

/* ---------- 12 Downloads ---------- */
.kit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 28px; border: 1px solid rgba(101, 252, 108, .3); border-radius: 14px; background: linear-gradient(120deg, rgba(101, 252, 108, .06), transparent 60%), var(--surface); }
.kit__art img { display: block; width: 72px; }
.kit h3 { margin-bottom: 6px; }
.kit p { margin: 0; color: var(--copy); font-size: 15px; }
.files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; margin-top: 48px; }
.files__more { margin: 10px 0 0; color: var(--faint); font-size: 12px; }
.extras { margin-top: 64px; }
.gloss { margin: 0; }
.gloss > div { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
.gloss dt { display: inline; color: var(--text); font-weight: 650; }
.gloss dt::after { content: " · "; content: " · " / ""; color: var(--faint); }
.gloss dd { display: inline; margin: 0; color: var(--muted); }
.files ul { margin: 0; padding: 0; list-style: none; }
.files a { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); color: #D8D8D8; font-size: 14px; font-weight: 600; text-decoration: none; transition: color .16s ease; }
.files a::after { content: "↓"; content: "↓" / ""; margin-left: auto; color: var(--faint); }
.files a:hover { color: var(--green); }
.dot { width: 10px; height: 10px; flex: none; border-radius: 50%; }
.bg-dark-dot { background: #0F0F0F; box-shadow: inset 0 0 0 1px #5A5A5A; }
.bg-green-dot { background: #65FC6C; }
.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--line); }
.contact__mail { margin: 0; font-size: clamp(20px, 2.2vw, 28px); font-weight: 650; letter-spacing: -.025em; overflow-wrap: anywhere; }
.contact__mail a { text-decoration: none; transition: color .16s ease; }
.contact__mail a:hover { color: var(--green); }
.contact .note a { color: var(--muted); }
.contact .note a:hover { color: var(--green); }

/* ---------- Rodapé e toast ---------- */
.foot { margin-left: var(--side); padding: 48px 0 64px; border-top: 1px solid var(--line); }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.foot__in img { display: block; width: 96px; }
.foot__in p { margin: 0; color: var(--muted); font-size: 12px; }
.foot__in .totop { margin: 0 0 0 auto; }
.toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  padding: 10px 16px; border-radius: 8px;
  background: var(--text); color: #080808; font-size: 13px; font-weight: 750;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.is-on { opacity: 1; transform: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 1180px) {
  :root { --side: 224px; }
  .side { padding: 30px 18px 22px; }
  .toc a { gap: 10px; font-size: 12.5px; }
  .wrap { width: min(100% - 96px, 1080px); }
  .appstates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .side { display: none; }
  main, .foot { margin-left: 0; }
  .mbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: 56px; padding: 0 32px;
    border-bottom: 1px solid var(--line);
    background: rgba(15, 15, 15, .94);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
  .mbar__brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 13px; font-weight: 700; text-decoration: none; }
  .mbar__brand img { display: block; }
  .mnav summary {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 0 14px;
    border: 1px solid var(--line-3); border-radius: 8px;
    color: var(--text); font-size: 13px; font-weight: 700;
    list-style: none; cursor: pointer;
  }
  .mnav summary::-webkit-details-marker { display: none; }
  .mnav summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
  .mnav[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
  .mnav nav { position: absolute; top: 56px; right: 0; left: 0; max-height: calc(100vh - 56px); overflow-y: auto; padding: 8px 32px 20px; border-bottom: 1px solid var(--line); background: #0F0F0F; }
  .mnav ol { margin: 0; padding: 0; list-style: none; }
  .mnav a { display: block; padding: 11px 0; border-bottom: 1px solid #181818; color: #D8D8D8; font-size: 15px; font-weight: 600; text-decoration: none; }
  .mnav a.is-active { color: var(--green); }
  .sec { scroll-margin-top: 56px; padding: 96px 0; }
  .wrap { width: min(100% - 64px, 1080px); }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .construct { grid-template-columns: 1fr; gap: 28px; }
  .specs--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .videos--tall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .easings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comp { gap: 24px; }
  .comp__spec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .type-hero { grid-template-columns: 1fr; gap: 24px; }
  .scale__row { grid-template-columns: 1fr; gap: 10px; }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage { grid-template-columns: 1fr; gap: 40px; }
  .greenuse { grid-template-columns: 1fr; }
  .appstates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appstates .as:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .mbar { padding: 0 16px; }
  .mnav nav { padding: 8px 16px 20px; }
  .wrap { width: calc(100% - 32px); }
  .sec { padding: 72px 0; }
  .hero { padding: 56px 0 72px; }
  .hero__mark { margin: 32px 0 40px; }
  .hero__lead { font-size: 17px; }
  .hero__actions .btn { width: 100%; }
  .meta { margin-top: 56px; }
  .legend { padding: 18px 16px; }
  .legend-tags { grid-template-columns: 1fr; gap: 6px; }
  .legend-tags dd { margin-bottom: 10px; }
  .sec__head { margin-bottom: 44px; }
  .lead { font-size: 16px; }
  .subhead { margin: 64px 0 18px; }
  .card { padding: 24px 20px; }
  .voice { grid-template-columns: 1fr; }
  .voice__item { padding: 24px 20px; }
  .boards { grid-template-columns: 1fr; gap: 20px; }
  .boards--square { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .versions { grid-template-columns: 1fr; }
  .versions__art { height: 120px; }
  .optical { grid-template-columns: 1fr; gap: 20px; }
  .optical figure { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 16px; align-items: end; }
  .optical__big { grid-row: 1 / span 2; padding: 12px; }
  .optical__big img { width: 100%; }
  .optical__real { margin: 0; }
  .misuse { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .stage { padding: 24px; }
  .stage__mac img { width: 160px; }
  .ico-grp { gap: 14px; }
  .swatches--core { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .swatches--small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw__chip { height: 110px; }
  .swatches--core .sw:first-child .sw__chip { height: 120px; }
  .swatches--small .sw__chip { height: 76px; }
  .sw__info { padding: 12px 12px 14px; }
  .hex { position: relative; font-size: 15px; }
  .hex::before { content: ""; position: absolute; inset: -10px -8px; }
  .hex::after { display: none; }
  .contrast thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .contrast tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .contrast td { padding: 0; border: 0; }
  .contrast td.contrast__use { grid-column: 1 / -1; padding-left: 46px; }
  .type-hero { padding: 28px 20px; }
  .type-hero__chars { font-size: 16px; }
  .vs { grid-template-columns: 1fr; }
  .panel { padding: 20px 16px; }
  .toolbar { gap: 16px 6px; }
  .toolbar li { min-width: 68px; }
  .panel--states { gap: 22px 18px; justify-content: space-around; }
  .appstates { grid-template-columns: 1fr; }
  .badges__row p { width: 100%; }
  .videos--wide { grid-template-columns: 1fr; }
  .videos--tall { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; overscroll-behavior-x: contain; }
  .videos--tall figure { scroll-snap-align: start; }
  .easings { gap: 10px; }
  .ez { padding: 16px 14px 18px; }
  .timeline { grid-template-columns: 1fr; }
  .states { gap: 18px 16px; }
  .comp__spec { grid-template-columns: 1fr 1fr; }
  .p-card { padding: 24px 20px; }
  .layout-demo { grid-template-columns: 32px minmax(0, 1fr) 32px; }
  .mail__gutter { padding: 24px 12px; }
  .mail__head { padding: 16px 16px 0; }
  .mail__content { padding: 32px 24px 28px; }
  .mail__foot { padding: 22px 24px 26px; }
  .mail__title { font-size: 28px; line-height: 34px; }
  .mail__btn { display: block; text-align: center; }
  .kit { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px; }
  .kit .btn { width: 100%; }
  .files { grid-template-columns: 1fr; gap: 24px; }
  .files a { min-height: 44px; }
  .contact { grid-template-columns: 1fr; }
  .callout { padding: 18px; }
  .foot__in .totop { margin-left: 0; }
  .totop { min-height: 44px; }
  .toast { right: 16px; left: 16px; text-align: center; }
  /* texto miúdo: piso de 11 px e menos espaçamento em caixa alta */
  .tag { font-size: 11px; letter-spacing: .06em; }
  .kicker, .eyebrow, .meta dt, .specs dt, .comp__spec dt, .contrast th, .names th, .taglines em, .do > span, .dont > span, .cobrand__lbl, .chips .chips__caps { font-size: 11px; letter-spacing: .1em; }
  .comp__spec dd, .states figcaption, .ico-row i { font-size: 12px; }
}
@media (max-width: 380px) {
  .optical figure { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .btn:hover, .p-btn:hover, .p-btn.is-hover, .p-sec:hover, .p-sec.is-hover, .tool:hover, .tool.is-hover { transform: none; }
}

/* ---------- 404 ---------- */
.nf { width: min(100% - 32px, 720px); margin: 0 auto; padding: 18vh 0 96px; }
.nf img { display: block; width: 160px; margin-bottom: 64px; }
.nf__title { margin: 0; font-size: clamp(40px, 6vw, 72px); font-weight: 700; line-height: .98; letter-spacing: -.055em; }
.nf .lead { margin-bottom: 36px; }