/* ═══════════════════════════════════════════════════════════════════
   CINEMATIK STUDIOS — Sistema de Marca · "Frame"
   Type-led, monocromático. O trabalho é a única cor.
   Hanken Grotesk (conduz) · Space Grotesk CAIXA ALTA (pontua).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Tinta / papel — base monocromática (brief §7) ── */
  --ink:        #141310;   /* near-black, levemente neutro */
  --ink-2:      #4B473F;   /* secondary ink */
  --ink-3:      #837D71;   /* captions, metadados */
  --ink-4:      #B4AEA1;   /* faded */
  --paper:      #F2F1ED;   /* off-white limpo */
  --paper-hi:   #FBFAF7;   /* branco de superfície */
  --frame:      #171612;   /* placeholder de vídeo/imagem */

  --line:       rgba(20, 19, 16, 0.15);   /* hairline padrão */
  --line-soft:  rgba(20, 19, 16, 0.08);
  --line-rev:   rgba(255, 255, 255, 0.14);

  /* ── Acento — micro-momentos apenas. Mono por padrão. ── */
  --cobalt:     #1E2BD6;
  --accent:     var(--ink);     /* sobrescrito p/ cobalto via [data-accent] */

  /* ── Tipografia ── */
  --sans: 'Hanken Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --tech: 'Space Grotesk', ui-monospace, monospace;

  --wt-display: 800;   /* sobrescrito via [data-display] */

  /* Tracking */
  --trk-display: -0.04em;
  --trk-tight:   -0.025em;
  --trk-snug:    -0.012em;
  --trk-tech:    0.18em;   /* Space Grotesk caps — largo */
  --trk-tech-sm: 0.14em;

  /* Escala (mín. corpo 16px) */
  --t-2xs: 11px;
  --t-xs:  12px;
  --t-sm:  14px;
  --t-base:16px;
  --t-md:  18px;
  --t-lg:  22px;
  --t-xl:  28px;
  --t-2xl: 40px;
  --t-3xl: clamp(48px, 7vw, 92px);
  --t-cover: clamp(64px, 13vw, 220px);

  /* Espaço — base 4 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 36px; --s-7: 56px; --s-8: 88px;
  --s-9: 128px; --s-10: 184px;

  --gutter: 56px;
  --max: 1360px;

  /* Movimento — timing de cinema (suave, decidido) */
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 220ms;
  --d-base: 480ms;
  --d-slow: 820ms;
}

[data-accent="cobalto"] { --accent: var(--cobalt); }
[data-display="900"]   { --wt-display: 900; }

@media (max-width: 860px) { :root { --gutter: 24px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  font-weight: 400;
  min-height: 100vh;
  overflow-x: hidden;
}

::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }

/* ───────────────────────────────────────── primitives ── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }

/* Hairline section rhythm */
section.spread { padding: var(--s-9) 0; position: relative; }
section.spread + section.spread { border-top: 1px solid var(--line); }

.hair { border: none; border-top: 1px solid var(--line); margin: var(--s-5) 0; }
.hair.ink { border-top-color: var(--ink); }

/* Space Grotesk caps — "voz técnica" */
.tech {
  font-family: var(--tech);
  font-weight: 400;
  font-size: var(--t-2xs);
  letter-spacing: var(--trk-tech);
  text-transform: uppercase;
  color: var(--ink-3);
}
.tech.md { font-weight: 500; color: var(--ink-2); }
.tech.sm { letter-spacing: var(--trk-tech-sm); }
.tech.on { color: var(--ink); }

/* Section anchor — número técnico + headline Hanken */
.anchor { display: flex; flex-direction: column; gap: var(--s-6); margin-bottom: var(--s-8); }
.anchor .rail {
  display: flex; align-items: baseline; gap: var(--s-4);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--ink);
}
.anchor .rail .no {
  font-family: var(--tech); font-weight: 500;
  font-size: var(--t-sm); letter-spacing: var(--trk-tech);
  color: var(--accent);
}
.anchor .rail .lbl {
  font-family: var(--tech); font-weight: 400;
  font-size: var(--t-sm); letter-spacing: var(--trk-tech);
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap; flex-shrink: 0;
}
.anchor .rail .pg { margin-left: auto; font-family: var(--tech); font-size: var(--t-xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); white-space: nowrap; flex-shrink: 0; }
.anchor h2 {
  font-family: var(--sans); font-weight: var(--wt-display);
  font-size: var(--t-3xl); line-height: 1.02; letter-spacing: var(--trk-display);
  color: var(--ink); text-wrap: balance; max-width: 18ch; padding-bottom: 2px;
}
.anchor .lede {
  font-size: var(--t-md); line-height: 1.55; color: var(--ink-2);
  max-width: 56ch; text-wrap: pretty;
}

/* Reveal on scroll — cinema timing */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ═══════════════════════════════════════════ LOCKUP ══ */
.lockup { display: inline-flex; align-items: baseline; gap: 0.42em; line-height: 1; white-space: nowrap; }
.lockup .word {
  font-family: var(--sans); font-weight: var(--wt-display);
  letter-spacing: var(--trk-display); color: currentColor;
  font-size: 1em;
}
.lockup .studios {
  font-family: var(--tech); font-weight: 500;
  font-size: 0.24em; letter-spacing: 0.22em; text-transform: uppercase;
  color: currentColor; transform: translateY(-0.15em);
}
.lockup.stack { flex-direction: column; align-items: flex-start; gap: 0.18em; }
.lockup.stack .studios { transform: none; letter-spacing: 0.34em; }

/* ═══════════════════════════════════════════ COVER ══ */
.cover { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: var(--s-7) 0 var(--s-8); }
.cover .top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); padding-top: var(--s-4); }
.cover .top .id { display: flex; flex-direction: column; gap: 4px; }
.cover .top .id .tech { color: var(--ink-2); }
.cover .top .ed { text-align: right; display: flex; flex-direction: column; gap: 4px; }

.cover .hero { display: flex; flex-direction: column; gap: var(--s-6); margin: auto 0; padding: var(--s-7) 0; }
.cover .hero .mark { font-size: var(--t-cover); color: var(--ink); }
.cover .hero .statement {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(22px, 3vw, 40px); line-height: 1.12; letter-spacing: var(--trk-tight);
  color: var(--ink); max-width: 24ch; text-wrap: balance;
}
.cover .hero .statement b { font-weight: var(--wt-display); }

.cover .foot { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--ink); align-items: end; }
@media (max-width: 800px) { .cover .foot { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); } }
.cover .foot .cell { display: flex; flex-direction: column; gap: var(--s-2); }
.cover .foot .cell .v { font-family: var(--sans); font-weight: 600; font-size: var(--t-base); letter-spacing: var(--trk-snug); color: var(--ink); }

/* Running header */
.chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-4) var(--gutter);
  pointer-events: none;
  mix-blend-mode: normal;
}
.chrome > * { pointer-events: auto; }
.chrome .nav { display: flex; gap: var(--s-5); }
.chrome .nav a { font-family: var(--tech); font-size: var(--t-2xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-2); transition: color var(--d-fast) var(--ease); }
.chrome .nav a:hover { color: var(--ink); }
@media (max-width: 860px) { .chrome .nav { display: none; } }
.chrome .mk { font-family: var(--sans); font-weight: var(--wt-display); font-size: var(--t-sm); letter-spacing: var(--trk-snug); white-space: nowrap; }
.chrome > .tech { white-space: nowrap; flex-shrink: 0; }

/* ═══════════════════════════════════════════ INDEX ══ */
.toc { border-top: 1px solid var(--ink); }
.toc .row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s-4);
  align-items: baseline; padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
  transition: padding-left var(--d-base) var(--ease);
}
.toc .row:hover { padding-left: 10px; }
.toc .row .n { font-family: var(--tech); font-weight: 500; font-size: var(--t-sm); letter-spacing: var(--trk-tech-sm); color: var(--accent); }
.toc .row .tt { font-family: var(--sans); font-weight: 600; font-size: var(--t-lg); letter-spacing: var(--trk-snug); color: var(--ink); }
.toc .row .tt .sub { display: block; font-family: var(--tech); font-weight: 400; font-size: var(--t-2xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.toc .row .pg { font-family: var(--tech); font-size: var(--t-xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); }

/* ═══════════════════════════════════════════ PRINCÍPIOS ══ */
.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-8); }
@media (max-width: 760px) { .principles { grid-template-columns: 1fr; gap: var(--s-6); } }
.principle { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.principle .no { font-family: var(--tech); font-weight: 500; font-size: var(--t-xs); letter-spacing: var(--trk-tech); color: var(--ink-3); }
.principle h3 { font-family: var(--sans); font-weight: var(--wt-display); font-size: var(--t-xl); line-height: 1.05; letter-spacing: var(--trk-tight); color: var(--ink); }
.principle p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); max-width: 44ch; text-wrap: pretty; }

/* ═══════════════════════════════════════════ LOGO ══ */
.logo-hero { background: var(--frame); color: var(--paper-hi); border-radius: 4px; padding: var(--s-8) var(--s-7); min-height: 420px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.logo-hero .mark { font-size: clamp(48px, 9vw, 132px); color: var(--paper-hi); position: relative; z-index: 2; }
.logo-hero .grid-guide { position: absolute; inset: var(--s-6); background-image: linear-gradient(var(--line-rev) 1px, transparent 1px), linear-gradient(90deg, var(--line-rev) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.5; pointer-events: none; }
.logo-hero .tag { position: absolute; bottom: var(--s-5); left: var(--s-7); color: var(--ink-4); z-index: 2; }
.logo-hero .tag.r { left: auto; right: var(--s-7); }

.logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
@media (max-width: 760px) { .logo-grid { grid-template-columns: 1fr; } }
.logo-cell { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.logo-cell .stage { flex: 1; min-height: 180px; display: flex; align-items: center; justify-content: center; padding: var(--s-6); }
.logo-cell .stage.ink { background: var(--frame); color: var(--paper-hi); }
.logo-cell .stage.paper { background: var(--paper-hi); color: var(--ink); }
.logo-cell .stage .mark { font-size: clamp(28px, 4vw, 52px); }
.logo-cell .stage .mark.sm { font-size: clamp(20px, 2.6vw, 32px); }
.logo-cell .cap { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.logo-cell .cap .nm { font-family: var(--sans); font-weight: 600; font-size: var(--t-sm); letter-spacing: var(--trk-snug); }

/* Clearspace + min size */
.logo-spec { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-4); margin-top: var(--s-4); }
@media (max-width: 760px) { .logo-spec { grid-template-columns: 1fr; } }
.spec-box { border: 1px solid var(--line); border-radius: 4px; padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.spec-box .clearspace { position: relative; align-self: flex-start; padding: 2.4ch; outline: 1px dashed var(--line); }
.spec-box .clearspace .mark { font-size: clamp(28px, 4vw, 44px); }
.spec-box .clearspace::before, .spec-box .clearspace::after { content: 'X'; position: absolute; font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); color: var(--accent); }
.spec-box .clearspace::before { top: 4px; left: 6px; }
.spec-box .clearspace::after { bottom: 4px; right: 6px; }
.spec-box .sizes { display: flex; align-items: flex-end; gap: var(--s-5); flex-wrap: wrap; }
.spec-box .sizes .u { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }

/* Misuse */
.misuse { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-top: var(--s-4); }
@media (max-width: 760px) { .misuse { grid-template-columns: repeat(2, 1fr); } }
.misuse .x { border: 1px solid var(--line); border-radius: 4px; aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-4); text-align: center; position: relative; }
.misuse .x .demo { font-family: var(--sans); font-weight: var(--wt-display); color: var(--ink); }
.misuse .x .lbl { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); }
.misuse .x::after { content: '✕'; position: absolute; top: 8px; right: 10px; font-family: var(--tech); font-size: 12px; color: var(--ink-3); }

/* ═══════════════════════════════════════════ TIPOGRAFIA ══ */
.type-spec { display: grid; grid-template-columns: 200px 1fr; gap: var(--s-7); padding: var(--s-7) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.type-spec:last-of-type { border-bottom: none; }
@media (max-width: 820px) { .type-spec { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-5) 0; } }
.type-spec .meta { display: flex; flex-direction: column; gap: 4px; }
.type-spec .meta .face { font-family: var(--sans); font-weight: 600; font-size: var(--t-md); letter-spacing: var(--trk-snug); color: var(--ink); }
.type-spec .meta .det { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); line-height: 1.8; }

.sp-cover { font-family: var(--sans); font-weight: var(--wt-display); font-size: clamp(56px, 9vw, 128px); line-height: 0.94; letter-spacing: var(--trk-display); color: var(--ink); }
.sp-display { font-family: var(--sans); font-weight: 800; font-size: clamp(40px, 5.5vw, 76px); line-height: 0.98; letter-spacing: var(--trk-display); color: var(--ink); }
.sp-h1 { font-family: var(--sans); font-weight: 700; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.04; letter-spacing: var(--trk-tight); color: var(--ink); }
.sp-h2 { font-family: var(--sans); font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: var(--trk-tight); color: var(--ink); }
.sp-body { font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: 1.6; color: var(--ink); max-width: 58ch; }
.sp-tech { font-family: var(--tech); font-weight: 400; font-size: 15px; letter-spacing: var(--trk-tech); text-transform: uppercase; color: var(--ink-2); line-height: 1.9; }

/* Weight specimen */
.weights { display: flex; flex-direction: column; gap: 2px; }
.weights .w { display: flex; align-items: baseline; gap: var(--s-5); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); }
.weights .w .k { font-family: var(--tech); font-size: var(--t-2xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); width: 130px; flex-shrink: 0; }
.weights .w .s { font-family: var(--sans); font-size: clamp(22px, 3vw, 34px); letter-spacing: var(--trk-tight); color: var(--ink); }

/* Scale table */
.scale-tab { display: flex; flex-direction: column; }
.scale-tab .r { display: grid; grid-template-columns: 110px 1fr 120px; gap: var(--s-4); align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); }
.scale-tab .r .k { font-family: var(--tech); font-size: var(--t-2xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); }
.scale-tab .r .px { font-family: var(--tech); font-size: var(--t-xs); color: var(--ink-3); text-align: right; }

/* ═══════════════════════════════════════════ COR ══ */
.cor-stack { display: flex; flex-direction: column; gap: var(--s-7); }
.ink-row { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ink); border-radius: 4px; overflow: hidden; }
@media (max-width: 700px) { .ink-row { grid-template-columns: repeat(2, 1fr); } }
.ink-row .sw { min-height: 220px; padding: var(--s-5); display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; border-right: 1px solid var(--line); }
.ink-row .sw:last-child { border-right: none; }
.ink-row .sw .nm { font-family: var(--sans); font-weight: 600; font-size: var(--t-md); letter-spacing: var(--trk-snug); }
.ink-row .sw .hex { font-family: var(--tech); font-size: var(--t-xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; }
.ink-row .sw .use { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; opacity: 0.7; }

.cor-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 760px) { .cor-pair { grid-template-columns: 1fr; } }
.accent-block { border-radius: 4px; padding: var(--s-7); min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; background: var(--cobalt); color: #fff; }
.accent-block.mono { background: var(--frame); }
.accent-block .nm { font-family: var(--sans); font-weight: var(--wt-display); font-size: clamp(40px, 5vw, 68px); line-height: 0.96; letter-spacing: var(--trk-display); }
.accent-block .meta { display: flex; justify-content: space-between; align-items: end; font-family: var(--tech); font-size: var(--t-xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; opacity: 0.9; }
.accent-note { border: 1px solid var(--line); border-radius: 4px; padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.accent-note p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); }
.accent-note .rule { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-sm); color: var(--ink-2); }
.accent-note .rule .b { color: var(--accent); font-family: var(--tech); font-size: var(--t-2xs); letter-spacing: var(--trk-tech-sm); padding-top: 4px; }

/* Proportion bar */
.prop-bar { height: 64px; display: flex; border-radius: 4px; overflow: hidden; border: 1px solid var(--ink); }
.prop-bar > div { display: flex; align-items: flex-end; padding: var(--s-3); font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; }

/* ═══════════════════════════════════════════ GRID / WORK ══ */
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-4); }
@media (max-width: 760px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
.frame { background: var(--frame); border-radius: 3px; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: var(--s-4); transition: transform var(--d-base) var(--ease); }
.frame:hover { transform: translateY(-4px); }
.frame .meta { display: flex; flex-direction: column; gap: 3px; z-index: 2; }
.frame .meta .t { font-family: var(--sans); font-weight: 600; font-size: var(--t-sm); color: var(--paper-hi); letter-spacing: var(--trk-snug); }
.frame .meta .d { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-4); }
.frame .ratio { position: absolute; top: var(--s-4); right: var(--s-4); font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); color: rgba(255,255,255,0.4); z-index: 2; }
/* placeholder shimmer guideline corner */
.frame::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.03), transparent 60%); }

.grid-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); margin-top: var(--s-7); }
@media (max-width: 760px) { .grid-notes { grid-template-columns: 1fr; gap: var(--s-5); } }
.grid-notes .gn { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.grid-notes .gn h4 { font-family: var(--sans); font-weight: 700; font-size: var(--t-md); letter-spacing: var(--trk-snug); }
.grid-notes .gn p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); }

/* spacing scale */
.space-scale { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.space-scale .r { display: grid; grid-template-columns: 90px 1fr; gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-soft); }
.space-scale .r:last-child { border-bottom: none; }
.space-scale .r .k { font-family: var(--tech); font-size: var(--t-2xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); }
.space-scale .r .bar { height: 10px; background: var(--ink); border-radius: 2px; }

/* ═══════════════════════════════════════════ MOVIMENTO ══ */
.motion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); }
@media (max-width: 760px) { .motion-grid { grid-template-columns: 1fr; } }
.motion-tokens { display: flex; flex-direction: column; }
.motion-tokens .r { display: grid; grid-template-columns: 130px 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--line-soft); align-items: center; }
.motion-tokens .r .k { font-family: var(--tech); font-size: var(--t-2xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); }
.motion-tokens .r .track { height: 2px; background: var(--line); border-radius: 2px; position: relative; }
.motion-tokens .r .track .dot { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 999px; background: var(--accent); }
.motion-demo { background: var(--frame); border-radius: 4px; min-height: 280px; padding: var(--s-6); display: flex; flex-direction: column; justify-content: space-between; color: var(--paper-hi); cursor: pointer; overflow: hidden; }
.motion-demo .obj { width: 64px; height: 64px; border: 1px solid var(--line-rev); border-radius: 3px; transition: transform var(--d-slow) var(--ease); }
.motion-demo:hover .obj { transform: translateX(calc(100% + 64px)); }
.motion-demo .cap { font-family: var(--tech); font-size: var(--t-2xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-4); }

/* ═══════════════════════════════════════════ COMPONENTES ══ */
.comp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (max-width: 760px) { .comp-grid { grid-template-columns: 1fr; } }
.comp { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.comp .hd { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.comp .hd .nm { font-family: var(--sans); font-weight: 600; font-size: var(--t-sm); letter-spacing: var(--trk-snug); }
.comp .stage { flex: 1; min-height: 150px; display: flex; align-items: center; justify-content: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-6); background: var(--paper-hi); }

.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: var(--t-sm); letter-spacing: var(--trk-snug); padding: 13px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; line-height: 1; transition: all var(--d-fast) var(--ease); }
.btn .arr { transition: transform var(--d-fast) var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--ink); color: var(--paper-hi); border-color: var(--ink); }
.btn-primary:hover { background: #000; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--paper-hi); }
.btn-ghost { background: transparent; color: var(--ink-2); border: none; padding: 13px 6px; }
.btn-ghost:hover { color: var(--accent); }

.label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--ink); font-family: var(--tech); font-size: 10px; font-weight: 500; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink); }
.label.solid { background: var(--ink); color: var(--paper-hi); border-color: var(--ink); }
.label.accent { border-color: var(--accent); color: var(--accent); }
.label .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

.field { width: 100%; max-width: 300px; background: var(--paper-hi); color: var(--ink); font-family: var(--sans); font-size: var(--t-base); padding: 13px 16px; border: 1px solid var(--ink); border-radius: 3px; outline: none; transition: box-shadow var(--d-fast) var(--ease); }
.field:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.field::placeholder { color: var(--ink-3); }

.nav-demo { display: inline-flex; gap: var(--s-5); border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.nav-demo a { font-family: var(--tech); font-size: var(--t-2xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); position: relative; padding-bottom: 9px; cursor: pointer; transition: color var(--d-fast) var(--ease); }
.nav-demo a:hover { color: var(--ink); }
.nav-demo a.on { color: var(--ink); }
.nav-demo a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--accent); }

.meta-demo { display: grid; grid-template-columns: auto 1fr; gap: 12px var(--s-5); align-items: baseline; line-height: 1.5; font-family: var(--tech); font-size: var(--t-2xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; }
.meta-demo .k { color: var(--ink-3); }
.meta-demo .v { color: var(--ink); white-space: nowrap; }

.workcard { max-width: 320px; display: flex; flex-direction: column; gap: var(--s-3); }
.workcard .fr { background: var(--frame); aspect-ratio: 4/5; border-radius: 3px; position: relative; }
.workcard .fr .ratio { position: absolute; top: 12px; right: 12px; font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); color: rgba(255,255,255,0.4); }
.workcard .cap { display: flex; justify-content: space-between; align-items: baseline; }
.workcard .cap .t { font-family: var(--sans); font-weight: 600; font-size: var(--t-base); letter-spacing: var(--trk-snug); }
.workcard .cap .y { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); }

/* ═══════════════════════════════════════════ APLICAÇÕES ══ */
.apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 900px) { .apps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .apps { grid-template-columns: 1fr; } }
.app { display: flex; flex-direction: column; gap: var(--s-3); }
.app .cap { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); }
.app .cap span { white-space: nowrap; }

.avatar-row { display: flex; gap: var(--s-5); align-items: center; }
.avatar { width: 120px; height: 120px; background: var(--frame); color: var(--paper-hi); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar.circle { border-radius: 999px; }
.avatar .mark { font-size: 15px; letter-spacing: var(--trk-tight); white-space: nowrap; }
.avatar.sm { width: 64px; height: 64px; }
.avatar.sm .mark { font-size: 8px; }
.avatar.paper { background: var(--paper-hi); color: var(--ink); border: 1px solid var(--line); }

.social-cover { aspect-ratio: 1.91/1; background: var(--frame); color: var(--paper-hi); border-radius: 4px; padding: var(--s-6); display: flex; flex-direction: column; justify-content: space-between; }
.social-cover .mark { font-size: clamp(28px, 4vw, 48px); }
.social-cover .foot { display: flex; justify-content: space-between; align-items: end; font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-4); }

.ig-post { aspect-ratio: 1/1; border-radius: 4px; padding: var(--s-6); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.ig-post.ink { background: var(--frame); color: var(--paper-hi); }
.ig-post.paper { background: var(--paper-hi); color: var(--ink); border: 1px solid var(--line); }
.ig-post .big { font-family: var(--sans); font-weight: var(--wt-display); font-size: clamp(28px, 4vw, 44px); line-height: 0.98; letter-spacing: var(--trk-display); text-wrap: balance; }
.ig-post .foot { display: flex; justify-content: space-between; align-items: end; font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; opacity: 0.7; }
.ig-post .lockup .studios { color: currentColor; }

.ig-story { aspect-ratio: 9/16; background: var(--frame); color: var(--paper-hi); border-radius: 4px; padding: var(--s-5); display: flex; flex-direction: column; justify-content: space-between; }
.ig-story .big { font-family: var(--sans); font-weight: var(--wt-display); font-size: clamp(26px, 3.4vw, 36px); line-height: 1.0; letter-spacing: var(--trk-display); }
.ig-story .foot { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-4); }

.email-sig { border: 1px solid var(--line); border-radius: 4px; padding: var(--s-6); background: var(--paper-hi); display: flex; flex-direction: column; gap: var(--s-3); }
.email-sig .mark { font-size: 24px; }
.email-sig .ln { display: flex; flex-direction: column; gap: 2px; }
.email-sig .ln .nm { font-family: var(--sans); font-weight: 600; font-size: var(--t-sm); }
.email-sig .ln .rl { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); }
.email-sig .det { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); line-height: 1.9; }

/* ═══════════════════════════════════════════ DO / DON'T ══ */
.dodont { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); }
@media (max-width: 760px) { .dodont { grid-template-columns: 1fr; gap: var(--s-6); } }
.dd-col h3 { font-family: var(--sans); font-weight: var(--wt-display); font-size: var(--t-lg); letter-spacing: var(--trk-tight); margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--ink); display: flex; align-items: center; gap: 10px; }
.dd-col h3 .s { font-family: var(--tech); font-size: var(--t-sm); }
.dd-col ul { list-style: none; display: flex; flex-direction: column; }
.dd-col li { display: grid; grid-template-columns: 18px 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.dd-col li .m { font-family: var(--tech); font-size: var(--t-xs); color: var(--ink); }

/* ═══════════════════════════════════════════ COLOPHON ══ */
.colophon { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--ink); }
@media (max-width: 760px) { .colophon { grid-template-columns: 1fr; gap: var(--s-5); } }
.colophon h5 { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-3); font-weight: 400; }
.colophon .v { font-family: var(--sans); font-weight: 600; font-size: var(--t-sm); letter-spacing: var(--trk-snug); color: var(--ink); line-height: 1.6; }
.colophon p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); max-width: 40ch; }

.end-mark { padding: var(--s-8) 0 var(--s-7); display: flex; flex-direction: column; align-items: center; gap: var(--s-4); text-align: center; }
.end-mark .mark { font-size: clamp(40px, 7vw, 96px); }