/* ============================================================
   matuta.art — shared design system (ported from the DS handoff)
   One stylesheet linked by every subdomain. Source of truth for
   values = the DS tokens; this file inlines them + a class library
   ported from components/app/App.jsx + components/core/*.jsx.
   Mobile-first. Warm, papery workshop-desk. "app 2b".
   ============================================================ */

/* ---- FONTS (Google Fonts; self-host later) ---- */
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Barlow+Condensed:wght@500;600;700&family=Spline+Sans+Mono:wght@400;500;600;700&display=swap");

/* ============================================================
   TOKENS  (verbatim from tokens/{colors,typography,spacing,effects}.css)
   ============================================================ */
:root {
  /* ---- COLOR · neutrals (warm) ---- */
  --ink:#1a1a1a; --ink-2:#3b382f; --paper:#ffffff;
  --desk:#e9e6df; --desk-2:#f0ede6; --cream:#faf8f1; --cream-2:#f3f0e8;
  --hair:#e7e3db; --mut:#8a8377; --mut-2:#b3ab9c;

  /* ---- COLOR · brand ---- */
  --clay:#b8532f; --clay-deep:#97401f; --clay-soft:#f6e7df;
  --sun:#e0a32e; --sun-soft:#fbf0d6;

  /* ---- COLOR · signal spectrum ---- */
  --sig-clay:#b8532f; --sig-rust:#c2410c; --sig-amber:#c1841a; --sig-leaf:#5f8a2b;
  --sig-pine:#2f8a5f; --sig-teal:#0e7f96; --sig-ocean:#2563b8; --sig-indigo:#4f46b5;
  --sig-berry:#a83a6b; --sig-wood:#8a5a2b;

  /* ---- COLOR · semantic ---- */
  --success:#2f8a5f; --danger:#c0342b; --warning:#c1841a; --info:#2563b8;
  --success-soft:#e7f2ec; --danger-soft:#f8e7e5; --warning-soft:#fbf0d6; --info-soft:#e4edf9;

  /* ---- COLOR · aliases ---- */
  --text-strong:var(--ink); --text-body:var(--ink-2); --text-muted:var(--mut);
  --text-faint:var(--mut-2); --text-brand:var(--clay);
  --surface-app:var(--desk); --surface-card:var(--paper); --surface-panel:var(--cream);
  --surface-inset:var(--cream-2); --border-hair:var(--hair); --border-strong:var(--ink);
  --accent:var(--clay); --accent-2:var(--sun);

  /* ---- TYPE · families ---- */
  --font-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --font-body:"Barlow",system-ui,-apple-system,sans-serif;
  --font-mono:"Spline Sans Mono",ui-monospace,"SFMono-Regular",monospace;

  /* ---- TYPE · weights ---- */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* ---- TYPE · scale ---- */
  --fs-display:44px; --fs-h1:30px; --fs-h2:18px; --fs-h3:14px; --fs-lead:17px;
  --fs-body:14.5px; --fs-sm:13px; --fs-xs:11px; --fs-data:15px;

  /* ---- TYPE · line-height / tracking ---- */
  --lh-tight:0.92; --lh-snug:1.15; --lh-body:1.5; --lh-loose:1.6;
  --ls-display:0.5px; --ls-label:1px; --ls-caps:2px;

  /* ---- TYPE · role shorthands ---- */
  --type-eyebrow:var(--fw-bold) var(--fs-xs)/1 var(--font-display);
  --type-h1:var(--fw-bold) var(--fs-h1)/var(--lh-tight) var(--font-display);
  --type-h2:var(--fw-bold) var(--fs-h2)/1 var(--font-display);
  --type-label:var(--fw-bold) var(--fs-xs)/1.1 var(--font-display);
  --type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
  --type-mono:var(--fw-bold) var(--fs-data)/1 var(--font-mono);

  /* ---- SPACE ---- */
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px;
  --gap-tight:var(--space-2); --gap-card:var(--space-3); --gap-grid:var(--space-5); --gap-section:var(--space-12);
  --pad-card:var(--space-4); --pad-panel:var(--space-5); --pad-page-x:var(--space-8);
  --measure:68ch; --content-max:1120px; --sheet-w:297mm;
  --gutter:18px;              /* app screen gutter */
  --col-max:760px;           /* AppFrame centered column */
  --rail-w:236px;            /* desktop side-rail width */
  --topbar-h:52px; --bottomnav-h:72px;

  /* ---- RADIUS ---- */
  --radius-xs:3px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-pill:999px;

  /* ---- BORDERS ---- */
  --bw-hair:1px; --bw-mid:1.5px; --bw-rule:2px; --bw-strong:3px;
  --border-card:var(--bw-mid) solid var(--hair); --accent-top:var(--bw-strong);

  /* ---- SHADOWS ---- */
  --shadow-card:0 1px 2px rgba(26,22,15,.06),0 1px 3px rgba(26,22,15,.05);
  --shadow-raise:0 4px 14px rgba(26,22,15,.10);
  --shadow-sheet:0 8px 40px rgba(0,0,0,.22);
  --shadow-pop:0 12px 32px rgba(26,22,15,.16);

  /* ---- MOTION ---- */
  --ease-out:cubic-bezier(.2,.7,.3,1); --ease-in:cubic-bezier(.5,0,.8,.3);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --hover-lift:translateY(-2px); --press:translateY(1px) scale(.99);

  /* ---- default tone (resolveTone fallback = clay) ---- */
  --tone:var(--sig-clay);
}

/* ---- TONE SYSTEM — [data-tone] sets --tone (mirrors resolveTone()) ---- */
[data-tone="clay"]  {--tone:var(--sig-clay);}
[data-tone="rust"]  {--tone:var(--sig-rust);}
[data-tone="amber"] {--tone:var(--sig-amber);}
[data-tone="leaf"]  {--tone:var(--sig-leaf);}
[data-tone="pine"]  {--tone:var(--sig-pine);}
[data-tone="teal"]  {--tone:var(--sig-teal);}
[data-tone="ocean"] {--tone:var(--sig-ocean);}
[data-tone="indigo"]{--tone:var(--sig-indigo);}
[data-tone="berry"] {--tone:var(--sig-berry);}
[data-tone="wood"]  {--tone:var(--sig-wood);}
[data-tone="ink"]   {--tone:var(--ink);}
[data-tone="success"]{--tone:var(--success);}
[data-tone="danger"]{--tone:var(--danger);}
[data-tone="warning"]{--tone:var(--warning);}
[data-tone="info"]  {--tone:var(--info);}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  background:var(--desk);
  color:var(--ink-2);
  font:var(--type-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:var(--clay); text-decoration:none; }
a:hover { color:var(--clay-deep); }
:focus-visible { outline:2px solid var(--clay); outline-offset:2px; }

/* ============================================================
   SHELL — Grouped Mega Menu
   Injected by shell.js. A fixed top bar with an "Explorar" trigger
   that opens a grouped mega panel (desktop ≥760px) or a left
   slide-in drawer (mobile). [data-open="true"] on .mtt-mega drives
   both; body gets top padding to clear the fixed bar.
   ============================================================ */
:root { --mega-h:58px; }
body { padding-top:var(--mega-h); }

/* wordmark */
.mtt-wm { font:var(--fw-bold) 21px/1 var(--font-display); letter-spacing:.5px; color:var(--ink); white-space:nowrap; text-decoration:none; }
.mtt-wm__art { color:var(--clay); }

/* fixed top bar */
.mtt-mega__bar {
  position:fixed; top:0; left:0; right:0; z-index:50; height:var(--mega-h);
  display:flex; align-items:center; gap:16px; padding:0 var(--gutter);
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1.5px solid var(--hair);
}
.mtt-mega__spacer { flex:1; }

/* trigger */
.mtt-mega__trigger {
  display:flex; align-items:center; gap:9px; flex:none;
  border:1.5px solid var(--hair); background:var(--paper); color:var(--ink-2);
  border-radius:var(--radius-pill); padding:8px 15px 8px 13px; cursor:pointer;
  font:var(--fw-semibold) 13px/1 var(--font-body);
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.mtt-mega__trigger:hover { border-color:var(--clay); color:var(--ink); }
.mtt-mega[data-open="true"] .mtt-mega__trigger { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.mtt-mega__bars { display:flex; flex-direction:column; gap:3px; width:15px; }
.mtt-mega__bars span { height:2px; background:currentColor; border-radius:2px; }

/* shared collection cell */
.mtt-mega__cell {
  display:flex; align-items:flex-start; gap:12px; padding:9px 10px; border-radius:10px;
  text-decoration:none; color:var(--ink); transition:background var(--dur-fast) var(--ease-out);
}
.mtt-mega__cell:hover { background:var(--cream); color:var(--ink); }
.mtt-mega__ico {
  width:34px; height:34px; border-radius:9px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--desk-2); color:var(--tone);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.mtt-mega__cell:hover .mtt-mega__ico { background:var(--tone); color:#fff; }
.mtt-mega__ico svg { width:17px; height:17px; }
.mtt-mega__celltext { display:flex; flex-direction:column; gap:2px; min-width:0; }
.mtt-mega__celllabel { font:var(--fw-semibold) 14.5px/1.1 var(--font-body); color:var(--ink); }
.mtt-mega__celldesc { font:var(--fw-regular) 11px/1.3 var(--font-body); color:var(--mut); }
.mtt-mega__cellhost { display:none; font:var(--fw-regular) 10.5px/1 var(--font-mono); color:var(--mut); }

/* group column */
.mtt-mega__group { flex:1 1 190px; min-width:0; }
.mtt-mega__grouptitle {
  font:var(--fw-bold) 11px/1 var(--font-display); letter-spacing:2px; text-transform:uppercase;
  color:var(--mut); padding:0 10px 8px; border-bottom:1.5px solid var(--hair); margin-bottom:6px;
}

/* desktop mega panel */
.mtt-mega__panel {
  display:none; position:fixed; top:var(--mega-h); left:0; right:0; z-index:49;
  border-top:1.5px solid var(--hair); background:var(--paper); box-shadow:var(--shadow-raise);
}
.mtt-mega__panelinner {
  max-width:var(--content-max); margin-inline:auto; padding:22px var(--gutter) 26px;
  display:flex; flex-wrap:wrap; gap:26px 32px;
}

/* mobile drawer */
.mtt-mega__scrim {
  display:none; position:fixed; inset:0; z-index:60;
  background:color-mix(in srgb,var(--ink) 42%,transparent);
}
.mtt-mega__drawer {
  width:min(340px,86vw); height:100%; display:flex; flex-direction:column;
  background:var(--paper); border-right:1.5px solid var(--hair); box-shadow:var(--shadow-pop);
}
.mtt-mega__drawerhead {
  display:flex; align-items:center; justify-content:space-between; flex:none;
  padding:16px var(--gutter); border-bottom:1.5px solid var(--hair);
}
.mtt-mega__close {
  border:0; background:transparent; color:var(--mut); cursor:pointer;
  font:var(--fw-bold) 10px/1 var(--font-display); letter-spacing:1.5px; text-transform:uppercase;
}
.mtt-mega__drawerbody { flex:1; overflow:auto; padding:12px var(--gutter) 24px; }
.mtt-mega__drawerbody .mtt-mega__group { margin-bottom:16px; flex:none; }
.mtt-mega__drawerbody .mtt-mega__grouptitle { padding-left:4px; padding-right:4px; }
.mtt-mega__drawerbody .mtt-mega__cell { align-items:center; }
.mtt-mega__drawerbody .mtt-mega__ico { width:38px; height:38px; }
.mtt-mega__drawerbody .mtt-mega__ico svg { width:19px; height:19px; }
.mtt-mega__drawerbody .mtt-mega__celldesc { display:none; }
.mtt-mega__drawerbody .mtt-mega__cellhost { display:block; }

/* open state + animations, per viewport */
@keyframes mtt-megaIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@keyframes mtt-megaSlide { from { transform:translateX(-100%); } to { transform:none; } }
@media (min-width:760px) {
  .mtt-mega[data-open="true"] .mtt-mega__panel { display:block; animation:mtt-megaIn var(--dur-base) var(--ease-out); }
}
@media (max-width:759px) {
  .mtt-mega[data-open="true"] .mtt-mega__scrim { display:flex; }
  .mtt-mega[data-open="true"] .mtt-mega__drawer { animation:mtt-megaSlide var(--dur-slow) var(--ease-out); }
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.mtt-col { width:100%; max-width:var(--col-max); margin-inline:auto; }
.mtt-page { padding:8px 0 24px; }        /* vertical rhythm for app screens */
.mtt-gutter { padding-inline:var(--gutter); }
.mtt-wide { width:100%; max-width:var(--content-max); margin-inline:auto; }

/* fit wrapper — scale a fixed-width print sheet to the viewport on screen
   (shell.js sets the sheet transform + wrapper height); print resets it. */
.mtt-fit { width:100%; overflow:hidden; margin:0 auto; }

/* header row above a print sheet (breadcrumb + print CTA) */
.mtt-sheethead { display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; max-width:var(--content-max); margin:0 auto; padding:4px var(--gutter) 10px; }
.mtt-sheethead .mtt-breadcrumb { padding:0; }

/* ============================================================
   TYPOGRAPHY DEVICES
   ============================================================ */
.mtt-eyebrow { font:var(--fw-bold) 11px/1 var(--font-mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--clay); }
.mtt-h1 { font:var(--fw-bold) var(--fs-h1)/.9 var(--font-display); text-transform:uppercase; letter-spacing:.8px; color:var(--ink); margin:0; }
.mtt-h2 {  /* SectionHeader: 2px ink underline */
  font:var(--fw-bold) var(--fs-h2)/1 var(--font-display); text-transform:uppercase; letter-spacing:.6px;
  color:var(--ink); border-bottom:2px solid var(--ink); padding:0 0 3px; margin:0 0 8px;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.mtt-h2 small { font:var(--fw-semibold) 11px/1 var(--font-display); text-transform:none; letter-spacing:.2px; color:var(--mut); }
.mtt-lead { font:var(--fw-regular) var(--fs-lead)/1.5 var(--font-body); color:var(--ink-2); }
.mtt-mono { font-family:var(--font-mono); }
.mtt-muted { color:var(--mut); }

/* ============================================================
   HERO
   ============================================================ */
.mtt-hero { padding:8px var(--gutter) 16px; }
.mtt-hero__kicker { font:var(--fw-bold) 11px/1 var(--font-mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--clay); margin-bottom:9px; }
.mtt-hero__title { font:var(--fw-bold) 38px/.88 var(--font-display); text-transform:uppercase; letter-spacing:.3px; margin:0; color:var(--ink); }
.mtt-hero__title .art { color:var(--clay); }
.mtt-hero__body { font:var(--fw-regular) 14px/1.45 var(--font-body); color:var(--ink-2); margin-top:12px; max-width:40ch; }
@media (min-width:900px){ .mtt-hero__title { font-size:44px; } }

/* ============================================================
   SECTION LABEL
   ============================================================ */
.mtt-section-label {
  display:flex; justify-content:space-between; align-items:baseline; padding:8px var(--gutter) 10px;
  font:var(--fw-bold) 12px/1 var(--font-display); text-transform:uppercase; letter-spacing:.8px; color:var(--mut);
}
.mtt-section-label span:last-child { font:var(--fw-medium) 11px/1 var(--font-mono); }

/* ============================================================
   TILE GRID
   ============================================================ */
.mtt-tilegrid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:0 var(--gutter); }
@media (min-width:600px){ .mtt-tilegrid { grid-template-columns:repeat(3,1fr); } }
.mtt-tile {
  background:var(--paper); border:1.5px solid var(--hair); border-radius:14px; padding:14px;
  display:flex; flex-direction:column; gap:9px; box-shadow:var(--shadow-card);
  text-align:left; text-decoration:none; color:inherit; cursor:pointer;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.mtt-tile:hover { transform:var(--hover-lift); box-shadow:var(--shadow-raise); color:inherit; }
.mtt-tile__icon {
  width:38px; height:38px; border-radius:11px;
  background:color-mix(in srgb,var(--tone) 15%,#fff); color:var(--tone);
  display:flex; align-items:center; justify-content:center;
}
.mtt-tile__icon svg { width:20px; height:20px; }
.mtt-tile__name { font:var(--fw-bold) 16px/1 var(--font-display); text-transform:uppercase; letter-spacing:.2px; color:var(--ink); }
.mtt-tile__count { font:var(--fw-regular) 11px/1 var(--font-mono); color:var(--mut); }
.mtt-tile__count b { color:var(--ink); font-size:16px; }

/* ============================================================
   LIST ROW / GUIDE ROW / POST ROW
   ============================================================ */
.mtt-listrow {
  display:flex; align-items:center; gap:12px; width:100%;
  background:var(--paper); border:1.5px solid var(--hair); border-radius:12px;
  padding:11px 13px; margin-bottom:9px; text-align:left; text-decoration:none; color:inherit; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out);
}
.mtt-listrow:hover { background:var(--desk-2); color:inherit; }
.mtt-listrow__dot { width:9px; height:9px; border-radius:50%; background:var(--tone); flex:none; }
.mtt-listrow__title { flex:1; font:var(--fw-semibold) 13.5px/1.2 var(--font-body); color:var(--ink); }
.mtt-listrow__meta { font:var(--fw-regular) 10.5px/1 var(--font-mono); color:var(--mut); }

.mtt-guiderow {
  display:flex; align-items:center; gap:13px; width:100%;
  background:var(--paper); border:1.5px solid var(--hair); border-left:5px solid var(--tone); border-radius:12px;
  padding:13px 14px; margin-bottom:10px; text-align:left; text-decoration:none; color:inherit; cursor:pointer;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.mtt-guiderow:hover { transform:var(--hover-lift); box-shadow:var(--shadow-raise); color:inherit; }
.mtt-guiderow__main { flex:1; }
.mtt-guiderow__name { display:block; font:var(--fw-bold) 18px/1 var(--font-display); text-transform:uppercase; letter-spacing:.2px; color:var(--ink); }
.mtt-guiderow__meta { display:block; font:var(--fw-regular) 10.5px/1 var(--font-mono); color:var(--mut); margin-top:5px; }
.mtt-guiderow__arrow {
  width:30px; height:30px; border-radius:50%; border:1.5px solid var(--tone); color:var(--tone);
  display:flex; align-items:center; justify-content:center; font:var(--fw-bold) 14px/1 var(--font-body); flex:none;
}

.mtt-postrow {
  display:flex; gap:13px; align-items:flex-start; width:100%;
  padding:12px var(--gutter); border-bottom:1px solid var(--hair);
  text-align:left; text-decoration:none; color:inherit; cursor:pointer;
}
.mtt-postrow:hover { background:var(--desk-2); color:inherit; }
.mtt-postrow__date { width:40px; flex:none; text-align:center; font-family:var(--font-mono); line-height:1; }
.mtt-postrow__day { display:block; font-weight:700; font-size:19px; color:var(--ink); }
.mtt-postrow__mon { display:block; font-size:9px; text-transform:uppercase; letter-spacing:1px; color:var(--mut); margin-top:2px; }
.mtt-postrow__tag { display:inline-block; font:var(--fw-bold) 9px/1 var(--font-display); text-transform:uppercase; letter-spacing:.5px; color:#fff; background:var(--tone); padding:2px 8px; border-radius:var(--radius-pill); margin-bottom:5px; }
.mtt-postrow__title { display:block; font:var(--fw-bold) 16px/1.02 var(--font-display); text-transform:uppercase; letter-spacing:.2px; color:var(--ink); }

/* FeaturedPost */
.mtt-featured {
  display:block; margin:0 var(--gutter) 14px; background:var(--paper);
  border:1.5px solid var(--hair); border-top:3px solid var(--tone); border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-card); text-align:left; text-decoration:none; color:inherit; cursor:pointer;
}
.mtt-featured:hover { color:inherit; box-shadow:var(--shadow-raise); }
.mtt-featured__img { display:flex; height:120px; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg,var(--cream-2) 0 14px,var(--cream) 14px 28px);
  color:var(--mut-2); font:var(--fw-regular) 10px/1 var(--font-mono); letter-spacing:1px; text-transform:uppercase; }
.mtt-featured__body { display:block; padding:14px 15px 15px; }
.mtt-featured__kicker { display:block; font:var(--fw-regular) 10px/1 var(--font-mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--tone); }
.mtt-featured__title { display:block; font:var(--fw-bold) 22px/.98 var(--font-display); text-transform:uppercase; letter-spacing:.2px; margin:7px 0; color:var(--ink); }
.mtt-featured__meta { display:block; font:var(--fw-regular) 10.5px/1 var(--font-mono); color:var(--mut); }

/* ============================================================
   CHIPS  (value tags + filter chips)
   ============================================================ */
.mtt-chip { font:var(--fw-bold) 13px/1.35 var(--font-display); letter-spacing:.3px; padding:2px 10px;
  border-radius:var(--radius-pill); display:inline-block; min-width:30px; text-align:center; background:var(--tone); color:#fff; }
.mtt-chip--soft { background:color-mix(in srgb,var(--tone) 14%,#fff); color:var(--tone); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 32%,#fff); }
.mtt-chip--sm { font-size:11px; padding:1px 8px; min-width:26px; }
.mtt-chippath { display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; }
.mtt-chippath > span:not(.mtt-chip)::before { content:"▸"; color:var(--mut); font-weight:700; }

.mtt-filterchips { display:flex; gap:8px; flex-wrap:wrap; padding:2px var(--gutter) 14px; }
.mtt-filterchip { font:var(--fw-bold) 12px/1 var(--font-display); text-transform:uppercase; letter-spacing:.4px;
  color:var(--ink-2); background:var(--paper); border:1.5px solid var(--hair); border-radius:var(--radius-pill);
  padding:5px 13px; cursor:pointer; }
.mtt-filterchip.is-on { color:#fff; background:var(--ink); border-color:var(--ink); }

/* ============================================================
   CARD  (accent-top)
   ============================================================ */
.mtt-card { background:var(--paper); border:1.5px solid var(--hair); border-top:3px solid var(--tone);
  border-radius:var(--radius-sm); padding:10px 12px 12px; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:3px; }
.mtt-card--interactive { cursor:pointer; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.mtt-card--interactive:hover { transform:var(--hover-lift); box-shadow:var(--shadow-raise); }
.mtt-card__title { font:var(--fw-bold) 14px/1.05 var(--font-display); text-transform:uppercase; letter-spacing:.3px; color:var(--tone); }
.mtt-card__sub { font:italic var(--fw-regular) 9.5px/1.2 var(--font-body); color:var(--mut); }
.mtt-card__body { font:var(--fw-regular) 11px/1.4 var(--font-body); color:var(--ink-2); }

/* ============================================================
   BUTTON
   ============================================================ */
.mtt-btn { font:var(--fw-bold) 14px/1 var(--font-display); text-transform:uppercase; letter-spacing:.7px;
  padding:9px 20px; border-radius:var(--radius-sm); cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  border:1.5px solid transparent; background:var(--clay); color:#fff; box-shadow:var(--shadow-card);
  white-space:nowrap; user-select:none; text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.mtt-btn:hover { transform:var(--hover-lift); filter:brightness(.94); color:#fff; }
.mtt-btn:active { transform:var(--press); }
.mtt-btn--ink { background:var(--ink); }
.mtt-btn--outline { background:transparent; color:var(--clay); border-color:var(--clay); box-shadow:none; }
.mtt-btn--outline:hover { color:var(--clay-deep); background:var(--clay-soft); }
.mtt-btn--ghost { background:transparent; color:var(--ink-2); box-shadow:none; }
.mtt-btn--ghost:hover { background:var(--desk-2); color:var(--ink); filter:none; }
.mtt-btn--sm { font-size:12.5px; padding:7px 14px; }
.mtt-btn--lg { font-size:16px; padding:12px 26px; }

/* ============================================================
   NOTICE  (info/success/warning/danger)
   ============================================================ */
.mtt-notice { display:flex; gap:11px; margin:0 var(--gutter); border-radius:var(--radius-sm); padding:12px 14px;
  --nc:var(--info); --nbg:var(--info-soft); background:var(--nbg); border:1px solid var(--nc); }
.mtt-notice--success { --nc:var(--success); --nbg:var(--success-soft); }
.mtt-notice--warning { --nc:var(--warning); --nbg:var(--warning-soft); }
.mtt-notice--danger  { --nc:var(--danger);  --nbg:var(--danger-soft); }
.mtt-notice__icon { color:var(--nc); flex:none; margin-top:1px; }
.mtt-notice__icon svg { width:18px; height:18px; }
.mtt-notice__title { font:var(--fw-bold) 12px/1.2 var(--font-display); text-transform:uppercase; letter-spacing:.4px; color:var(--nc); margin-bottom:4px; }
.mtt-notice__body { font:var(--fw-regular) 13px/1.45 var(--font-body); color:var(--ink-2); }

/* ============================================================
   METRIC / FACTS
   ============================================================ */
.mtt-metric { background:var(--paper); border:1.5px solid var(--hair); border-top:3px solid var(--tone);
  border-radius:var(--radius-md); padding:14px 16px; }
.mtt-metric__value { font:var(--fw-bold) 30px/1 var(--font-mono); color:var(--ink); }
.mtt-metric__label { font:var(--fw-semibold) 10.5px/1 var(--font-display); text-transform:uppercase; letter-spacing:.5px; color:var(--mut); margin-top:5px; }

.mtt-facts { display:flex; gap:9px; }
.mtt-fact { flex:1; background:var(--cream-2); border-radius:8px; padding:9px 11px; }
.mtt-fact__v { font:var(--fw-bold) 17px/1 var(--font-mono); color:var(--ink); }
.mtt-fact__l { font:var(--fw-semibold) 9px/1 var(--font-display); text-transform:uppercase; letter-spacing:.5px; color:var(--mut); margin-top:2px; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.mtt-empty { text-align:center; padding:40px 30px; }
.mtt-empty__icon { width:56px; height:56px; border-radius:16px; background:var(--desk-2); color:var(--mut);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; }
.mtt-empty__title { font:var(--fw-bold) 20px/1 var(--font-display); text-transform:uppercase; letter-spacing:.3px; margin-bottom:8px; color:var(--ink); }
.mtt-empty__body { font:var(--fw-regular) 14px/1.5 var(--font-body); color:var(--mut); max-width:34ch; margin:0 auto 16px; }

/* ============================================================
   MANIFESTO / PILLARS  (about voice)
   ============================================================ */
.mtt-manifesto { margin:4px var(--gutter) 0; background:var(--ink); color:#fff; border-radius:16px; padding:24px 20px; }
.mtt-manifesto__kicker { font:var(--fw-regular) 10px/1 var(--font-mono); letter-spacing:2px; text-transform:uppercase; color:var(--sun); margin-bottom:12px; }
.mtt-manifesto__title { font:var(--fw-bold) 38px/.9 var(--font-display); text-transform:uppercase; letter-spacing:.3px; margin:0 0 14px; }
.mtt-manifesto__body { font:var(--fw-regular) 14.5px/1.55 var(--font-body); color:#d9d4c9; }

.mtt-pillars { padding:16px var(--gutter) 0; }
.mtt-pillar { display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--hair); }
.mtt-pillar__num { width:30px; flex:none; font:var(--fw-bold) 24px/1 var(--font-display); color:var(--tone); }
.mtt-pillar__head { display:block; font:var(--fw-bold) 17px/1 var(--font-display); text-transform:uppercase; letter-spacing:.3px; color:var(--ink); }
.mtt-pillar__body { display:block; font:var(--fw-regular) 13px/1.45 var(--font-body); color:var(--ink-2); margin-top:4px; }

/* ============================================================
   SEARCH BAR
   ============================================================ */
.mtt-searchbar { display:flex; align-items:center; gap:10px; background:var(--paper); border:1.5px solid var(--hair);
  border-radius:var(--radius-pill); padding:10px 16px; margin:0 var(--gutter); }
.mtt-searchbar:focus-within { border-color:var(--clay); }
.mtt-searchbar svg { width:16px; height:16px; color:var(--mut); flex:none; }
.mtt-searchbar input { flex:1; border:0; outline:0; background:transparent; font:var(--fw-regular) 14px/1 var(--font-body); color:var(--ink); }

/* ============================================================
   TABS
   ============================================================ */
.mtt-tabs { display:flex; gap:4px; border-bottom:1.5px solid var(--hair); padding:0 var(--gutter); overflow-x:auto; }
.mtt-tab { background:none; border:0; cursor:pointer; padding:11px 6px; margin-bottom:-1.5px;
  font:var(--fw-bold) 13px/1 var(--font-display); text-transform:uppercase; letter-spacing:.4px;
  color:var(--mut); border-bottom:2.5px solid transparent; white-space:nowrap; }
.mtt-tab.is-on { color:var(--clay); border-bottom-color:var(--clay); }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.mtt-breadcrumb { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0 var(--gutter) 8px;
  font:var(--fw-semibold) 12px/1 var(--font-display); text-transform:uppercase; letter-spacing:.4px; }
.mtt-breadcrumb a { color:var(--mut); }
.mtt-breadcrumb a:hover { color:var(--clay); }
.mtt-breadcrumb__sep { color:var(--mut-2); }
.mtt-breadcrumb__cur { color:var(--ink); }

/* ============================================================
   CALLOUT  (cream note box — "regras de ouro")
   ============================================================ */
.mtt-callout { background:var(--cream); border-left:3px solid var(--tone); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:10px 14px; }
.mtt-callout__title { font:var(--fw-bold) 12px/1.1 var(--font-display); text-transform:uppercase; letter-spacing:.5px; color:var(--tone); margin-bottom:5px; }
.mtt-callout__body { font:var(--fw-regular) 12.5px/1.5 var(--font-body); color:var(--ink-2); }
.mtt-rulelist { margin:0; padding:0; list-style:none; }
.mtt-rulelist li { position:relative; padding-left:14px; margin:2px 0; line-height:1.5; }
.mtt-rulelist li::before { content:"▸"; position:absolute; left:0; color:var(--mut); }

/* ============================================================
   DATA TABLE
   ============================================================ */
.mtt-table { width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:13px; }
.mtt-table th { background:var(--cream-2); font:var(--fw-bold) 11px/1.1 var(--font-display); text-transform:uppercase;
  letter-spacing:.5px; color:var(--ink); text-align:left; padding:7px 10px; border-bottom:2px solid var(--ink); }
.mtt-table td { padding:7px 10px; border-bottom:1px solid var(--hair); color:var(--ink-2); }
.mtt-table tr:hover td { background:var(--desk-2); }

/* ============================================================
   PROSE  (article body — ported from ui_kits/app/app.html)
   ============================================================ */
.prose { color:var(--ink-2); }
.prose p { font:var(--fw-regular) 15px/1.65 var(--font-body); color:var(--ink-2); margin:0 0 16px; }
.prose p b, .prose strong { color:var(--ink); }
.prose h2, .prose h3 { font:var(--fw-bold) 20px/1 var(--font-display); text-transform:uppercase; letter-spacing:.3px;
  color:var(--ink); border-bottom:2px solid var(--ink); padding-bottom:4px; margin:26px 0 14px; }
.prose h2 { font-size:22px; }
.prose blockquote { margin:24px 0; padding:4px 0 4px 18px; border-left:4px solid var(--clay);
  font:var(--fw-semibold) 20px/1.2 var(--font-display); text-transform:uppercase; letter-spacing:.3px; color:var(--ink); }
.prose a { color:var(--clay); text-decoration:underline; text-underline-offset:2px; }
.prose ul, .prose ol { padding-left:20px; margin:0 0 16px; }
.prose li { font:var(--fw-regular) 15px/1.6 var(--font-body); margin:4px 0; }
.prose code { font-family:var(--font-mono); font-size:.9em; background:var(--cream-2); padding:.12em .4em; border-radius:var(--radius-xs); color:var(--clay-deep); }
.prose pre { background:var(--ink); color:#f3f0e8; padding:14px 16px; border-radius:var(--radius-md); overflow:auto; }
.prose pre code { background:none; color:inherit; padding:0; }
.prose img { border-radius:var(--radius-md); border:1.5px solid var(--hair); margin:6px 0 18px; }
.prose figure { margin:6px 0 18px; }
.prose figcaption { font:var(--fw-regular) 11px/1.4 var(--font-mono); color:var(--mut); text-transform:uppercase; letter-spacing:1px; margin-top:6px; }

/* ============================================================
   PRINT — drop the app chrome so print sheets stay clean
   ============================================================ */
@media print {
  .mtt-mega, .mtt-noprint { display:none !important; }
  body { padding:0 !important; background:#fff !important; }
  .mtt-fit { height:auto !important; overflow:visible !important; }
  .mtt-fit .sheet { transform:none !important; }
}