/* =============================================================================
   oficina — design system
   Cor e marca: a logo da oficina (navy, papel, ardósia, âmbar — medidas do PNG).
   Escala, raios, curvas e os cinco efeitos herdados: linear.app, via a extração
   feita para a landing_llmail em 04/09/2026.
   Os efeitos próprios desta marca (a bancada, o cartão aceso, a conversa que se
   escreve, a malha da bancada) estão na seção 12.
   O mapa de cada efeito está em ../TECNOLOGIAS.md
   ========================================================================== */

/* A Inter Variable daqui é RECORTADA, desde 10/09/2026, para a página caber nos
   200 KB do T7: 84 KB → 43 KB. Ficou só o que esta página usa:
   - o latim do português, a pontuação e o € — U+0020-007E, U+00A0-00FF,
     U+2010-2027, U+2030-203A, U+2044, U+20AC, U+2122, U+2191-2193, U+2212;
   - os dois eixos inteiros, peso e tamanho óptico;
   - as features que este CSS pede (cv01, ss03, case, tnum) e as de base
     (kern, calt, ccmp, locl, mark, mkmk).
   Contra a fonte inteira, a página sai igual pixel a pixel em 1440 e 412 px.
   Caractere fora do recorte cai na fonte do sistema sem avisar: o T16 do
   testes/conferir.mjs reprova quando isso acontece.
   Recortar de novo, com o fonttools (pip install fonttools brotli), a partir da
   fonte inteira — ela está no git: git show 1114502:design-system/assets/fonts/InterVariable.woff2
     pyftsubset <fonte inteira> --flavor=woff2 --unicodes="<a lista acima>" \
       --layout-features='kern,calt,ccmp,locl,mark,mkmk,case,tnum,cv01,ss03' */
@font-face {
  font-family: "Inter Variable";
  src: url("/oficina/assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. tokens ---------------------------------------------------- */

:root {
  /* 1.1 famílias --------------------------------------------------------- */
  --font-regular: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-monospace: ui-monospace, "JetBrains Mono", "Cascadia Code", "SF Mono",
    Menlo, Consolas, monospace;
  --font-settings: "cv01", "ss03";

  /* 1.2 pesos ------------------------------------------------------------ */
  --font-weight-normal: 400;
  --font-weight-medium: 510;
  --font-weight-semibold: 590;
  --font-weight-bold: 680;

  /* 1.3 títulos ---------------------------------------------------------- */
  --title-1-size: 1.0625rem;  --title-1-lh: 1.4;   --title-1-ls: -0.012em;
  --title-2-size: 1.25rem;    --title-2-lh: 1.33;  --title-2-ls: -0.012em;
  --title-3-size: 1.5rem;     --title-3-lh: 1.33;  --title-3-ls: -0.012em;
  --title-4-size: 2rem;       --title-4-lh: 1.125; --title-4-ls: -0.022em;
  --title-5-size: 2.5rem;     --title-5-lh: 1.1;   --title-5-ls: -0.022em;
  --title-6-size: 3rem;       --title-6-lh: 1;     --title-6-ls: -0.022em;
  --title-7-size: 3.5rem;     --title-7-lh: 1.1;   --title-7-ls: -0.022em;
  --title-8-size: 4rem;       --title-8-lh: 1.06;  --title-8-ls: -0.022em;

  /* 1.4 texto — meio degrau acima do Linear: a tela é para leitura longa --- */
  --text-large-size: 1.125rem;  --text-large-lh: 1.65; --text-large-ls: 0;
  --text-size: 1rem;            --text-lh: 1.6;        --text-ls: -0.008em;
  --text-small-size: 0.9375rem; --text-small-lh: 1.55; --text-small-ls: -0.01em;
  --text-mini-size: 0.8125rem;  --text-mini-lh: 1.5;   --text-mini-ls: -0.01em;
  --text-micro-size: 0.75rem;   --text-micro-lh: 1.4;  --text-micro-ls: 0;

  /* 1.5 a marca — medida do PNG da logo, apps/oficina/docs/marca/README.md -- */
  --navy-950: #0b101b;   /* o fundo da página: um degrau abaixo da logo */
  --navy-900: #0f1524;
  --navy-800: #172033;   /* o navy da logo: painéis e o botão escuro */
  --navy-700: #1f2b42;
  --navy-600: #2a3852;
  --navy-500: #3d4c68;
  --slate-500: #61708a;  /* o cartão apagado da logo */
  --slate-400: #7d8ba3;
  --slate-300: #9aa6ba;
  --slate-200: #b8c2d3;
  --paper-100: #e6eaf1;
  --paper-050: #f7f9fc;  /* o traço da logo, e o papel do app */
  --amber-500: #f2a93b;  /* o cartão aceso: o ÚNICO acento */
  --amber-400: #f6be66;
  --amber-600: #d98f22;
  --amber-700: #8a5a12;  /* âmbar escuro para texto sobre papel: 5,9:1 */

  /* 1.6 superfícies e texto — o padrão é ESCURO, o mundo da logo ---------- */
  --color-bg-primary: var(--navy-950);
  --color-bg-secondary: var(--navy-900);
  --color-bg-tertiary: var(--navy-800);
  --color-bg-translucent: rgba(247, 249, 252, 0.05);
  --color-bg-panel: var(--navy-800);

  --color-text-primary: var(--paper-050);   /* 17,6:1 sobre o navy-950 */
  --color-text-secondary: var(--slate-200); /* 11,2:1 */
  --color-text-tertiary: var(--slate-300);  /* 7,6:1 */
  --color-text-quaternary: var(--slate-400);/* 4,9:1 */
  --color-text-on-brand: var(--navy-800);   /* navy sobre âmbar: 8,5:1 */

  --color-border-primary: rgba(247, 249, 252, 0.09);
  --color-border-secondary: rgba(247, 249, 252, 0.16);
  --color-border-translucent: rgba(247, 249, 252, 0.08);
  --color-border-translucent-strong: rgba(247, 249, 252, 0.16);

  --color-accent: var(--amber-500);
  --color-accent-text: var(--amber-400);    /* âmbar claro para texto pequeno: 10,3:1 */
  --color-positive: #4ade80;
  --color-warning: #fbbf24;
  --color-danger: #f87171;

  /* 1.7 raios ------------------------------------------------------------ */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-rounded: 9999px;

  /* 1.8 sombras — no escuro a sombra é mais funda e menos larga ------------ */
  --shadow-low: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-high: 0 4px 8px rgba(0, 0, 0, 0.35), 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-brand: 0 6px 20px rgba(242, 169, 59, 0.28);

  /* 1.9 tempo e curva ---------------------------------------------------- */
  --speed-quick: 0.1s;
  --speed-regular: 0.25s;
  --speed-button: 0.16s;
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);

  /* 1.10 medidas da página ---------------------------------------------- */
  --header-height: 64px;
  --header-blur: 20px;
  --page-max-width: 1152px;
  --prose-max-width: 640px;
  --page-padding-inline: 24px;
  --page-padding-block: 96px;
  --border-hairline: 1px;
  --layer-header: 100;
}

/* superfície clara: o papel do app, para a dobra que mostra a tela "de dia".
   Vale em qualquer bloco com [data-surface="light"]. */
[data-surface="light"] {
  --color-bg-primary: var(--paper-050);
  --color-bg-secondary: #eef1f6;
  --color-bg-tertiary: var(--paper-100);
  --color-bg-translucent: rgba(23, 32, 51, 0.05);
  --color-bg-panel: #ffffff;
  --color-text-primary: var(--navy-800);   /* 15,3:1 sobre o papel */
  --color-text-secondary: #3d4c68;
  --color-text-tertiary: #4f5d78;          /* 6,6:1 */
  --color-text-quaternary: var(--slate-500);
  --color-border-primary: #dfe4ec;
  --color-border-secondary: #c5cdd9;
  --color-border-translucent: rgba(23, 32, 51, 0.08);
  --color-border-translucent-strong: rgba(23, 32, 51, 0.16);
  --color-accent-text: var(--amber-700);
  --color-positive: #15803d;
  --shadow-low: 0 1px 2px rgba(23, 32, 51, 0.05), 0 2px 6px rgba(23, 32, 51, 0.05);
  --shadow-medium: 0 2px 4px rgba(23, 32, 51, 0.05), 0 8px 24px rgba(23, 32, 51, 0.08);
  --shadow-high: 0 4px 8px rgba(23, 32, 51, 0.06), 0 16px 48px rgba(23, 32, 51, 0.12);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
}

/* ---------- 2. base ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-regular);
  font-feature-settings: var(--font-settings);
  font-size: var(--text-size);
  line-height: var(--text-lh);
  letter-spacing: var(--text-ls);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
/* O `height: auto` é o que impede a foto de sair estreitada. Sem ele o atributo
   height="900" da tag vira altura fixa, o max-width encolhe só a largura, e a
   imagem fica espremida — 978x900 no lugar de 978x611.
   O svg fica de fora: ele tem viewBox, e a altura dele vem do CSS de cada uso.
   Defeito real, medido em 10/09/2026 nas cinco cópias deste reset. */
img, video { display: block; max-width: 100%; height: auto; }
svg { display: block; max-width: 100%; }
a { color: inherit; }

::selection { background: var(--amber-500); color: var(--navy-800); }

:focus-visible {
  outline: 2px solid var(--amber-500);
  outline-offset: 2px;
  border-radius: var(--radius-4);
}

/* ---------- 3. tipografia ----------------------------------------------- */

.ds-title-8, .ds-title-7, .ds-title-6, .ds-title-5,
.ds-title-4, .ds-title-3, .ds-title-2, .ds-title-1 {
  font-weight: var(--font-weight-semibold);
  text-wrap: balance;
}

.ds-title-8 { font-size: var(--title-8-size); line-height: var(--title-8-lh); letter-spacing: var(--title-8-ls); }
.ds-title-7 { font-size: var(--title-7-size); line-height: var(--title-7-lh); letter-spacing: var(--title-7-ls); }
.ds-title-6 { font-size: var(--title-6-size); line-height: var(--title-6-lh); letter-spacing: var(--title-6-ls); }
.ds-title-5 { font-size: var(--title-5-size); line-height: var(--title-5-lh); letter-spacing: var(--title-5-ls); }
.ds-title-4 { font-size: var(--title-4-size); line-height: var(--title-4-lh); letter-spacing: var(--title-4-ls); }
.ds-title-3 { font-size: var(--title-3-size); line-height: var(--title-3-lh); letter-spacing: var(--title-3-ls); }
.ds-title-2 { font-size: var(--title-2-size); line-height: var(--title-2-lh); letter-spacing: var(--title-2-ls); }
.ds-title-1 { font-size: var(--title-1-size); line-height: var(--title-1-lh); letter-spacing: var(--title-1-ls); }

@media (max-width: 1024px) {
  .ds-title-8 { font-size: var(--title-7-size); }
  .ds-title-7 { font-size: var(--title-6-size); }
  .ds-title-6 { font-size: var(--title-5-size); }
}
@media (max-width: 640px) {
  .ds-title-8, .ds-title-7 { font-size: var(--title-5-size); line-height: 1.08; }
  .ds-title-6 { font-size: var(--title-4-size); }
  .ds-title-5 { font-size: var(--title-4-size); }
}

.ds-text-large { font-size: var(--text-large-size); line-height: var(--text-large-lh); letter-spacing: var(--text-large-ls); }
.ds-text       { font-size: var(--text-size); line-height: var(--text-lh); letter-spacing: var(--text-ls); }
.ds-text-small { font-size: var(--text-small-size); line-height: var(--text-small-lh); letter-spacing: var(--text-small-ls); }
.ds-text-mini  { font-size: var(--text-mini-size); line-height: var(--text-mini-lh); letter-spacing: var(--text-mini-ls); }
.ds-text-micro { font-size: var(--text-micro-size); line-height: var(--text-micro-lh); letter-spacing: var(--text-micro-ls); }

.ds-muted { color: var(--color-text-tertiary); }
.ds-prose { max-width: var(--prose-max-width); }
.ds-mono  { font-family: var(--font-monospace); font-size: 0.92em; }

/* a palavra em destaque no título: âmbar, e só uma vez por título */
.ds-acento { color: var(--color-accent); }

.ds-eyebrow {
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

/* ---------- 4. layout ---------------------------------------------------- */

.ds-page { max-width: var(--page-max-width); margin-inline: auto; padding-inline: var(--page-padding-inline); }
.ds-section { padding-block: var(--page-padding-block); }
@media (max-width: 640px) { :root { --page-padding-block: 64px; } }

.ds-stack { display: flex; flex-direction: column; }
.ds-gap-8  { gap: 8px; }  .ds-gap-12 { gap: 12px; } .ds-gap-16 { gap: 16px; }
.ds-gap-24 { gap: 24px; } .ds-gap-32 { gap: 32px; } .ds-gap-48 { gap: 48px; }

.ds-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ds-row  { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.ds-divider { height: 1px; background: var(--color-border-primary); border: 0; }

/* ---------- 5. botões ---------------------------------------------------- */

.ds-btn {
  --btn-height: 40px;
  --btn-padding: 0 18px;
  --btn-font-size: var(--text-small-size);
  appearance: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-height);
  padding: var(--btn-padding);
  border-radius: var(--radius-8);
  font-family: inherit;
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: var(--speed-button) var(--ease-out-quad);
  transition-property: background-color, border-color, color, box-shadow, transform, filter;
}
.ds-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ds-btn:active:not(:disabled) { transform: translateY(1px); }
.ds-btn > svg { width: 16px; height: 16px; fill: currentColor; }

/* o botão principal é o cartão aceso: âmbar com navy por cima (8,5:1) */
.ds-btn-primary {
  background: var(--amber-500);
  color: var(--navy-800);
  box-shadow: var(--shadow-brand);
}
.ds-btn-primary:hover { background: var(--amber-400); box-shadow: 0 8px 26px rgba(242, 169, 59, 0.38); }

.ds-btn-secondary {
  background: var(--color-bg-translucent);
  color: var(--color-text-primary);
  border: var(--border-hairline) solid var(--color-border-secondary);
}
.ds-btn-secondary:hover { border-color: var(--amber-500); color: var(--color-text-primary); background: rgba(242, 169, 59, 0.08); }

.ds-btn-ghost { background: transparent; color: var(--color-text-secondary); }
.ds-btn-ghost:hover { background: var(--color-bg-translucent); color: var(--color-text-primary); }

.ds-btn-small { --btn-height: 34px; --btn-padding: 0 14px; --btn-font-size: var(--text-mini-size); }
.ds-btn-large { --btn-height: 50px; --btn-padding: 0 26px; --btn-font-size: var(--text-size); }

/* ---------- 5.1 campo e formulário: a lista de espera --------------------- */

.ds-field {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border-radius: var(--radius-8);
  border: var(--border-hairline) solid var(--color-border-secondary);
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-size);
  transition: border-color var(--speed-button) var(--ease-out-quad),
              box-shadow var(--speed-button) var(--ease-out-quad);
}
.ds-field::placeholder { color: var(--color-text-quaternary); }
.ds-field:focus {
  outline: none;
  border-color: var(--amber-500);
  box-shadow: 0 0 0 4px rgba(242, 169, 59, 0.18);
}
.ds-field[aria-invalid="true"] { border-color: var(--color-danger); }
[data-surface="light"] .ds-field { background: #ffffff; }

.ds-form { display: flex; gap: 10px; width: 100%; max-width: 560px; }
.ds-form .ds-field { flex: 1 1 auto; min-width: 0; }
@media (max-width: 520px) { .ds-form { flex-direction: column; } .ds-form .ds-btn { width: 100%; } }

.ds-form-note { color: var(--color-text-tertiary); font-size: var(--text-mini-size); }
.ds-form-note a { color: var(--color-accent-text); }
/* o aviso do envio: vazio não ocupa espaço; ok em verde, erro em vermelho */
.ds-form-aviso:empty { display: none; }
.ds-form-aviso[data-estado="ok"] { color: var(--color-positive); font-weight: var(--font-weight-medium); }
.ds-form-aviso[data-estado="erro"] { color: var(--color-danger); }

/* campo-armadilha: fora da tela; robô preenche, gente não vê */
.ds-armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 6. superfícies e cards -------------------------------------- */

.ds-card {
  background: var(--color-bg-panel);
  border: var(--border-hairline) solid var(--color-border-primary);
  border-radius: var(--radius-16);
  padding: 24px;
  transition: box-shadow var(--speed-regular) var(--ease-out-quad),
              transform var(--speed-regular) var(--ease-out-quad),
              border-color var(--speed-regular) var(--ease-out-quad);
}
.ds-card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); border-color: var(--color-border-secondary); }

.ds-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-rounded);
  background: rgba(242, 169, 59, 0.1);
  border: var(--border-hairline) solid rgba(242, 169, 59, 0.35);
  color: var(--color-accent-text);
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
}
[data-surface="light"] .ds-badge {
  background: rgba(242, 169, 59, 0.14);
  border-color: rgba(217, 143, 34, 0.45);
}

/* o ponto que pulsa dentro do badge: "em uso agora" */
.ds-pulso {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber-500);
  box-shadow: 0 0 0 0 rgba(242, 169, 59, 0.6);
  animation: ds-pulso 2.2s var(--ease-out-quad) infinite;
}
@keyframes ds-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(242, 169, 59, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(242, 169, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 169, 59, 0); }
}

.ds-kbd {
  font-family: var(--font-monospace);
  font-size: 0.85em;
  padding: 2px 7px;
  border-radius: var(--radius-4);
  background: var(--color-bg-tertiary);
  border: var(--border-hairline) solid var(--color-border-secondary);
  color: var(--color-text-primary);
}

/* o código-endereço, como aparece no quadro: PA2.E.QFMT */
.ds-chave {
  font-family: var(--font-monospace);
  font-size: 0.8em;
  padding: 1px 6px;
  border-radius: var(--radius-4);
  background: var(--color-bg-translucent);
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}

/* 6.1 borda em gradiente — máscara com composite xor (linear.app) */
.ds-gradient-border { position: relative; }
.ds-gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--gradient-border-size, 1px);
  border-radius: inherit;
  background: var(--gradient-border,
    linear-gradient(160deg, rgba(242, 169, 59, 0.7), rgba(242, 169, 59, 0) 55%));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* 6.2 brilho na borda que segue o cursor (JS alimenta --edge-x e --edge-y) */
.ds-edge-highlight { position: relative; isolation: isolate; }
.ds-edge-highlight::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    260px circle at var(--edge-x, 50%) var(--edge-y, 0%),
    rgba(242, 169, 59, 0.14),
    transparent 65%
  );
  transition: opacity var(--speed-regular) var(--ease-out-quad);
}
.ds-edge-highlight:hover::after { opacity: 1; }

/* 6.3 grão: textura de ruído, sem imagem externa */
.ds-grain { position: relative; }
.ds-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* 6.4 clarão âmbar atrás da primeira dobra: o cartão aceso visto de longe */
.ds-glow { position: relative; overflow: hidden; }
.ds-glow::before {
  content: "";
  position: absolute;
  top: -35%;
  left: 50%;
  width: min(1100px, 130%);
  aspect-ratio: 2 / 1;
  translate: -50% 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(242, 169, 59, 0.13), rgba(242, 169, 59, 0) 62%);
}

/* 6.5 a malha da bancada: pontos a cada 28 px, que somem para as bordas.
   É a única textura de fundo da página, e é o que diz "bancada" sem dizer. */
.ds-bench { position: relative; }
.ds-bench::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(247, 249, 252, 0.12) 1px, transparent 1.2px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%);
}
[data-surface="light"].ds-bench::after,
[data-surface="light"] .ds-bench::after {
  background-image: radial-gradient(rgba(23, 32, 51, 0.16) 1px, transparent 1.2px);
}

/* ---------- 7. cabeçalho ------------------------------------------------- */

.ds-header {
  position: sticky;
  top: 0;
  z-index: var(--layer-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
  border-bottom: var(--border-hairline) solid transparent;
  transition: background-color var(--speed-regular) var(--ease-out-quad),
              border-color var(--speed-regular) var(--ease-out-quad);
}
.ds-header[data-scrolled="true"] {
  background: rgba(11, 16, 27, 0.72);
  backdrop-filter: blur(var(--header-blur));
  -webkit-backdrop-filter: blur(var(--header-blur));
  border-bottom-color: var(--color-border-translucent);
}
.ds-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.ds-nav { display: flex; align-items: center; gap: 4px; }
.ds-nav a {
  padding: 6px 12px;
  border-radius: var(--radius-8);
  color: var(--color-text-secondary);
  font-size: var(--text-small-size);
  text-decoration: none;
  transition: color var(--speed-button) var(--ease-out-quad),
              background-color var(--speed-button) var(--ease-out-quad);
}
.ds-nav a:hover { color: var(--color-text-primary); background: var(--color-bg-translucent); }
@media (max-width: 760px) { .ds-nav { display: none; } }

/* a marca no cabeçalho: o símbolo em vetor + a palavra em Inter, como o app faz
   (src/componentes/Marca.tsx) — o PNG de 1200 px vira borrão em 28 px de altura */
.ds-marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.ds-marca svg { width: 30px; height: 30px; border-radius: 7px; flex: none; }
.ds-marca b { font-weight: var(--font-weight-bold); font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1; }

/* ---------- 8. perguntas ------------------------------------------------ */

.ds-faq { border-top: var(--border-hairline) solid var(--color-border-primary); }
.ds-faq details { border-bottom: var(--border-hairline) solid var(--color-border-primary); }
.ds-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-weight: var(--font-weight-medium);
  font-size: var(--text-large-size);
  transition: color var(--speed-button) var(--ease-out-quad);
}
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary:hover { color: var(--color-accent-text); }
.ds-faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  transition: rotate var(--speed-regular) var(--ease-out-quart);
}
.ds-faq details[open] summary::after { rotate: -135deg; }
.ds-faq p { padding-bottom: 20px; color: var(--color-text-secondary); max-width: var(--prose-max-width); }

/* ---------- 9. lista com marca -------------------------------------------- */

.ds-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ds-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--color-text-secondary); font-size: var(--text-small-size); }
.ds-check { flex: none; width: 16px; height: 16px; margin-top: 4px; fill: var(--amber-500); }

/* ---------- 10. número grande ------------------------------------------- */

.ds-numero { display: flex; flex-direction: column; gap: 6px; }
.ds-numero b {
  font-size: var(--title-6-size);
  line-height: 1;
  letter-spacing: var(--title-6-ls);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}
.ds-numero b small { font-size: 0.5em; color: var(--color-accent-text); margin-left: 4px; font-weight: var(--font-weight-medium); }
/* só o rótulo abaixo do número: o span de dentro do <b> (o contador) herda o tamanho grande */
.ds-numero > span { color: var(--color-text-tertiary); font-size: var(--text-small-size); }
@media (max-width: 640px) { .ds-numero b { font-size: var(--title-5-size); } }

/* ---------- 11. movimento herdado ---------------------------------------- */

.ds-reveal { transition: none; }
.js .ds-reveal {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.6s var(--ease-out-quint), translate 0.6s var(--ease-out-quint);
  transition-delay: var(--reveal-delay, 0s);
}
.js .ds-reveal[data-visible="true"] { opacity: 1; translate: 0 0; }

@keyframes ds-fade-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.ds-fade-in { animation: ds-fade-in 0.48s var(--ease-out-quint) both; }

/* ---------- 12. a bancada: os efeitos desta marca ------------------------ */

/* 12.1 a janela — a moldura do navegador em volta da bancada */
.ds-janela {
  width: 100%;
  border: var(--border-hairline) solid var(--color-border-secondary);
  border-radius: var(--radius-16);
  background: var(--navy-900);
  box-shadow: var(--shadow-high);
  overflow: hidden;
  text-align: left;
}
.ds-janela-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: var(--border-hairline) solid var(--color-border-primary);
  background: var(--navy-800);
  font-size: var(--text-micro-size);
  color: var(--color-text-tertiary);
}
.ds-janela-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--navy-500); }
.ds-janela-url {
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: var(--radius-6);
  background: var(--navy-900);
  font-family: var(--font-monospace);
  font-size: 11px;
  color: var(--color-text-tertiary);
}

/* 12.2 os três painéis, como no app: conversa · quadro · arquivos */
.ds-bancada {
  display: grid;
  grid-template-columns: 1.15fr 1.3fr 0.85fr;
  /* cabe a conversa inteira da hero (quatro balões) sem cortar o último */
  min-height: 440px;
}
.ds-painel { border-right: var(--border-hairline) solid var(--color-border-primary); min-width: 0; display: flex; flex-direction: column; }
.ds-painel:last-child { border-right: 0; }
.ds-painel-cabeca {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: var(--border-hairline) solid var(--color-border-primary);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ds-painel-cabeca .ds-aba { padding: 2px 7px; border-radius: var(--radius-4); text-transform: none; letter-spacing: 0; }
.ds-painel-cabeca .ds-aba[data-ativa] { background: var(--paper-050); color: var(--navy-800); }
.ds-painel-corpo { padding: 12px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

@media (max-width: 860px) {
  .ds-bancada { grid-template-columns: 1fr 1fr; }
  .ds-painel-arquivos { display: none; }
}
@media (max-width: 560px) {
  .ds-bancada { grid-template-columns: 1fr; min-height: 0; }
  .ds-painel { border-right: 0; border-bottom: var(--border-hairline) solid var(--color-border-primary); }
}

/* 12.3 a conversa que se escreve */
.ds-balao {
  max-width: 92%;
  padding: 8px 11px;
  border-radius: var(--radius-8);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  background: var(--navy-800);
  border: var(--border-hairline) solid var(--color-border-primary);
}
.ds-balao[data-de="marco"] { align-self: flex-end; background: var(--navy-700); color: var(--color-text-primary); }
.ds-balao b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.ds-balao code, .ds-arvore { font-family: var(--font-monospace); font-size: 11px; }
.ds-arvore { white-space: pre; color: var(--color-text-tertiary); margin-top: 6px; line-height: 1.45; }
.ds-arvore em { font-style: normal; color: var(--color-accent-text); }

/* cada balão entra na sua vez; o loop inteiro dura 14 s e recomeça */
.js [data-ds-bancada] .ds-balao { opacity: 0; translate: 0 6px; }
.js [data-ds-bancada][data-animando="true"] .ds-balao {
  animation: ds-entra 14s var(--ease-out-quint) infinite;
  animation-delay: var(--vez, 0s);
}
@keyframes ds-entra {
  0%, 2%   { opacity: 0; translate: 0 6px; }
  5%, 92%  { opacity: 1; translate: 0 0; }
  96%, 100% { opacity: 0; translate: 0 0; }
}

/* o cursor piscando no fim da última resposta */
.ds-cursor::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 12px;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--amber-500);
  animation: ds-pisca 1s steps(2, start) infinite;
}
@keyframes ds-pisca { to { visibility: hidden; } }

/* 12.4 o quadro: três colunas, e o cartão aceso que anda — a logo em movimento */
.ds-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: 1; }
.ds-coluna {
  border-radius: var(--radius-8);
  background: rgba(247, 249, 252, 0.03);
  border: var(--border-hairline) solid var(--color-border-primary);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ds-coluna-nome { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-quaternary); display: flex; justify-content: space-between; }
.ds-cartao {
  padding: 7px 8px;
  border-radius: var(--radius-6);
  background: var(--slate-500);
  color: var(--paper-050);
  font-size: 11px;
  line-height: 1.35;
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-cartao[data-aceso] {
  background: var(--amber-500);
  color: var(--navy-800);
  box-shadow: 0 4px 14px rgba(242, 169, 59, 0.35);
}
.ds-cartao-fantasma { opacity: 0.35; background: transparent; border: 1px dashed var(--slate-500); color: var(--slate-300); }

/* o cartão aceso vai da coluna do meio para a da direita, e volta ao começo do loop.
   Ele está desenhado NA coluna do meio; o deslocamento é a largura de uma coluna
   mais o gap, medido no próprio grid (--passo, escrito no HTML). */
.js [data-ds-bancada][data-animando="true"] .ds-cartao[data-aceso] {
  animation: ds-anda 14s var(--ease-in-out-quart) infinite;
}
@keyframes ds-anda {
  0%, 55%   { transform: translateX(0); }
  62%, 92%  { transform: translateX(calc(100% + 8px + 16px)); }
  96%, 100% { transform: translateX(0); opacity: 1; }
}

/* 12.5 os arquivos: a árvore, e o arquivo que abre */
.ds-arquivos { font-family: var(--font-monospace); font-size: 11px; line-height: 1.9; color: var(--color-text-tertiary); }
.ds-arquivos div { padding-left: calc(var(--nivel, 0) * 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-arquivos [data-aberto] { color: var(--color-text-primary); background: rgba(242, 169, 59, 0.12); border-radius: 3px; margin-left: -4px; padding-left: calc(var(--nivel, 0) * 12px + 4px); }
.js [data-ds-bancada][data-animando="true"] .ds-arquivos [data-aberto] {
  animation: ds-abre 14s steps(1, end) infinite;
}
@keyframes ds-abre {
  0%, 38%  { background: transparent; color: var(--color-text-tertiary); }
  40%, 92% { background: rgba(242, 169, 59, 0.12); color: var(--color-text-primary); }
  96%, 100% { background: transparent; color: var(--color-text-tertiary); }
}

/* 12.6 o símbolo animado: a logo com o cartão aceso indo para a última coluna */
.ds-simbolo-vivo .cartao-aceso { transform-box: fill-box; transform-origin: center; }
.js .ds-simbolo-vivo .cartao-aceso { animation: ds-acende 6s var(--ease-in-out-quart) infinite; }
@keyframes ds-acende {
  0%, 30%  { transform: translateX(0); }
  45%, 80% { transform: translateX(-27px); }
  95%, 100% { transform: translateX(0); }
}

/* ---------- 13. movimento reduzido ------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .ds-reveal { opacity: 1; translate: 0 0; }
  .js [data-ds-bancada] .ds-balao { opacity: 1; translate: 0 0; }
}