/* ============================================================
   DSGN · SYSTEM
   Tokens e base compartilhados. Uma decisão com nome, num lugar só.
   Consumido por: design-system-v2.html (export) e landing.html (produção).
   Trocar um valor aqui troca a marca inteira nos dois arquivos.
   ============================================================ */

/* ============================================================
   TOKENS. Uma decisão com nome. Trocar aqui troca tudo.
   ============================================================ */
:root{
  /* 01 · decisão de cor ------------------------------------- */
  --papel:#F7F4EF; --papel-fundo:#EBE6DC; --tinta:#14130F; --grafite:#23221C;
  --nevoa:#8A867A; --linha-clara:#D6D0C4; --linha-escura:#33322A;
  --sinal:#CBF24A; --sinal-escuro:#A8C93A;
  --argila:#A8552F; --erro:#C9382B;

  --bg:var(--papel); --surface:var(--papel-fundo); --surface-inv:var(--tinta);
  --text:var(--tinta); --text-inv:var(--papel); --text-muted:var(--nevoa);
  --linha:var(--linha-clara); --border:var(--linha-clara);
  --accent:var(--sinal); --accent-hover:var(--sinal-escuro); --on-accent:var(--tinta);
  --focus-ring:var(--tinta); --code-bg:var(--grafite); --code-text:var(--papel);

  /* 03 · decisão de tipografia ------------------------------ */
  --font-display:"Archivo",system-ui,sans-serif;
  --display-stretch:118%;
  --font-text:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --weight-display:900; --weight-regular:400; --weight-medium:500; --weight-semibold:600;

  --text-display-xl:72px; --text-display-l:56px; --text-h1:40px;
  --text-h2:28px; --text-h3:20px; --text-body:17px; --text-small:14px; --text-mono:15px;
  --lh-display-xl:.92; --lh-display-l:.95; --lh-h1:1.05; --lh-h2:1.15;
  --lh-h3:1.3; --lh-body:1.6; --lh-small:1.5; --lh-mono:1.55;
  --track-display:-.03em; --track-h1:-.02em; --track-h2:-.01em;
  --measure-body:68ch;

  /* 02 · decisão de espaço e forma -------------------------- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
  --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px; --space-32:128px;
  --radius-bloco:0px; --radius-pill:999px; --border-width:1px;
  --shadow-none:none;
  --container-max:1240px; --container-leitura:720px;
  --btn-height:52px; --btn-pad-x:32px;

  /* 06 · decisão de movimento ------------------------------- */
  --dur-hover:120ms; --dur-corte:220ms; --dur-linha:520ms; --dur-wipe:700ms;
  --ease-reto:linear; --ease-saida:cubic-bezier(.22,1,.36,1);
}
[data-theme="dark"]{
  --bg:var(--tinta); --surface:var(--grafite); --surface-inv:var(--papel);
  --text:var(--papel); --text-inv:var(--tinta);
  --linha:var(--linha-escura); --border:var(--linha-escura);
  --focus-ring:var(--sinal); --code-bg:#0D0C0A;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-text);
  font-size:var(--text-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
  text-wrap:pretty;transition:background var(--dur-corte) var(--ease-reto),color var(--dur-corte) var(--ease-reto)}
em,i,cite,address{font-style:normal}
a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--accent)}
a:hover{border-bottom-color:var(--text)}
::selection{background:var(--sinal);color:var(--tinta)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img{max-width:100%}

.doc{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-12)}
.d{font-family:var(--font-display);font-weight:900;font-stretch:var(--display-stretch);
  text-transform:uppercase;letter-spacing:var(--track-display);line-height:.92;margin:0}
.mono{font-family:var(--font-mono);font-size:var(--text-small);color:var(--text-muted)}
.sub{max-width:var(--measure-body);font-size:20px;line-height:1.5;margin:var(--space-8) 0 0;color:var(--text)}
.sec{padding:var(--space-24) 0;border-top:1px solid var(--linha);position:relative}
.sec.alt{background:var(--surface)}
.eyebrow{font-family:var(--font-mono);font-size:var(--text-small);color:var(--text-muted);
  margin-bottom:var(--space-6);display:block}
h3.b{font-size:var(--text-h3);font-weight:600;margin:var(--space-12) 0 var(--space-4);line-height:1.3}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12)}
table{width:100%;border-collapse:collapse;font-size:15px;margin-top:var(--space-6)}
th,td{text-align:left;padding:var(--space-3);border-bottom:1px solid var(--linha);vertical-align:top}
th{font-size:12px;font-family:var(--font-mono);color:var(--text-muted);font-weight:400}
td code,code{font-family:var(--font-mono);font-size:13px}
ul.v{list-style:none;padding:0;margin:var(--space-2) 0 0;font-size:16px;line-height:1.6}
ul.v li{margin-bottom:var(--space-2);padding-left:var(--space-6);position:relative}
ul.v li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--accent)}
ul.v.no li{color:var(--text-muted);text-decoration:line-through}
ul.v.no li::before{background:var(--text-muted)}

/* ============================================================
   COMPONENTES
   ============================================================ */
.cx{border:1px solid var(--linha);padding:var(--space-8);background:var(--bg);margin-top:var(--space-6)}
.cx>h4{margin:0 0 var(--space-4);font-family:var(--font-mono);font-size:12px;color:var(--text-muted);font-weight:400}
.row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:var(--btn-height);padding:0 var(--btn-pad-x);border-radius:var(--radius-pill);
  font-family:var(--font-text);font-size:16px;font-weight:600;cursor:pointer;border:1px solid transparent;
  transition:background var(--dur-hover) var(--ease-reto),color var(--dur-hover) var(--ease-reto),
             border-color var(--dur-hover) var(--ease-reto)}
.btn--primario{background:var(--accent);color:var(--on-accent)}
.btn--primario:hover{background:var(--accent-hover)}
.btn--secundario{background:transparent;color:var(--text);border-color:var(--text)}
.btn--secundario:hover{background:var(--text);color:var(--text-inv)}
.btn--fantasma{background:transparent;color:var(--text-muted);height:40px;padding:0 var(--space-4);font-size:14px}
.btn--fantasma:hover{color:var(--text)}
.btn[disabled]{background:var(--surface);color:var(--text-muted);cursor:not-allowed;border-color:var(--linha)}
.btn[disabled]:hover{background:var(--surface)}

.badge{display:inline-flex;align-items:center;gap:var(--space-2);height:36px;padding:0 var(--space-4);
  border-radius:var(--radius-pill);font-size:14px;font-weight:600;border:1px solid transparent}
.badge--sinal{background:var(--sinal);color:var(--tinta)}
.badge--contorno{background:transparent;color:var(--text);border-color:var(--linha)}
.badge--tinta{background:var(--text);color:var(--text-inv)}

.stat .n{font-family:var(--font-display);font-weight:900;font-stretch:var(--display-stretch);
  letter-spacing:var(--track-display);line-height:.9;font-size:56px}
.stat .n sup{font-size:.44em;vertical-align:top;line-height:1;font-weight:900}
.stat .l{font-size:13px;color:var(--text-muted);margin-top:var(--space-1)}

.card{border:1px solid var(--linha);padding:var(--space-4)}
.card--surface{background:var(--surface)}
.card--limpo{background:var(--bg)}
.card--invertido{background:var(--surface-inv);color:var(--text-inv);border-color:transparent}
.card--sinal{background:var(--sinal);color:var(--tinta);border-color:transparent}

.campo{display:block}
.campo>label{display:block;font-size:14px;font-weight:600;margin-bottom:var(--space-2)}
.campo input,.campo select{width:100%;height:var(--btn-height);padding:0 var(--space-4);
  border:1px solid var(--linha);border-radius:var(--radius-bloco);background:var(--bg);color:var(--text);
  font-family:var(--font-text);font-size:16px;transition:border-color var(--dur-hover) var(--ease-reto)}
.campo input:focus,.campo select:focus{border-color:var(--text);outline:none}
.campo .hint{font-size:13px;color:var(--text-muted);margin-top:var(--space-2)}
.campo .err{font-size:13px;color:var(--erro);margin-top:var(--space-2);font-weight:600}
.campo.tem-erro input{border-color:var(--erro)}
.check{display:flex;gap:var(--space-3);align-items:flex-start;cursor:pointer;font-size:15px}
.check input{appearance:none;width:22px;height:22px;flex:0 0 22px;border:1px solid var(--text);
  background:var(--bg);margin:0;cursor:pointer;display:grid;place-items:center;
  transition:background var(--dur-hover) var(--ease-reto)}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{content:"";width:11px;height:6px;border-left:2px solid var(--tinta);
  border-bottom:2px solid var(--tinta);transform:rotate(-45deg) translate(1px,-2px)}

.promptblock{border:1px solid var(--linha)}
.promptblock .cab{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--linha);font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.promptblock .cab .cp{margin-left:auto;border:0;background:transparent;color:var(--text-muted);
  font-family:var(--font-mono);font-size:12px;cursor:pointer;padding:var(--space-1) var(--space-2);
  transition:color var(--dur-hover) var(--ease-reto)}
.promptblock .cab .cp:hover{color:var(--text)}
.promptblock pre{margin:0;padding:var(--space-4);background:var(--code-bg);color:var(--code-text);
  font-family:var(--font-mono);font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-x:auto}

.acc{border-top:1px solid var(--linha)}
.acc details{border-bottom:1px solid var(--linha)}
.acc summary{list-style:none;cursor:pointer;padding:var(--space-4) 0;font-weight:600;font-size:16px;
  display:flex;align-items:center;gap:var(--space-4);transition:color var(--dur-hover) var(--ease-reto)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";margin-left:auto;width:12px;height:12px;flex:0 0 12px;
  border-right:2px solid var(--text);border-bottom:2px solid var(--text);transform:rotate(45deg) translate(-3px,-3px)}
.acc details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.acc details p{margin:0 0 var(--space-4);font-size:15px;line-height:1.6;color:var(--text-muted);max-width:68ch}

.flist{list-style:none;padding:0;margin:0}
.flist li{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) 0;
  border-bottom:1px solid var(--linha);font-size:15px}
.flist svg{flex:0 0 20px;margin-top:2px}

.tl{list-style:none;padding:0;margin:0;border-left:1px solid var(--linha)}
.tl li{position:relative;padding:0 0 var(--space-6) var(--space-8)}
.tl li::before{content:"";position:absolute;left:-5px;top:6px;width:9px;height:9px;background:var(--linha)}
.tl li.destaque::before{background:var(--accent);width:9px;height:9px}
.tl .h{font-family:var(--font-mono);font-size:13px;color:var(--text-muted)}
.tl .t{font-weight:600;font-size:16px;margin-top:2px}
.tl .s{font-size:14px;color:var(--text-muted);margin-top:var(--space-1);max-width:60ch}

.scarcity{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6);
  background:var(--surface-inv);color:var(--text-inv);padding:var(--space-4) var(--space-6)}
.scarcity .it{display:flex;align-items:center;gap:var(--space-2);font-size:14px;font-weight:500}
.scarcity .btn{margin-left:auto;height:44px}
.porque{font-size:13px;color:var(--text-muted);margin-top:var(--space-3);max-width:78ch}

.pricecard{border:1px solid var(--text);padding:var(--space-8);background:var(--bg)}
.pricecard .turma{font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.pricecard .p{font-family:var(--font-display);font-weight:900;font-stretch:var(--display-stretch);
  letter-spacing:var(--track-display);line-height:.9;font-size:88px;margin-top:var(--space-4)}
.pricecard .p sup{font-size:.36em;vertical-align:top;line-height:1}
.pricecard .nota{font-size:13px;color:var(--text-muted);margin-top:var(--space-2)}
.pricecard .gar{border-top:1px solid var(--linha);margin-top:var(--space-6);padding-top:var(--space-4);
  font-size:13px;color:var(--text-muted);line-height:1.55}
.pricecard .gat{margin-top:var(--space-4);font-size:13px;font-weight:600}

.cmp th.destaque,.cmp td.destaque{background:var(--sinal);color:var(--tinta)}
.cmp td .sim{font-weight:600}
.cmp td .nao{color:var(--text-muted)}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.tile figure{margin:0}
.tile .moldura{aspect-ratio:4/5;background:var(--surface);border:1px solid var(--linha);
  display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);
  text-align:center;padding:var(--space-4)}
.tile .lab{font-size:14px;font-weight:600;margin-top:var(--space-2)}
.tile .meta{font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.tile .legenda{font-size:12px;color:var(--text-muted);margin-top:var(--space-1)}


/* --- revelação --- */
.reveal{clip-path:inset(0 100% 0 0)}
.rise{transform:translateY(24px);opacity:0}


/* --- máscara de linha: base da subida de linha do vocabulário de movimento ---
   Sem isto o translateY(105%) não é recortado e o título colapsa numa linha só. */
.linha-mask{overflow:hidden;display:block}
/* A linha NAO nasce escondida. Esconder no CSS significa depender de JS
   para revelar, e se o navegador nao desenhar quadros o texto some para
   sempre. Quem esconde e o JS, dentro de um quadro ja confirmado. */
.linha-mask>span{display:block}
@media (prefers-reduced-motion:reduce){ .linha-mask>span{transform:none} }