/* Netiv.AI: site comercial para transportadoras (v4, sistema visual rígido).
   Regras e razões em 07-Site/06-SISTEMA-VISUAL.md. Em resumo:
   - tudo vem de tokens em :root (cores, tipografia, espaço, raios, controles, ícones, proporções);
   - fora do bloco de tokens, font-size, font-weight, line-height e letter-spacing só aparecem como var(--...), e só no "Mapa tipográfico";
   - um único padrão de botão (altura, padding, raio, fonte, ícone); campo de busca, filtros e cápsula do menu usam o mesmo;
   - espaços na escala de base 8; um padding de seção, um padding de cartão, um raio de cartão, um gap de grade.
   Tipografia: Google Sans (SIL OFL 1.1), hospedada em fonts/ (subconjunto latino, pesos 400 a 500). */

@font-face {
  font-family: "Google Sans"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("../fonts/google-sans-latin-400-500.woff2") format("woff2");
}

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root {
  color-scheme: dark;

  /* cores */
  --ground: #000;
  --ink: #f5f5f5;
  --body: #e0e0e0;
  --muted: #acacac;
  --caption: #8f8f8f;
  --accent: #1f6bff;        /* azul: texto branco 4,56:1; sobre #000 4,61:1 (AA) */
  --accent-hover: #1558e6;  /* hover azul de TODOS os controles: texto branco 6,0:1 */
  --accent-text: #5b9bff;   /* azul claro para texto e ícones sobre #000: 7,6:1 */
  --action: #1d1d1d;        /* botão secundário (cinza escuro) */
  --card: #141414;
  --card-2: #0e0e0e;
  --card-hover: #1b1b1b;
  --line: #262626;
  --glass-bar: rgba(255, 255, 255, 0.07);

  /* tipografia: 6 tamanhos, 2 pesos; entrelinha e espaçamento entre letras fixos por nível */
  --f: "Google Sans", "Product Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fw-r: 400;
  --fw-m: 500;
  --fs-1: 72px; --lh-1: 76px; --ls-1: -0.03em;  /* 1 display */
  --fs-2: 48px; --lh-2: 54px; --ls-2: -0.02em;  /* 2 título */
  --fs-3: 32px; --lh-3: 40px; --ls-3: -0.01em;  /* 3 destaque */
  --fs-4: 24px; --lh-4: 32px; --ls-4: 0em;      /* 4 subtítulo */
  --fs-5: 16px; --lh-5: 26px; --ls-5: 0em;      /* 5 texto e botões */
  --fs-6: 14px; --lh-6: 20px; --ls-6: 0em;      /* 6 apoio */
  --lh-0: 1;                                    /* marca gigante do rodapé: o tamanho é calculado para ocupar a largura do conteúdo */

  /* espaço: base 8 */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --sec: 128px;          /* padding vertical de toda seção */
  --nav-h: 96px;         /* altura do cabeçalho fixo */
  --top: 160px;          /* respiro entre o topo da página e o primeiro conteúdo */
  --card-pad: 24px;      /* padding interno de todo cartão */
  --gap: 24px;           /* gap de toda grade */
  --wrap: 1200px;
  --pad: max(24px, calc((100vw - 1200px) / 2));  /* margem lateral: o conteúdo mede no máximo 1200 px */

  /* raios */
  --r-sm: 12px; --r-card: 24px; --r-pill: 999px;

  /* controles (botão, campo de busca, filtro, item da cápsula do menu) */
  --ctl-h: 48px; --ctl-px: 24px; --ctl-gap: 8px;
  --icon-s: 20px;                    /* tamanho do ícone */
  --tile-s: 32px; --tile-l: 48px;    /* caixas de ícone */

  /* proporções de imagem */
  --ar-wide: 16 / 9; --ar-photo: 4 / 3; --ar-square: 1 / 1;

  /* movimento */
  --t: 0.18s ease-out;
  --ease-s: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-m: cubic-bezier(0.4, 0, 0.2, 1);
  --vh: 1vh;
  /* cores das maquetes (celular, janelas) e do texto */
  --dev-surface: #1c1c1e;
  --dev-bubble: #262629;
  --dev-muted: #8e8e93;
  --dev-body: #1b1b1d;
  --dev-edge: #2c2c2e;
  --dev-line: #38383a;
  --dev-text: #e5e5ea;
  --panel: #090909;
  --soft: #c9c9c9;
  --prose: #e6e6e6;
  --code: #cfcfcf;
  --accent-soft: #8db8ff;
  --accent-hover-text: #9cc2ff;
}
@supports (height: 100svh) { :root { --vh: 1svh; } }
@media (max-width: 767px), (max-height: 700px) {  /* celular e telas baixas (paisagem): escala menor */
  :root {
    --fs-1: 44px; --lh-1: 48px;
    --fs-2: 32px; --lh-2: 38px;
    --fs-3: 24px; --lh-3: 32px;
    --fs-4: 20px; --lh-4: 28px;
    --sec: 64px; --top: 128px; --nav-h: 64px;
  }
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--f); overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, blockquote, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
svg { display: block; flex: none; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
picture { display: block; }
small, b, strong, cite, i, em { font: inherit; font-style: normal; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: var(--s2); top: -64px; z-index: 200; display: flex; align-items: center; min-height: 44px; background: var(--accent); color: #fff; padding: 0 var(--s2); border-radius: var(--r-pill); }
.skip:focus { top: var(--s2); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
::selection { background: var(--accent); color: #fff; }
.measure { width: 100%; padding-inline: var(--pad); }
main { display: block; }
main:focus { outline: none; }
[id] { scroll-margin-top: calc(var(--nav-h) + var(--s2)); }
.ic-s { width: var(--icon-s); height: var(--icon-s); }
.tile { display: flex; flex: none; align-items: center; justify-content: center; width: var(--tile-s); height: var(--tile-s); border-radius: var(--r-sm); background: var(--accent); color: #fff; }
.tile-l { width: var(--tile-l); height: var(--tile-l); }
.tile-dim { background: var(--line); color: var(--ink); }
.tile svg { width: var(--icon-s); height: var(--icon-s); }

/* =====================================================================
   3. CONTROLES: um padrão só. Variantes só de cor.
   ===================================================================== */
.btn, .nav-link, .filter, .field {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ctl-gap);
  height: var(--ctl-h); padding: 0 var(--ctl-px); border: 0; border-radius: var(--r-pill);
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--t), color var(--t);
}
.btn svg, .nav-link svg, .filter svg, .field svg { width: var(--icon-s); height: var(--icon-s); }
.btn-p { background: var(--accent); color: #fff; }
.btn-s { background: var(--action); color: var(--ink); }
.btn-i { width: var(--ctl-h); padding: 0; }
.btn:hover, .nav-link:hover, .filter:hover, .field:hover, .field:focus-within { background: var(--accent-hover); color: #fff; }
.nav-link { background: transparent; color: var(--body); }
.filter { background: var(--action); color: var(--muted); }
.filter.on { background: var(--ink); color: #000; }
.filter.on:hover { background: var(--accent-hover); color: #fff; }
.field { justify-content: flex-start; width: 320px; background: var(--action); color: var(--muted); cursor: text; }
.field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: inherit; }
.field input::placeholder { color: var(--caption); }
.field:hover input::placeholder, .field:focus-within input::placeholder { color: rgba(255, 255, 255, 0.72); }

/* =====================================================================
   4. NAVEGAÇÃO (links simples, sem painéis)
   ===================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h); padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.92) 55%, transparent);
  transition: opacity 0.3s ease-out;
}
.nav.off { opacity: 0; pointer-events: none; }
.nav-brand, .f-logo { display: inline-flex; flex: none; align-items: center; min-height: 44px; color: var(--ink); }
.nav-pill {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; padding: var(--s1); border-radius: var(--r-pill);
  background: var(--glass-bar); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.nav-link[aria-current="page"] { background: var(--ink); color: #000; }
.nav-link[aria-current="page"]:hover { background: var(--accent-hover); color: #fff; }
.nav-right { display: flex; align-items: center; gap: var(--s1); flex: none; }
.nav-burger { display: none; background: var(--action); color: var(--ink); }

/* menu do celular: folha de tela cheia, links simples */
.mmenu { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.92); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); }
.mmenu[hidden] { display: none; }
.mmenu.in { animation: menu-in 0.18s ease-out both; }
.mmenu.out { animation: menu-out 0.18s ease-out both; }
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-out { from { opacity: 1; } to { opacity: 0; } }
.mmenu-bar { display: flex; flex: none; align-items: center; justify-content: space-between; height: calc(var(--ctl-h) + var(--s2)); padding: 0 var(--s2); }
.mmenu-list { display: flex; flex: 1; flex-direction: column; padding: var(--s2) var(--s2) 0; overflow-y: auto; }
.mm-link { display: flex; align-items: center; justify-content: space-between; padding: var(--s2) var(--s1); margin: 0 calc(var(--s1) * -1); border-radius: var(--r-sm); color: var(--ink); transition: background-color var(--t), color var(--t); }
.mm-link:hover { background: var(--accent-hover); color: #fff; }
.mm-link[aria-current="page"] { color: var(--accent-text); }
.mm-link[aria-current="page"]:hover { color: #fff; }
.mmenu-foot { flex: none; padding: var(--s2) var(--s2) max(var(--s3), env(safe-area-inset-bottom)); }
.mmenu-foot .btn { width: 100%; }

/* =====================================================================
   5. ABERTURA (300vh)
   ===================================================================== */
.hero { position: relative; height: calc(300 * var(--vh)); isolation: isolate; }
.hero-stage { position: sticky; top: 0; height: calc(100 * var(--vh)); width: 100%; overflow: hidden; background: var(--ground); }
.hero-cards { position: absolute; inset: 0; }
.hcard {
  position: absolute; top: 0; left: 0; height: var(--s); width: calc(var(--s) * 0.83); border-radius: var(--r-sm);
  background: var(--card) center / cover no-repeat; opacity: 0; will-change: transform, opacity; backface-visibility: hidden;
}
.hcard:hover { z-index: 20 !important; }
.hcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.35)); pointer-events: none; }
.hero-center { position: absolute; top: 50%; left: 50%; z-index: 30; width: min(max(72vmin, 400px), 92vw); transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.hero-block { will-change: opacity, transform; }
.hero-cta { margin-top: var(--s4); display: flex; justify-content: center; }
.hero-cta .btn { pointer-events: auto; }
.hero-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); margin-top: var(--s3); color: var(--caption); }
.hero-tiles { display: flex; align-items: center; gap: var(--s1); }
.hero-tiles .tile { background: var(--action); color: var(--ink); }
.hero-bar { position: absolute; right: var(--pad); bottom: var(--s4); z-index: 20; display: flex; align-items: center; gap: var(--s2); color: var(--caption); white-space: nowrap; will-change: opacity; }
.hero-mk { color: var(--muted); }
.hero-mk + .hero-mk::before { content: "·"; margin-right: var(--s2); color: var(--caption); }
.hero-bar-m { display: none; }
.hero-works { display: flex; align-items: center; gap: var(--s2); }
.manifesto { position: absolute; top: 50%; left: 50%; z-index: 30; width: min(832px, calc(100vw - 48px)); text-align: center; pointer-events: none; color: var(--ink); transform: translate(-50%, calc(-50% + var(--my, 34px))); will-change: opacity, transform; }
.mw { display: inline-block; white-space: pre; }
.mc { opacity: 0.13; transition: opacity 0.18s linear; }
.mc.on { opacity: 1; }

/* =====================================================================
   6. CENAS PRESAS (A: como funciona, B: para quem é, C: etapas)
   ===================================================================== */
.rest { position: relative; z-index: 3; margin-top: calc(-170 * var(--vh)); pointer-events: none; }
.rest > *, .rest section, .rest footer { pointer-events: auto; }
.wrapA { transform-origin: 50% 12%; }
.scene { position: relative; }
.sceneA { height: calc(480 * var(--vh)); }
.sceneB { height: calc(380 * var(--vh)); }
.sceneC { height: calc(840 * var(--vh)); }
.mark { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-margin-top: 0; }
.stage { position: sticky; top: 0; height: calc(100 * var(--vh)); display: flex; align-items: center; justify-content: space-between; overflow: hidden; background: var(--ground); padding: var(--nav-h) var(--pad) 0; }
.txt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.txt h2 { color: var(--ink); }
.txt p { color: var(--muted); }
.txt .btn { margin-top: var(--s1); }
.col-l { display: flex; flex-direction: column; gap: var(--s5); width: 480px; flex: none; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.chip { display: inline-flex; align-items: center; gap: var(--s1); height: var(--tile-s); padding: 0 var(--s2) 0 var(--s1); border-radius: var(--r-pill); background: var(--action); color: var(--muted); }
.chip svg { width: var(--icon-s); height: var(--icon-s); color: var(--accent-text); }

/* ---- cena A: celular ---- */
.col-r { position: relative; width: 520px; height: 576px; flex: none; }
.phone { position: absolute; left: 50%; top: 0; width: 336px; height: 100%; margin-left: -168px; padding: var(--s1) var(--s1) 0; border-radius: var(--r-card) var(--r-card) 0 0; background: var(--dev-body); box-shadow: 0 0 0 1px var(--dev-edge) inset; overflow: hidden; }
.screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--r-sm) var(--r-sm) 0 0; background: #000; }
.phone-fade { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 128px; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55) 45%, #000 92%); }
.lock { position: absolute; inset: 0; background: radial-gradient(ellipse 120% 40% at 50% 62%, rgba(31, 107, 255, 0.55), rgba(31, 107, 255, 0) 70%), linear-gradient(180deg, #0b1330 0%, #1a2a6c 40%, #112250 62%, #05080f 100%); color: #fff; }
.lock::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.35)); }
.lock > * { position: relative; z-index: 1; }
.sc-status { position: relative; display: flex; flex: none; align-items: center; justify-content: space-between; height: var(--s5); padding: 0 var(--s3); color: #fff; }
.sb { width: var(--s6); height: var(--s2); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 13'%3E%3Cg fill='%23fff'%3E%3Crect x='0' y='7.5' width='3' height='5' rx='.8'/%3E%3Crect x='5' y='5' width='3' height='7.5' rx='.8'/%3E%3Crect x='10' y='2.5' width='3' height='10' rx='.8'/%3E%3Crect x='15' y='0' width='3' height='12.5' rx='.8'/%3E%3Ccircle cx='31' cy='10.4' r='1.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M25.2 5.4a8.2 8.2 0 0 1 11.6 0M27.7 8a4.6 4.6 0 0 1 6.6 0'/%3E%3Crect x='43' y='.8' width='22' height='11.4' rx='3.4' opacity='.45' stroke-width='1'/%3E%3C/g%3E%3Crect x='44.7' y='2.5' width='18.6' height='8' rx='2' fill='%23fff'/%3E%3Crect x='66' y='4.3' width='1.6' height='4.4' rx='.8' fill='%23fff' opacity='.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.lock-date { margin-top: var(--s2); text-align: center; opacity: 0.95; }
.lock-time { text-align: center; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); }
.notifs { position: absolute; left: var(--s2); right: var(--s2); top: 176px; height: 336px; --notif-step: 80px; -webkit-mask-image: linear-gradient(#000 62%, transparent 94%); mask-image: linear-gradient(#000 62%, transparent 94%); }
.notif {
  position: absolute; top: 0; left: 0; width: 100%; height: 72px; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s2); border-radius: var(--r-card);
  background: rgba(30, 28, 34, 0.55); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  transform-origin: top;
}
.n-b { flex: 1; min-width: 0; }
.n-h { display: flex; justify-content: space-between; }
.n-h span { opacity: 0.7; }
.n-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.82; }
.screens { position: absolute; inset: 0; z-index: 3; transition: opacity 0.45s var(--ease-m); }
.screens.off { opacity: 0; pointer-events: none; }
.sc { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: #000; border-radius: inherit; }
.sc-bar { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--s1); padding: 0 var(--s2) var(--s2); }
.sc-bar .tile { border-radius: var(--r-pill); background: var(--dev-surface); color: var(--accent-text); }
.sc-who { display: flex; align-items: center; gap: var(--s1); color: #fff; }
.sc-who .tile { background: var(--ink); color: #000; }
.sc-body { display: flex; flex: 1; flex-direction: column; gap: var(--s1); padding: 0 var(--s2); }
.sc-ts { align-self: center; color: var(--dev-muted); }
.m-ap { transition: opacity 0.4s var(--ease-s), translate 0.4s var(--ease-s); }
.hid { opacity: 0; translate: 0 var(--s1); }
.im-m { max-width: 232px; padding: var(--s1) var(--s2); border-radius: var(--r-sm); color: #fff; }
.im-out { align-self: flex-end; background: var(--accent); }
.im-in { align-self: flex-start; background: var(--dev-bubble); }
.im-del { align-self: flex-end; color: var(--dev-muted); }
.im-typing { display: flex; gap: var(--s1); padding: var(--s2); }
.im-typing i { width: var(--s1); height: var(--s1); border-radius: var(--r-pill); background: var(--dev-muted); animation: dots 1.2s infinite; }
.im-typing i:nth-child(2) { animation-delay: 0.15s; } .im-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dots { 0%, 80%, 100% { opacity: 0.35; } 40% { opacity: 1; } }
.sc-input { display: flex; flex: none; align-items: center; gap: var(--s1); padding: 0 var(--s2) var(--s3); }
.sc-input .tile { border-radius: var(--r-pill); background: var(--dev-surface); color: var(--dev-muted); }
.sc-field { flex: 1; display: flex; align-items: center; height: var(--tile-s); padding: 0 var(--s2); border-radius: var(--r-pill); background: var(--dev-surface); color: var(--dev-muted); }
/* funil */
.fn-row { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s2); border-radius: var(--r-sm); background: var(--dev-surface); color: #fff; }
.fn-top { display: flex; align-items: center; gap: var(--s2); }
.fn-top .tile { background: var(--line); color: var(--accent-text); }
.fn-top small { display: block; color: var(--dev-muted); }
.fn-tag { align-self: flex-start; padding: 0 var(--s2); border-radius: var(--r-pill); background: rgba(31, 107, 255, 0.2); color: var(--accent-soft); }
/* extrato */
.ex-from { display: flex; align-items: center; gap: var(--s2); color: #fff; }
.ex-from small { display: block; color: var(--dev-muted); }
.ex-body { display: flex; flex: 1; flex-direction: column; gap: var(--s2); padding: 0 var(--s2); color: var(--dev-text); }
.ex-sub { color: #fff; }
.ex-att { display: flex; align-items: center; gap: var(--s2); align-self: flex-start; padding: var(--s1) var(--s2) var(--s1) var(--s1); border: 1px solid var(--dev-line); border-radius: var(--r-sm); }
.ex-att i { display: flex; align-items: center; justify-content: center; width: var(--tile-s); height: var(--tile-s); border-radius: var(--r-sm); background: var(--accent); color: #fff; font-style: normal; }
.ex-att b { display: block; color: #fff; }
.ex-att small { color: var(--dev-muted); }

/* ---- cena B ---- */
.col-r-b { position: relative; width: 520px; flex: none; margin-right: 144px; }
.chat-card { position: relative; display: flex; flex-direction: column; gap: var(--s2); padding: var(--card-pad) var(--card-pad) var(--s7); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--card); transition: opacity 0.55s ease; }
.cc-head { display: flex; align-items: center; gap: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.cc-head .tile { border-radius: var(--r-pill); }
.cc-s { color: var(--caption); }
.cc-grid { display: flex; flex-direction: column; gap: var(--s3); }
.cc-set { display: flex; flex-direction: column; gap: var(--s2); }
.cc-out { align-self: flex-end; max-width: 360px; padding: var(--s2); border-radius: var(--r-sm); background: var(--action); color: var(--ink); }
.cc-in { align-self: flex-start; max-width: 376px; color: var(--muted); }
.wins-b { position: absolute; left: 0; top: 100%; width: 520px; height: 0; }
.win { position: absolute; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--card-2); }
.w-tabs { display: flex; align-items: center; gap: var(--s1); height: var(--s5); padding: 0 var(--card-pad); background: var(--panel); border-bottom: 1px solid var(--line); color: var(--ink); }
.w-tabs svg { width: var(--icon-s); height: var(--icon-s); color: var(--accent-text); }
.w-b0 { left: 304px; top: -88px; width: 368px; }
.w-b1 { left: -96px; top: -72px; width: 352px; }
.w-b2 { left: -112px; top: -88px; width: 336px; }
.w-b3 { left: 272px; top: -64px; width: 336px; }
.w-body { display: flex; flex-direction: column; gap: var(--s1); padding: var(--card-pad); }
.w-cap { color: var(--caption); }
.w-row { display: flex; align-items: flex-start; gap: var(--s1); color: var(--body); }
.w-row svg { width: var(--icon-s); height: var(--icon-s); color: var(--accent-text); }
.w-tags { display: flex; flex-wrap: wrap; gap: var(--s1); }
.w-tags span { padding: 0 var(--s2); border-radius: var(--r-pill); background: var(--action); color: var(--body); }
.w-note { color: var(--muted); }
.w-term { display: flex; flex-direction: column; gap: 0; padding: var(--card-pad); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: nowrap; color: var(--code); }
.w-term .t-pad { padding-left: var(--s2); } .t-g { color: var(--accent-text); } .t-d { color: var(--caption); } .t-b { color: var(--muted); } .t-y { color: var(--ink); text-decoration: underline; } .t-k { color: var(--ink); }
.t-caret { display: inline-block; width: 8px; height: var(--s2); margin-left: 2px; vertical-align: -3px; background: var(--code); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ---- cena C ---- */
.stage-c { flex-direction: column; justify-content: center; gap: var(--s3); padding-inline: 0; align-items: center; }
.c-heads { display: flex; flex-direction: column; gap: var(--s5); align-items: center; text-align: center; }
.c-txt { display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.c-txt h2 { max-width: 784px; color: var(--ink); }
.c-txt p { max-width: 560px; color: var(--muted); }
.orbit { position: relative; margin-top: var(--s1); width: 460px; height: 330px; }
.o-glow { position: absolute; top: 50%; left: 50%; width: 224px; height: 224px; margin: -112px 0 0 -112px; border-radius: var(--r-pill); background: rgba(31, 107, 255, 0.16); filter: blur(34px); opacity: 0; transition: opacity 0.6s; pointer-events: none; }
.o-glow.on { opacity: 1; }
.o-ring { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: var(--r-pill); border: 1px dashed var(--line); }
.o-dot { position: absolute; top: 50%; left: 50%; width: var(--tile-l); height: var(--tile-l); margin: -24px 0 0 -24px; border-radius: var(--r-pill); background: var(--action); transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(var(--ds, 0.2)); }
.o-dot .od-i, .o-dot .od-a { position: absolute; inset: 0; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; transition: opacity 0.4s ease, scale 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
.o-dot .od-i { scale: 0.4; opacity: 0; color: var(--body); }
.o-dot .od-i svg { width: var(--icon-s); height: var(--icon-s); }
.o-dot.act .od-i { scale: 1; opacity: 1; color: var(--accent-text); }
.o-dot .od-a { background: center / cover no-repeat; scale: 1; opacity: 0; }
.o-dot.avs .od-a { opacity: 1; } .o-dot.avs .od-i { opacity: 0; scale: 0.4; }
.o-center { position: absolute; top: 50%; left: 50%; width: var(--s7); height: var(--s7); margin: -48px 0 0 -48px; border-radius: var(--r-pill); background: radial-gradient(circle at 35% 30%, #4a4a4a, #262626 70%); display: flex; align-items: center; justify-content: center; transition: background 0.5s ease, scale 0.6s cubic-bezier(0.3, 1.4, 0.5, 1); }
.o-c-mark { color: var(--accent-text); transition: color 0.4s; }
.o-center.w { background: var(--accent); scale: 0.625; } .o-center.w .o-c-mark { color: #fff; }
.o-chip { position: absolute; top: 50%; left: 50%; z-index: 6; display: flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s2) var(--s1) var(--s1); border-radius: var(--r-pill); background: var(--action); white-space: nowrap; color: var(--ink); }
.o-c-av { width: var(--tile-s); height: var(--tile-s); flex: none; border-radius: var(--r-pill); background: var(--line) center / cover no-repeat; }
.o-wins { position: absolute; left: 0; top: 0; width: 460px; height: 0; }
.o-win { position: absolute; z-index: 5; width: 336px; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--card); pointer-events: none; }
.ow-r { left: 496px; } .ow-l { left: -372px; }
.ow-0 { top: 168px; } .ow-1 { top: 64px; } .ow-2 { top: -56px; } .ow-3 { top: -56px; } .ow-4 { top: 48px; } .ow-5 { top: 160px; }
.ow-tab { display: flex; align-items: center; gap: var(--s1); height: var(--s5); padding: 0 var(--card-pad); background: var(--panel); border-bottom: 1px solid var(--line); color: var(--body); }
.ow-tab svg { width: var(--icon-s); height: var(--icon-s); color: var(--accent-text); }
.ow-b { padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--s1); }
.ow-b h3 { color: var(--ink); }
.ow-b p { color: var(--muted); }

/* ---- 6b. Estados que só existem com site.js ativo (html.scenes). Sem JS, ou se o script falhar, tudo aparece em fluxo normal ---- */
.scenes .manifesto { opacity: 0; }
.scenes .wrapA { transform: translateY(calc(30 * var(--vh))) scale(0.62); opacity: 0.001; will-change: transform, opacity; }
.scenes .col-l { display: grid; gap: 0; }
.scenes .txt, .scenes .c-txt { grid-area: 1 / 1; opacity: 0; translate: 0 18px; visibility: hidden; transition: opacity 0.5s var(--ease-s), translate 0.5s var(--ease-s), visibility 0s linear 0.5s; }
.scenes .c-heads { display: grid; justify-items: center; gap: 0; }
.scenes .txt.on, .scenes .c-txt.on { opacity: 1; translate: 0 0; visibility: visible; transition-delay: 0s; }
.scenes .notif { opacity: 0; transform: translateY(-24px) scale(0.88); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; }
.scenes .sc { opacity: 0; transition: opacity 0.45s var(--ease-m); }
.scenes .sc.on { opacity: 1; }
.scenes .cc-grid { display: grid; height: 176px; gap: 0; }
.scenes .cc-set { grid-area: 1 / 1; opacity: 0; transition: opacity 0.45s var(--ease-m); }
.scenes .cc-set.on { opacity: 1; }
.scenes .win { opacity: 0; translate: 0 24px; transition: opacity 0.55s ease, translate 0.55s var(--ease-s); }
.scenes .win.on { opacity: 1; translate: 0 0; }
.scenes .o-dot { opacity: 0; transition: opacity 0.45s ease; }
.scenes .o-chip { opacity: 0; transition: opacity 0.28s var(--ease-m); }
.scenes .o-chip.on { opacity: 1; }
.scenes .o-win { opacity: 0; transition: opacity 0.45s ease, translate 0.55s var(--ease-s); }
.scenes .ow-r { translate: -16px 0; } .scenes .ow-l { translate: 16px 0; }
.scenes .o-win.on { opacity: 1; translate: 0 0; }

/* ---- 6c. Sem JS: a home vira uma página comum, com todo o texto visível ---- */
html:not(.scenes) .hero { height: auto; }
html:not(.scenes) .hero-stage { position: relative; height: auto; min-height: calc(100 * var(--vh)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s5); padding: calc(var(--nav-h) + var(--s5)) var(--pad) var(--s6); overflow: visible; }
html:not(.scenes) .hero-cards { display: none; }
html:not(.scenes) .hero-center, html:not(.scenes) .manifesto { position: static; transform: none; width: 100%; max-width: 832px; pointer-events: auto; }
html:not(.scenes) .hero-bar { position: static; flex-wrap: wrap; justify-content: center; white-space: normal; }
html:not(.scenes) .rest { margin-top: 0; }
html:not(.scenes) .scene { height: auto; }
html:not(.scenes) .stage { position: static; height: auto; overflow: visible; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--s5); padding: var(--sec) var(--pad); }
html:not(.scenes) .col-l { width: 100%; max-width: 640px; }
html:not(.scenes) .col-r { display: none; }
html:not(.scenes) .col-r-b { width: 100%; max-width: 560px; margin: 0; }
html:not(.scenes) .chat-card { padding-bottom: var(--card-pad); }
html:not(.scenes) .wins-b { position: static; display: grid; width: auto; height: auto; gap: var(--gap); margin-top: var(--gap); }
html:not(.scenes) .wins-b .win { position: static; display: block; width: auto; }
html:not(.scenes) .stage-c { align-items: flex-start; }
html:not(.scenes) .c-heads, html:not(.scenes) .c-txt { align-items: flex-start; text-align: left; }
html:not(.scenes) .orbit { width: 100%; height: auto; margin: 0; transform: none; }
html:not(.scenes) .o-glow, html:not(.scenes) .o-ring, html:not(.scenes) .o-dot, html:not(.scenes) .o-center, html:not(.scenes) .o-chip { display: none; }
html:not(.scenes) .o-wins { position: static; display: grid; width: auto; height: auto; gap: var(--gap); transform: none; }
html:not(.scenes) .o-win { position: static; width: auto; max-width: 560px; }
html:not(.js) .nav { position: static; height: auto; flex-wrap: wrap; padding-block: var(--s1); background: none; }
html:not(.js) .nav-pill { position: static; transform: none; order: 3; width: 100%; overflow-x: auto; }
html:not(.js) .nav-burger { display: none; }
html:not(.js) .nav-cta { display: inline-flex; }

/* =====================================================================
   7. PERGUNTAS FREQUENTES (mesmo componente na home e em /sobre/)
   ===================================================================== */
.faq { position: relative; background: var(--ground); padding-block: var(--sec); }
.faq-head { display: flex; flex-direction: column; gap: var(--s2); max-width: 720px; margin-bottom: var(--s6); }
.faq-head h2 { color: var(--ink); }
.faq-head p { color: var(--muted); }
.faq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.fcard { --tp: 1; display: flex; flex-direction: column; gap: var(--s2); padding: var(--card-pad); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--card); translate: 0 calc((1 - var(--tp)) * 24px); opacity: var(--tp); transition: background-color var(--t); }
.fcard:hover { background: var(--card-hover); }
.fc-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.fc-n { color: var(--caption); }
.fc-b { display: flex; flex-direction: column; gap: var(--s1); }
.fc-b h3 { color: var(--ink); }
.fc-b p { color: var(--muted); }
.fcard-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s4); }
.fcard-wide .fc-top { gap: var(--s3); }
.fcard-wide .fc-n { display: none; }
.fcard-wide .fc-b { flex: 1; }
.fc-cta { flex: none; }

/* =====================================================================
   8. DEPOIMENTOS (oculta até haver depoimento real; ver README)
   ===================================================================== */
.proof { display: flex; flex-direction: column; align-items: center; gap: var(--s6); overflow: hidden; background: var(--ground); padding-block: var(--sec); }
.proof[hidden] { display: none; }
.pr-head, .pr-feat { width: min(var(--wrap), calc(100% - 48px)); }
.pr-head h2 { color: var(--ink); }
.pr-feat { display: flex; align-items: center; gap: var(--s4); }
.pr-img { width: 320px; height: auto; aspect-ratio: var(--ar-square); flex: none; border-radius: var(--r-card); object-fit: cover; }
.pr-q { display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.pr-q blockquote { color: var(--ink); }
.pr-by { display: flex; flex-direction: column; }
.pr-by span { color: var(--muted); }
.pr-car { width: 100%; overflow: hidden; }
.pr-track { display: flex; width: max-content; }
.pr-ul { display: flex; gap: var(--gap); padding: 0 var(--gap) 0 0; }
.pr-c { display: flex; flex-direction: column; gap: var(--s3); flex: none; width: 456px; padding: var(--card-pad); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--card-2); transition: background-color var(--t); }
.pr-c:hover { background: var(--card-hover); }
.pr-ch { display: flex; align-items: center; gap: var(--s2); }
.pr-ch img { width: var(--tile-l); height: var(--tile-l); border-radius: var(--r-pill); object-fit: cover; }
.pr-c blockquote { color: var(--body); }
.pr-ch cite { display: block; font-style: normal; color: var(--ink); }
.pr-ch span { display: block; color: var(--muted); }
.pr-car.loop .pr-track { animation: marquee 48s linear infinite; }
.pr-car.loop:hover .pr-track, .pr-car.loop:focus-within .pr-track, .pr-car.paused .pr-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =====================================================================
   9. RODAPÉ
   ===================================================================== */
.footer { display: flex; flex-direction: column; }
.f-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 768px; overflow: clip; scroll-margin-top: 0; }
.f-hero picture, .f-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.f-hero img { filter: brightness(0.74); }
.f-fade { position: absolute; left: 0; bottom: 0; width: 100%; height: 352px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000 86%); }
.f-c { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding-inline: var(--s3); text-align: center; }
.f-c h2 { color: #fff; }
.f-body { display: flex; flex-direction: column; gap: var(--s6); padding: var(--s6) var(--pad) var(--s5); background: var(--ground); }
.f-top { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: var(--s5); }
.f-left { display: flex; flex-direction: column; gap: var(--s2); width: 320px; flex: none; }
.f-logo { color: #fff; width: max-content; }
.f-fine { color: var(--caption); }
.f-cols { display: flex; gap: var(--s6); }
.f-col { display: flex; flex-direction: column; min-width: 136px; flex: none; gap: var(--s1); }
.f-h { color: var(--caption); }
.f-col nav { display: flex; flex-direction: column; }
.f-col a { display: flex; align-items: center; min-height: var(--s4); color: var(--soft); white-space: nowrap; transition: color var(--t); }
.f-col a:hover { color: var(--accent-text); }
.f-word { display: block; width: 100%; overflow: hidden; }
.f-word span { display: block; width: max-content; white-space: nowrap; color: var(--ink); line-height: var(--lh-0); }
.f-bot { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--s2); border-top: 1px solid var(--line); padding-top: var(--s3); color: var(--caption); }

/* =====================================================================
   10. PÁGINAS INTERNAS
   ===================================================================== */
html.js.ready .reveal, html.js.ready .load { opacity: 0; transform: translateY(32px); transition: opacity 0.8s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.16, 0.84, 0.44, 1), background-color var(--t); transition-delay: var(--d, 0s); }
html.js.ready .reveal.in, html.js.ready .load.in { opacity: 1; transform: none; }
.d1 { --d: 0.17s; } .d2 { --d: 0.26s; }
.op-22 { object-position: 50% 22%; } .op-30 { object-position: 50% 30%; } .op-32 { object-position: 50% 32%; } .op-38 { object-position: 50% 38%; } .op-42 { object-position: 50% 42%; } .op-62 { object-position: 50% 62%; }

/* sobre nós */
.ab-hero { display: flex; flex-direction: column; align-items: center; padding: var(--top) var(--pad) 0; text-align: center; }
.ab-hero h1 { max-width: 864px; color: var(--ink); }
.ab-hero .lead { max-width: 704px; margin-top: var(--s3); color: var(--muted); }
.ab-where { margin-top: var(--s2); color: var(--caption); }
.ab-btns { display: flex; gap: var(--s2); margin-top: var(--s4); }
.ab-frame { position: relative; width: 960px; max-width: 100%; aspect-ratio: var(--ar-wide); margin-top: var(--s6); border-radius: var(--r-card); overflow: hidden; background: var(--card); flex: none; }
.ab-frame img { width: 100%; height: 100%; object-fit: cover; }
.ab-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 240px; background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.88) 74%, #000 100%); }
.ab-why { display: flex; flex-direction: column; gap: var(--s6); padding: var(--sec) var(--pad); }
.ab-head { display: flex; flex-direction: column; gap: var(--s2); max-width: 720px; }
.ab-head h2 { color: var(--ink); }
.ab-head p { color: var(--muted); }
.ab-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.ab-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-card); background: var(--card); transition: background-color var(--t); }
.ab-card.in:hover { background: var(--card-hover); }
.ab-card-g { aspect-ratio: var(--ar-photo); background: #000; overflow: hidden; }
.ab-card-g img { width: 100%; height: 100%; object-fit: cover; }
.ab-card-b { display: flex; flex-direction: column; gap: var(--s1); padding: var(--card-pad); }
.ab-eye { color: var(--accent-text); }
.ab-card-b h3 { color: var(--ink); }
.ab-card-b p:last-child { color: var(--muted); }
.ab-cta { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--sec) var(--pad); text-align: center; }
.ab-icons { display: flex; align-items: center; gap: var(--s3); }
.ab-icon { display: flex; align-items: center; justify-content: center; width: var(--s7); height: var(--s7); border-radius: var(--r-card); background: var(--accent); color: #fff; }
.ab-arrow { color: var(--caption); }
.ab-face { display: block; width: var(--s7); height: var(--s7); border-radius: var(--r-pill); background: var(--card) url("../img/recorte-avatar-coordenador-192w.webp") center / cover no-repeat; }
.ab-cta h2 { max-width: 704px; color: #fff; }
.ab-cta .lead { max-width: 560px; color: var(--muted); }
.ab-cta-b { display: flex; gap: var(--s2); }

/* blog: lista */
.bl { width: 100%; max-width: calc(var(--wrap) + 48px); margin: 0 auto; padding: var(--top) var(--s3) var(--sec); }
.bl-head { display: flex; flex-direction: column; gap: var(--s2); max-width: 720px; margin-bottom: var(--s5); }
.bl-head h1 { color: var(--ink); }
.bl-head .lead { color: var(--muted); }
.bl-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.bl-filters { display: flex; align-items: center; gap: var(--s1); min-width: 0; padding: var(--s1); margin: calc(var(--s1) * -1); overflow-x: auto; scrollbar-width: none; }
.bl-filters::-webkit-scrollbar { display: none; }
.filter { flex: none; }
.bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--gap); margin-top: var(--s5); }
.bl-card a { display: flex; height: 100%; flex-direction: column; gap: var(--s2); }
.bl-card a h2 { transition: color var(--t); }
.bl-card a:hover h2 { color: var(--accent-text); }
.bl-img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar-photo); border-radius: var(--r-card); object-fit: cover; }
.bl-card h2 { color: var(--ink); }
.bl-ex { color: var(--muted); }
.bl-empty { margin-top: var(--s6); color: var(--muted); }
.bl-card[hidden] { display: none; }

/* artigo */
.ar-wrap { position: relative; }
.ar { width: 100%; max-width: calc(640px + 48px); margin: 0 auto; padding: var(--top) var(--s3) 0; }
.ar-toc-col { position: absolute; top: 0; bottom: 0; left: max(var(--s3), calc(50% - 580px)); width: 200px; display: none; }
.ar-toc { position: sticky; top: var(--top); max-height: calc(100vh - var(--top) - var(--s5)); overflow: auto; }
.ar-toc p { margin-bottom: var(--s2); color: var(--ink); }
.ar-toc ul { border-left: 1px solid var(--line); }
.ar-toc a { display: flex; align-items: center; min-height: 44px; margin-left: -1px; padding: var(--s1) 0 var(--s1) var(--s2); border-left: 1px solid transparent; color: var(--caption); transition: color var(--t), border-color var(--t); }
.ar-toc a:hover { color: var(--accent-text); }
.ar-toc a.on { color: var(--ink); border-left-color: var(--ink); }
@media (min-width: 1180px) { .ar-toc-col { display: block; } }
.ar-bc { margin-bottom: var(--s3); color: var(--muted); }
.ar-bc ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.ar-bc a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); transition: color var(--t); } .ar-bc a:hover { color: var(--accent-text); }
.ar-sep { color: var(--line); }
.ar-head { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s5); }
.ar-head h1 { color: var(--ink); }
.ar-head .lead { color: var(--muted); }
.ar-sum { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s3); padding: var(--card-pad); border-radius: var(--r-card); background: var(--card); }
.ar-sum-h { color: var(--accent-text); }
.ar-sum p:last-child { color: var(--body); }
.ar-cover { display: block; width: 100%; height: auto; aspect-ratio: var(--ar-wide); margin-bottom: var(--s3); border-radius: var(--r-card); object-fit: cover; }
.prose { color: var(--prose); }
.prose p { margin: 0 0 var(--s3); }
.prose h2 { margin: var(--s5) 0 var(--s2); color: var(--ink); }
.prose strong { color: var(--ink); }
.prose ul { margin: 0 0 var(--s3); padding-left: var(--s3); list-style: disc; }
.prose li { margin-bottom: var(--s1); padding-left: var(--s1); }
.prose li::marker { color: var(--accent-text); }
.ar-tablewrap { margin: 0 0 var(--s3); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); }
.ar-tablewrap table { width: 100%; min-width: 560px; border-collapse: collapse; }
.ar-tablewrap caption { padding: var(--s2) var(--card-pad); text-align: left; color: var(--caption); }
.ar-tablewrap th, .ar-tablewrap td { padding: var(--s2) var(--card-pad); text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.ar-tablewrap thead th { background: var(--card); color: var(--ink); }
.ar-tablewrap tbody th { color: var(--ink); }
.ar-tablewrap td { color: var(--body); }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t); } .prose a:hover { color: var(--accent-hover-text); }
.ar-share { display: flex; align-items: center; gap: var(--s1); margin-top: var(--s5); color: var(--caption); }
.ar-share span:first-child { margin-right: var(--s1); }
.ar-copied { color: var(--accent-text); }
.ar-rel-wrap { max-width: calc(960px + 48px); padding-top: 0; }
.ar-rel { margin-top: var(--s7); padding: var(--s5) 0 var(--sec); border-top: 1px solid var(--line); }
.ar-rel h2 { margin-bottom: var(--s3); color: var(--caption); }
.ar-rel-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.ar-rel-c { display: flex; flex-direction: column; gap: var(--s1); }
.ar-rel-c .ar-rel-t, .ar-rel-c .ar-rel-cat { transition: color var(--t); }
.ar-rel-c:hover .ar-rel-t, .ar-rel-c:hover .ar-rel-cat { color: var(--accent-text); }
.ar-rel-img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar-photo); margin-bottom: var(--s1); border-radius: var(--r-card); object-fit: cover; }
.ar-rel-cat { color: var(--caption); }
.ar-rel-t { color: var(--ink); }
.ar-tocm { margin: 0 0 var(--s3); border-radius: var(--r-card); background: var(--card); }
.ar-tocm summary { display: flex; align-items: center; justify-content: space-between; padding: var(--s2) var(--card-pad); color: var(--ink); cursor: pointer; list-style: none; border-radius: var(--r-card); transition: background-color var(--t); }
.ar-tocm summary::-webkit-details-marker { display: none; }
.ar-tocm summary:hover { background: var(--card-hover); }
.ar-tocm summary svg { width: var(--icon-s); height: var(--icon-s); color: var(--caption); transform: rotate(90deg); transition: transform 0.2s ease; }
.ar-tocm[open] summary svg { transform: rotate(-90deg); }
.ar-tocm ul { padding: 0 var(--card-pad) var(--s2); }
.ar-tocm a { display: flex; align-items: center; min-height: 44px; padding: 0; color: var(--muted); transition: color var(--t); }
.ar-tocm a:hover { color: var(--accent-text); }
@media (min-width: 1180px) { .ar-tocm { display: none; } }

/* páginas legais */
.legal-page { min-height: calc(100 * var(--vh)); display: flex; align-items: center; justify-content: center; padding: var(--top) var(--s3) var(--sec); }
.legal-card { width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.legal-card .brand { color: var(--muted); }
.legal-card h1 { color: var(--ink); }
.legal-card .lead, .legal-card .mist { color: var(--muted); }
.legal-card a.link { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t); }
.legal-card a.link:hover { color: var(--accent-hover-text); }

/* =====================================================================
   11. MAPA TIPOGRÁFICO: cada elemento de texto do site em um único nível.
   É o único lugar fora dos tokens onde aparecem font-size, line-height,
   letter-spacing e font-weight, sempre como var(--...).
   ===================================================================== */
/* nível 1: display (só o chamado final do rodapé) */
.f-c h2 { font-size: var(--fs-1); line-height: var(--lh-1); letter-spacing: var(--ls-1); }
/* nível 2: título (todo h1 e os títulos de seção) */
.ab-hero h1, .bl-head h1, .hero h1, .c-txt h2, .faq-head h2, .pr-head h2, .ab-head h2, .ab-cta h2, .ar-head h1, .legal-card h1, .lock-time { font-size: var(--fs-2); line-height: var(--lh-2); letter-spacing: var(--ls-2); }
/* nível 3: destaque */
.manifesto, .txt h2, .ab-icon { font-size: var(--fs-3); line-height: var(--lh-3); letter-spacing: var(--ls-3); }
/* nível 4: subtítulo */
.lead, .ab-card-b h3, .fc-b h3, .bl-card h2, .prose h2, .pr-q blockquote, .mm-link, .f-logo, .ar-rel-t, .nav-brand { font-size: var(--fs-4); line-height: var(--lh-4); letter-spacing: var(--ls-4); }
/* nível 5: texto e controles */
body, .tile, .btn, .nav-link, .filter, .field, .txt p, .c-txt p, .faq-head p, .ab-head p, .ab-card-b p, .fc-b p, .bl-ex, .prose, .pr-c blockquote, .ar-bc, .legal-card p, .legal-card a, .cc-out, .cc-in, .ow-b h3, .f-col a, .hero-row, .ar-rel h2, .o-c-mark, .ab-arrow, .ab-where, .ar-sum p:last-child { font-size: var(--fs-5); line-height: var(--lh-5); letter-spacing: var(--ls-5); }
/* nível 6: apoio */
.hero-bar, .chip, .lock-date, .sc-status, .sc-ts, .im-m, .im-del, .sc-who, .sc-field, .n-b, .fn-row, .fn-tag, .ex-from, .ex-body, .ex-att, .cc-s, .cc-head p, .w-tabs, .w-body, .w-term, .w-tags span, .ow-tab, .ow-b p, .o-chip, .fc-n, .ar-toc a, .ar-toc p, .ar-share, .ar-tocm summary, .ar-tocm a, .ab-eye, .f-fine, .f-h, .f-bot, .pr-ch cite, .pr-ch span, .pr-by span, .ar-rel-cat, .ar-sep, .ar-sum-h, .ar-tablewrap caption, .ar-tablewrap th, .ar-tablewrap td, .legal-card .brand { font-size: var(--fs-6); line-height: var(--lh-6); letter-spacing: var(--ls-6); }
/* pesos: 400 por padrão, 500 nos itens abaixo */
body { font-weight: var(--fw-r); }
.ab-hero h1, .bl-head h1, .f-c h2, .hero h1, .c-txt h2, .faq-head h2, .pr-head h2, .ab-head h2, .ab-cta h2, .ar-head h1, .legal-card h1,
.manifesto, .txt h2, .ab-icon, .nav-brand, .f-logo, .ab-card-b h3, .fc-b h3, .bl-card h2, .prose h2, .ar-rel-t, .mm-link,
.btn, .nav-link, .filter, .field, .ow-b h3, .ow-tab, .w-tabs, .n-h b, .fn-title, .ex-sub, .ex-att b, .ex-from b, .pr-by b, .tile, .sc-who, .o-c-mark, .ab-eye, .chip, .fn-tag, .lock-date,
.sc-status, .pr-ch cite, .cc-head p:first-child, .ar-toc p, .ar-toc a.on, .legal-card .brand, .f-h, .ar-sum-h, .prose strong, .ar-tablewrap th { font-weight: var(--fw-m); }
.lock-time { font-weight: var(--fw-r); }

/* =====================================================================
   12. MOVIMENTO REDUZIDO E RESPONSIVO
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; transition-delay: 0s !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .pr-car.loop .pr-track { animation: none !important; }
}
@media (max-width: 1280px) {
  .stage { flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--s3); padding-top: calc(var(--nav-h) + var(--s4)); }
  .col-l { width: 100%; max-width: 560px; }
  .col-r { width: 100%; max-width: 520px; height: auto; flex: 1 1 0; min-height: 0; align-self: center; }
  .col-r-b { width: 100%; max-width: 520px; margin: 0; align-self: center; }
  .chat-card { padding-bottom: var(--card-pad); }
  .scenes .cc-grid { height: 144px; }
  .wins-b { display: none; }
  .stage-c { align-items: center; }
  .ow-r { left: 392px; } .ow-l { left: -268px; }
}
@media (max-width: 1100px) {
  .nav { background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .nav-pill { display: none; }
  .nav-burger { display: inline-flex; }
  .f-top { flex-direction: column; gap: var(--s5); }
  .f-left { width: 100%; }
}
@media (max-width: 1023px) {
  .stage-c { --oz: 0.7; }
  .orbit { transform: scale(var(--oz)); transform-origin: top center; margin-bottom: calc(-330px * (1 - var(--oz))); }
  .o-wins { top: calc(100% - 4px); left: 50%; width: 336px; transform: translateX(-50%) scale(calc(1 / var(--oz))); transform-origin: top; }
  .o-wins .o-win { left: 0; right: 0; top: 0; }
  .scenes .ow-r, .scenes .ow-l { translate: 0 16px; }
  .faq-grid, .ab-cards, .bl-grid { grid-template-columns: repeat(2, 1fr); }
  .ab-hero, .ab-why, .ab-cta { padding-inline: var(--s5); }
  .pr-feat { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 820px) {
  .hero-row-a { display: none; }
  .hero-bar { inset: auto 0 var(--s5) 0; right: 0; flex-direction: column; align-items: center; gap: var(--s2); padding: 0 var(--s2); flex-wrap: wrap; }
  .hero-bar-m { display: flex; }
  .hero-works { flex-wrap: wrap; justify-content: center; gap: 0 var(--s2); }
  .hero-center { width: min(80vmin, 94vw); }
  .manifesto { width: calc(100vw - 64px); }
}
@media (max-height: 700px) {  /* telas baixas: abertura mais enxuta, sem o título cortado pelo cabeçalho */
  .hero-row-a { display: none; }
  .hero-cta { margin-top: var(--s2); }
}
/* paisagem em celular e tablet baixo: cenas em duas colunas, anel à esquerda com a janela ao lado, sem corte */
@media (max-height: 700px) and (min-width: 768px) and (max-width: 1023px) {
  .hero-bar { display: none; }
  .stage { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--nav-h) var(--pad) 0; }
  .col-l { width: 46%; max-width: none; }
  .col-r { width: 46%; max-width: none; height: calc(100% - var(--s2)); flex: none; align-self: flex-end; }
  .col-r-b { width: 46%; max-width: none; align-self: center; }
  .scenes .cc-grid { height: 128px; }
  .stage-c { --oz: 0.55; flex-direction: row; align-items: flex-start; justify-content: space-between; padding: var(--nav-h) var(--pad) 0; }
  .c-heads { width: 46%; justify-items: start; text-align: left; }
  .c-txt { align-items: flex-start; }
  .orbit { transform-origin: top right; margin: 0; flex: none; }
  .c-txt p { display: none; }
  .o-wins { top: calc(140px / var(--oz)); right: calc(100% + 460px * (1 - var(--oz)) / var(--oz)); left: auto; width: 336px; transform: scale(calc(1 / var(--oz))); transform-origin: top right; }
  .scenes .ow-r, .scenes .ow-l { translate: 0 0; }
}
@media (max-width: 767px) {
  .nav { padding-inline: var(--s2); height: var(--nav-h); }
  .nav-cta { display: none; }
  .faq-grid, .ab-cards, .bl-grid, .ar-rel-g { grid-template-columns: 1fr; }
  .fcard-wide { flex-direction: column; align-items: flex-start; }
  .ab-hero { padding: var(--top) var(--s3) 0; }
  .ab-btns, .ab-cta-b { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .ab-why, .ab-cta { padding-inline: var(--s3); }
  .ab-frame { margin-top: var(--s5); }
  .f-body { padding-inline: var(--s3); gap: var(--s5); }
  .f-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s3); width: 100%; }
  .f-col { min-width: 0; }
  .f-col a { white-space: normal; min-height: 44px; }
  .f-bot { flex-direction: column; align-items: flex-start; }
  .f-hero { height: 640px; }
  .bl-top { flex-direction: column; align-items: stretch; }
  .field { width: 100%; }
  .bl-grid { gap: var(--s5); }
  .pr-img { width: 100%; max-width: 320px; }
  .pr-c { width: 320px; }
  .pr-car { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pr-car::-webkit-scrollbar { display: none; }
  .pr-car.loop .pr-track { animation: none; }
  .pr-ul { padding-left: var(--s3); }
  .pr-c { scroll-snap-align: start; }
  .ar { padding-inline: var(--s3); }
  .stage-a .col-r { max-width: 336px; }
  .sceneC { height: calc(900 * var(--vh)); }
  .stage-c { gap: var(--s2); }
  .c-heads { width: 100%; padding-inline: var(--s3); }
  .c-txt { width: 100%; }
  .c-txt p { max-width: 100%; }
  .wins-b { display: block; position: absolute; left: 50%; top: 100%; width: 0; }
  .wins-b .win { display: none; }
  .wins-b .w-b3 { display: block; left: -168px; top: -240px; }
}