/* MOTUS — página inicial: só leva a cada app. Mesma base visual dos dois apps (docs/DESIGN_SYSTEM.md). */
@font-face {
  font-family: "Archivo"; src: url("/vendor/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"), url("/vendor/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
:root { --ink: #16181B; --ink-2: #23262B; --paper: #F2F3EE; --muted: #5C6159; --training: #34C46A; --coach: #86E01E;
  --heat-2: #6CCB8B; --heat-5: #F2D43A; --heat-8: #E4612A; --pain: #7444D6; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 17px/1.5 "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; min-height: 100vh; display: flex; align-items: center; }
main { width: 100%; max-width: 920px; margin: 0 auto; padding: 48px 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; font-stretch: 85%; letter-spacing: .03em; margin: 0 0 28px; }
.brand .logo { width: 44px; height: 44px; }
h1 { font-size: clamp(44px, 8vw, 76px); line-height: .95; margin: 0 0 12px; font-weight: 800; font-stretch: 72%; }
.sub { color: #B9BDB3; margin: 0 0 34px; max-width: 46ch; }
.heat { display: flex; gap: 4px; margin: 0 0 30px; }
.heat span { height: 8px; flex: 1; border-radius: 999px; }
.heat span:nth-child(1) { background: var(--heat-2); } .heat span:nth-child(2) { background: var(--heat-5); }
.heat span:nth-child(3) { background: var(--heat-8); } .heat span:nth-child(4) { background: var(--pain); } .heat span:nth-child(5) { background: var(--training); }
.apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.app { display: grid; gap: 8px; padding: 26px; min-height: 190px; border-radius: 20px; background: var(--paper); color: var(--ink); text-decoration: none; border: 3px solid var(--paper); align-content: start; }
.app.coach { background: var(--ink-2); color: var(--paper); border-color: var(--ink-2); }
.app:hover, .app:focus-visible { border-color: var(--training); outline: none; }
.kicker { font-size: 14px; color: var(--muted); font-weight: 700; }
.coach .kicker { color: #A3A79E; }
.name { font-size: 34px; font-weight: 800; font-stretch: 78%; line-height: 1; }
.training .name { color: var(--ink); }
.coach .name { color: var(--coach); }
.desc { color: #434840; }
.coach .desc { color: #C9CCC3; }