/* Design System da 2G · ce84631 · gerado por scripts/exportar.mjs, não edite à mão */
/* Design System da 2G completo: tokens, base, componentes, padrões e efeitos */
/*
 * 2G · Base
 * Estilos globais mínimos sobre os tokens. Fontes vêm do Google Fonts
 * (Geist e Geist Mono), carregadas por quem consome o DS.
 */
/*
 * 2G · Tokens primitivos
 * Valores crus da marca. Componentes não usam estes tokens direto:
 * usam os semânticos de tema.css, que apontam para cá.
 */
:root {
  /* Grafite: a cor da marca é o 850 */
  --2g-grafite-50: #f4f5f6;
  --2g-grafite-100: #e6e8ea;
  --2g-grafite-200: #cdd1d5;
  --2g-grafite-300: #a9afb5;
  --2g-grafite-400: #808890;
  --2g-grafite-500: #5f6770;
  --2g-grafite-600: #4a5058;
  --2g-grafite-700: #383d44;
  --2g-grafite-800: #2a2e33;
  --2g-grafite-850: #1f2226;
  --2g-grafite-900: #16181b;
  --2g-grafite-950: #0e0f11;

  /* Azul: o único acento */
  --2g-azul-300: #7aa3ff; /* texto azul sobre escuro */
  --2g-azul-500: #2f6bff; /* Azul 2G: nó do logo e gráficos */
  --2g-azul-600: #1e56e0; /* Azul Profundo: botões, texto branco 6,1:1 */
  --2g-azul-700: #1a4bc4; /* hover do botão */

  /* Estados (proposta da etapa 1, uso restrito a feedback de formulário e alertas) */
  --2g-vermelho-300: #ff8a80;
  --2g-vermelho-600: #c62828;
  --2g-verde-300: #6fd39a;
  --2g-verde-600: #1b7a46;
  --2g-ambar-300: #f5c46b;
  --2g-ambar-600: #9a6200;

  --2g-branco: #ffffff;
}

/*
 * 2G · Tokens semânticos de cor
 * Escuro (Blueprint) é o padrão. Claro vale para documentos, propostas
 * e apresentações impressas: <html data-theme="claro">.
 */
:root,
[data-theme="escuro"] {
  color-scheme: dark;

  --cor-fundo: var(--2g-grafite-900);
  --cor-fundo-profundo: var(--2g-grafite-950);
  --cor-superficie: rgba(22, 24, 27, 0.6); /* folha sobre a grade */
  --cor-superficie-elevada: #1b1d21;
  --cor-superficie-hover: var(--2g-grafite-800);

  --cor-borda-sutil: rgba(244, 245, 246, 0.12);
  --cor-borda: rgba(244, 245, 246, 0.18);
  --cor-borda-forte: rgba(244, 245, 246, 0.3);
  --cor-grade: rgba(244, 245, 246, 0.045);
  --cor-borda-campo: var(--2g-grafite-400); /* contorno de campos: 3:1 com o fundo */

  --cor-texto: var(--2g-grafite-50);
  --cor-texto-secundario: var(--2g-grafite-200);
  --cor-texto-suave: var(--2g-grafite-300);
  --cor-texto-acento: var(--2g-azul-300);

  --cor-marca-traco: var(--2g-grafite-50);
  --cor-marca-no: var(--2g-azul-500);
  --cor-marca-fio: rgba(244, 245, 246, 0.3); /* divisória da assinatura */

  --cor-acao: var(--2g-azul-600);
  --cor-acao-hover: var(--2g-azul-700);
  --cor-acao-texto: var(--2g-branco);
  --cor-foco: var(--2g-azul-300);

  --cor-perigo: var(--2g-vermelho-300);
  --cor-sucesso: var(--2g-verde-300);
  --cor-alerta: var(--2g-ambar-300);
}

[data-theme="claro"] {
  color-scheme: light;

  --cor-fundo: var(--2g-grafite-50);
  --cor-fundo-profundo: var(--2g-grafite-100);
  --cor-superficie: var(--2g-branco);
  --cor-superficie-elevada: var(--2g-branco);
  --cor-superficie-hover: var(--2g-grafite-100);

  --cor-borda-sutil: rgba(31, 34, 38, 0.1);
  --cor-borda: rgba(31, 34, 38, 0.16);
  --cor-borda-forte: rgba(31, 34, 38, 0.3);
  --cor-grade: rgba(31, 34, 38, 0.05);
  --cor-borda-campo: var(--2g-grafite-400);

  --cor-texto: var(--2g-grafite-850);
  --cor-texto-secundario: var(--2g-grafite-700);
  --cor-texto-suave: var(--2g-grafite-500);
  --cor-texto-acento: var(--2g-azul-600);

  --cor-marca-traco: var(--2g-grafite-850);
  --cor-marca-no: var(--2g-azul-500);
  --cor-marca-fio: var(--2g-grafite-300);

  --cor-acao: var(--2g-azul-600);
  --cor-acao-hover: var(--2g-azul-700);
  --cor-acao-texto: var(--2g-branco);
  --cor-foco: var(--2g-azul-600);

  --cor-perigo: var(--2g-vermelho-600);
  --cor-sucesso: var(--2g-verde-600);
  --cor-alerta: var(--2g-ambar-600);
}

/*
 * 2G · Tipografia
 * Geist para texto, Geist Mono para rótulos técnicos, carimbos e números.
 * Escala tirada do site aprovado (Blueprint).
 */
:root {
  --fonte-texto: "Geist", "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: "Geist Mono", ui-monospace, monospace;

  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-negrito: 700;

  /* Tamanhos */
  --texto-xs: 12px;   /* rótulo mono pequeno */
  --texto-sm: 13px;   /* sobretítulo mono, legenda */
  --texto-md: 15px;   /* navegação, texto auxiliar */
  --texto-base: 17px; /* corpo */
  --texto-lg: 19px;   /* lide */
  --texto-xl: 22px;   /* título de cartão (h3) */
  --titulo-sm: clamp(30px, 3.2vw, 42px);
  --titulo-md: clamp(30px, 3.4vw, 44px); /* h2 de seção */
  --titulo-lg: clamp(40px, 5.2vw, 68px); /* h1 do hero */

  /* Entrelinha */
  --entrelinha-titulo: 1.05;
  --entrelinha-compacta: 1.15;
  --entrelinha-texto: 1.55;

  /* Espaçamento entre letras */
  --tracking-display: -0.04em;
  --tracking-titulo: -0.03em;
  --tracking-subtitulo: -0.02em;
  --tracking-caixa-alta: 0.08em; /* mínimo da marca: 0.06em */
  --tracking-sobretitulo: 0.1em;
}

/*
 * 2G · Espaço, forma e camadas
 * Base de 4 px. A grade do Blueprint é de 32 px.
 */
:root {
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 20px;
  --espaco-6: 24px;
  --espaco-7: 28px;
  --espaco-8: 32px;
  --espaco-10: 40px;
  --espaco-12: 48px;
  --espaco-14: 56px;
  --espaco-18: 72px;

  --grade: 32px;
  --largura-conteudo: 1200px;
  --margem-lateral: 24px;

  /* Raios: técnico, quase reto */
  --raio-sm: 2px;
  --raio-md: 4px;  /* folhas, cartões, tabelas */
  --raio-lg: 6px;  /* botões e campos */
  --raio-xl: 10px; /* balões, ilustrações */
  --raio-redondo: 999px;

  /* Bordas */
  --borda-fina: 1px;
  --borda-media: 1.5px;
  --borda-grossa: 2px;

  /* Ícones de linha */
  --icone-traco: 1.8;
  --icone-sm: 16px;
  --icone-md: 20px;

  /* Alvo de toque mínimo */
  --alvo-min: 44px;

  /* Sombras: o Blueprint é plano; sombra só para camadas soltas (menu, modal) */
  --sombra-foco: 0 0 0 2px var(--cor-foco);
  --sombra-camada: 0 12px 32px rgba(14, 15, 17, 0.45);

  /* Camadas */
  --z-base: 0;
  --z-cabecalho: 100;
  --z-menu: 200;
  --z-modal: 300;
  --z-aviso: 400;
}

/*
 * 2G · Movimento
 * Curto e funcional: confirma a ação, nunca enfeita.
 * As animações de efeitos.css só rodam com <html data-movimento="ativo">, que o efeitos.js
 * liga quando o visitante não pediu movimento reduzido.
 */
:root {
  --duracao-instante: 80ms;  /* troca de cor em hover */
  --duracao-rapida: 160ms;   /* foco, botões, campos */
  --duracao-media: 240ms;    /* abrir menu, aparecer aviso */
  --duracao-lenta: 450ms;    /* carrossel, troca de slide */
  --duracao-traco: 1200ms;   /* desenho técnico sendo traçado */
  --duracao-pulso: 1200ms;   /* ciclo do carregando */

  --curva-padrao: cubic-bezier(0.2, 0, 0, 1);
  --curva-entrada: cubic-bezier(0, 0, 0.2, 1);
  --curva-saida: cubic-bezier(0.4, 0, 1, 1);

  --transicao-cor: color var(--duracao-instante) var(--curva-padrao),
    background-color var(--duracao-instante) var(--curva-padrao),
    border-color var(--duracao-instante) var(--curva-padrao);
  --transicao-transformacao: transform var(--duracao-lenta) var(--curva-padrao);
  --transicao-opacidade: opacity var(--duracao-media) var(--curva-padrao);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duracao-instante: 0ms;
    --duracao-rapida: 0ms;
    --duracao-media: 0ms;
    --duracao-lenta: 0ms;
    --duracao-traco: 0ms;
  }
}

/* Movimento ligado por efeitos.js (inclusive no modo ?movimento=forcado) */
:root[data-movimento="ativo"] {
  --duracao-instante: 80ms;
  --duracao-rapida: 160ms;
  --duracao-media: 240ms;
  --duracao-lenta: 450ms;
  --duracao-traco: 1200ms;
}

/* Forçar movimento reduzido (testes, preferência salva pelo usuário) */
:root[data-movimento="reduzido"] {
  --duracao-instante: 0ms;
  --duracao-rapida: 0ms;
  --duracao-media: 0ms;
  --duracao-lenta: 0ms;
  --duracao-traco: 0ms;
}



body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  line-height: var(--entrelinha-texto);
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 3px;
}

/* Fundo de prancheta com grade de 32 px */
.ds-grade {
  background-color: var(--cor-fundo);
  background-image: linear-gradient(var(--cor-grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--cor-grade) 1px, transparent 1px);
  background-size: var(--grade) var(--grade);
}

/*
 * Tríade e assinatura em HTML + CSS (seguem o tema)
 *
 * <svg class="ds-triade" viewBox="0 0 64 64" aria-hidden="true">
 *   <path class="ds-triade__traco" d="M32 14 L14 48 L50 48 Z" stroke-width="4.5"/>
 *   <circle class="ds-triade__no ds-triade__no--pessoa" cx="32" cy="14" r="8"/>
 *   <circle class="ds-triade__no" cx="14" cy="48" r="8"/>
 *   <circle class="ds-triade__no" cx="50" cy="48" r="8"/>
 * </svg>
 * Traço e raio pelo tamanho: 16/24/32 px → 6/5/4,5 e 10/9/8; acima de 32 px → 3 e 7.
 *
 * Assinatura: <a class="ds-assinatura" href="/"> + svg.ds-triade + <span class="ds-assinatura__sigla">2G</span>
 *   + <span class="ds-assinatura__fio"></span> + <span class="ds-assinatura__nome">Inteligência<br>Aplicada</span></a>
 */
.ds-triade {
  display: block;
  flex: none;
  width: 34px;
  height: 34px;
}

.ds-triade__traco {
  fill: none;
  stroke: var(--cor-marca-traco);
  stroke-linejoin: round;
}

.ds-triade__no {
  fill: var(--cor-marca-traco);
}

.ds-triade__no--pessoa {
  fill: var(--cor-marca-no);
}

.ds-assinatura {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cor-texto);
  text-decoration: none;
}

.ds-assinatura__sigla {
  font-size: 22px;
  font-weight: var(--peso-negrito);
  line-height: 1;
  letter-spacing: var(--tracking-display);
}

.ds-assinatura__fio {
  width: 1px;
  height: 26px;
  background: var(--cor-marca-fio);
}

.ds-assinatura__nome {
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  line-height: var(--entrelinha-compacta);
  color: var(--cor-texto-secundario);
}

/* Versão pequena, para rodapé */
.ds-assinatura--sm {
  gap: var(--espaco-2);
}

.ds-assinatura--sm .ds-triade {
  width: 22px;
  height: 22px;
}

.ds-assinatura--sm .ds-assinatura__sigla {
  font-size: var(--texto-md);
}

.ds-assinatura--sm .ds-assinatura__fio {
  height: 18px;
}

/*
 * Sobretítulo, selo e ícone
 */

/* Rótulo técnico acima de um título */
.ds-sobretitulo {
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
  font-weight: var(--peso-regular);
  letter-spacing: var(--tracking-sobretitulo);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.ds-sobretitulo--acento {
  color: var(--cor-texto-acento);
}

/*
 * Selo: marca curta de estado ou categoria.
 * <span class="ds-selo">EM BREVE</span>
 * Variantes: --acento, --sucesso, --alerta, --perigo, --solido.
 */
.ds-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 var(--espaco-2);
  box-sizing: border-box;
  border: var(--borda-fina) solid var(--cor-borda-forte);
  border-radius: var(--raio-sm);
  font-family: var(--fonte-mono);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-caixa-alta);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cor-texto-secundario);
}

.ds-selo--ponto::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.ds-selo--acento {
  border-color: currentColor;
  color: var(--cor-texto-acento);
}

.ds-selo--sucesso {
  border-color: currentColor;
  color: var(--cor-sucesso);
}

.ds-selo--alerta {
  border-color: currentColor;
  color: var(--cor-alerta);
}

.ds-selo--perigo {
  border-color: currentColor;
  color: var(--cor-perigo);
}

.ds-selo--solido {
  border-color: var(--cor-acao);
  background: var(--cor-acao);
  color: var(--cor-acao-texto);
}

/* Ícone de linha: herda a cor do texto */
.ds-icone {
  display: inline-block;
  flex: none;
  width: var(--icone-md);
  height: var(--icone-md);
  vertical-align: middle;
}

.ds-icone--sm {
  width: var(--icone-sm);
  height: var(--icone-sm);
}

/*
 * Botão
 * <a|button class="ds-botao ds-botao--primario">Fale Conosco</a>
 * Variantes: --primario (uma por tela), --fantasma, --link.
 * Tamanhos: --sm (44), padrão (48), --lg (56).
 */
.ds-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: 48px;
  padding: 0 var(--espaco-5);
  box-sizing: border-box;
  border: var(--borda-fina) solid transparent;
  border-radius: var(--raio-lg);
  background: transparent;
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  font-weight: var(--peso-semi);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transicao-cor);
}

.ds-botao svg {
  flex: none;
  width: var(--icone-sm);
  height: var(--icone-sm);
}

.ds-botao--sm {
  min-height: var(--alvo-min);
  padding: 0 var(--espaco-4);
  font-size: var(--texto-md);
}

.ds-botao--lg {
  min-height: 56px;
  padding: 0 var(--espaco-6);
  font-size: var(--texto-lg);
}

.ds-botao--lg svg {
  width: var(--icone-md);
  height: var(--icone-md);
}

.ds-botao--primario {
  background: var(--cor-acao);
  color: var(--cor-acao-texto);
}

.ds-botao--primario:hover {
  background: var(--cor-acao-hover);
}

.ds-botao--fantasma {
  border-color: var(--cor-borda-forte);
}

.ds-botao--fantasma:hover {
  background: var(--cor-superficie-hover);
}

.ds-botao--link {
  min-height: var(--alvo-min);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ds-botao--link:hover {
  color: var(--cor-texto-acento);
}

.ds-botao--bloco {
  width: 100%;
}

.ds-botao:disabled,
.ds-botao[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/*
 * Folha de projeto e carimbo
 * <section class="ds-folha">
 *   ...
 *   <div class="ds-carimbo" aria-hidden="true"><span>FOLHA 02/06</span><span>MÉTODO 3P</span><span>2G</span></div>
 * </section>
 * Dentro de .ds-folha o carimbo vai para o canto inferior direito.
 */
.ds-folha {
  position: relative;
  padding: var(--espaco-12) var(--espaco-10) var(--espaco-18);
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
}

@media (max-width: 700px) {
  .ds-folha {
    padding: var(--espaco-8) var(--espaco-5) 84px;
  }
}

.ds-carimbo {
  display: inline-flex;
  border: var(--borda-fina) solid var(--cor-borda);
  font-family: var(--fonte-mono);
  font-size: var(--texto-xs);
  letter-spacing: var(--tracking-caixa-alta);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.ds-carimbo > span {
  padding: var(--espaco-2) 14px;
  border-left: var(--borda-fina) solid var(--cor-borda);
}

.ds-carimbo > span:first-child {
  border-left: 0;
}

.ds-folha > .ds-carimbo {
  position: absolute;
  right: calc(-1 * var(--borda-fina));
  bottom: calc(-1 * var(--borda-fina));
}

/*
 * Cartão de módulo
 * <article class="ds-cartao">
 *   <span class="ds-cartao__codigo">MOD-01</span>
 *   <h3 class="ds-cartao__titulo">Consultoria em IA</h3>
 *   <p class="ds-cartao__texto">...</p>
 * </article>
 * --destaque: borda azul, para um cartão por tela no máximo.
 * --link: o cartão inteiro é um <a>, com hover.
 */
.ds-cartao {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--espaco-6);
  border: var(--borda-fina) solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  background: transparent;
  color: var(--cor-texto);
  text-decoration: none;
}

.ds-cartao__codigo {
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
  letter-spacing: var(--tracking-caixa-alta);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.ds-cartao__titulo {
  margin: 0;
  font-size: var(--texto-xl);
  font-weight: var(--peso-semi);
  line-height: 1.25;
  letter-spacing: var(--tracking-subtitulo);
}

.ds-cartao__texto {
  margin: 0;
  color: var(--cor-texto-secundario);
}

.ds-cartao--destaque {
  border-color: var(--cor-marca-no);
  background: var(--cor-superficie-elevada);
}

.ds-cartao--link {
  transition: var(--transicao-cor);
}

.ds-cartao--link:hover {
  border-color: var(--cor-texto-suave);
  background: var(--cor-superficie-hover);
}

/* Grade de cartões que se ajusta à largura */
.ds-grade-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--espaco-4);
}

/*
 * Tabela de especificação
 * <div class="ds-tabela">
 *   <table>
 *     <thead><tr><th scope="col">ETAPA</th>...</tr></thead>
 *     <tbody><tr><th scope="row">A · Pessoa</th><td>...</td></tr></tbody>
 *   </table>
 * </div>
 * O invólucro rola na horizontal em telas estreitas.
 */
.ds-tabela {
  overflow-x: auto;
}

.ds-tabela table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--texto-base);
}

.ds-tabela thead th {
  padding: var(--espaco-3) var(--espaco-4);
  border-bottom: var(--borda-fina) solid var(--cor-borda-forte);
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-caixa-alta);
  text-transform: uppercase;
  text-align: left;
  color: var(--cor-texto-suave);
}

.ds-tabela tbody th,
.ds-tabela tbody td {
  padding: 18px var(--espaco-4);
  border-bottom: var(--borda-fina) solid var(--cor-borda-sutil);
  text-align: left;
  vertical-align: top;
}

.ds-tabela tbody th {
  font-weight: var(--peso-semi);
}

.ds-tabela tbody td {
  color: var(--cor-texto-secundario);
}

.ds-tabela tbody td:last-child {
  color: var(--cor-texto);
}

.ds-tabela tbody tr:last-child > * {
  border-bottom: 0;
}

.ds-tabela th:first-child,
.ds-tabela td:first-child {
  padding-left: 0;
}

.ds-tabela th:last-child,
.ds-tabela td:last-child {
  padding-right: 0;
}

/* Números alinhados em mono, para tabelas de dados */
.ds-tabela .ds-num {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/*
 * Formulários
 *
 * Campo com rótulo, ajuda e erro:
 * <div class="ds-campo">
 *   <label class="ds-campo__rotulo" for="email">E-mail <span class="ds-campo__opcional">opcional</span></label>
 *   <input class="ds-entrada" id="email" type="email" aria-describedby="email-ajuda">
 *   <p class="ds-campo__ajuda" id="email-ajuda">Respondemos em até um dia útil.</p>
 * </div>
 * Erro: aria-invalid="true" no controle + <p class="ds-campo__erro" id="..."> ligado por aria-describedby.
 *
 * Seleção: <span class="ds-selecao"><select class="ds-entrada">...</select></span>
 * Opções:  <label class="ds-opcao"><input type="checkbox" class="ds-marcador"> Texto</label>
 *          (type="radio" também usa .ds-marcador; chave: <input type="checkbox" role="switch" class="ds-chave">)
 *
 * Estado marcado usa grafite (cor do texto), não azul: o azul fica para a ação e o foco.
 */

.ds-campo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  min-width: 0;
}

.ds-campo__rotulo {
  display: flex;
  align-items: baseline;
  gap: var(--espaco-2);
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
}

.ds-campo__opcional {
  font-family: var(--fonte-mono);
  font-size: var(--texto-xs);
  font-weight: var(--peso-regular);
  letter-spacing: var(--tracking-caixa-alta);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.ds-campo__ajuda,
.ds-campo__erro {
  margin: 0;
  font-size: var(--texto-md);
  line-height: 1.4;
  color: var(--cor-texto-suave);
}

.ds-campo__erro {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--cor-perigo);
}

.ds-campo__erro svg {
  flex: none;
  width: var(--icone-sm);
  height: var(--icone-sm);
  margin-top: 2px;
}

/* Entrada de texto, área de texto e select */
.ds-entrada {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  box-sizing: border-box;
  border: var(--borda-fina) solid var(--cor-borda-campo);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  line-height: 1.4;
  transition: var(--transicao-cor), box-shadow var(--duracao-rapida) var(--curva-padrao);
}

textarea.ds-entrada {
  min-height: 128px;
  padding: var(--espaco-3) 14px;
  resize: vertical;
}

.ds-entrada::placeholder {
  color: var(--cor-texto-suave);
  opacity: 1;
}

.ds-entrada:hover {
  border-color: var(--cor-texto-suave);
}

.ds-entrada:focus-visible {
  outline: none;
  border-color: var(--cor-foco);
  box-shadow: var(--sombra-foco);
}

.ds-entrada[aria-invalid="true"] {
  border-color: var(--cor-perigo);
}

.ds-entrada[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 2px var(--cor-perigo);
}

.ds-entrada:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ds-entrada[readonly] {
  border-style: dashed;
}

/* Seleção: select nativo com seta própria */
.ds-selecao {
  position: relative;
  display: block;
}

.ds-selecao > select {
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
}

.ds-selecao::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: var(--icone-md);
  height: var(--icone-md);
  transform: translateY(-50%);
  background-color: var(--cor-texto-suave);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    center / contain no-repeat;
  pointer-events: none;
}

/* Opção: checkbox, rádio ou chave com o texto ao lado */
.ds-opcao {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  min-height: var(--alvo-min);
  padding: 10px 0;
  box-sizing: border-box;
  font-size: var(--texto-base);
  line-height: 1.4;
  color: var(--cor-texto);
  cursor: pointer;
}

.ds-opcao:has(:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.ds-opcao__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ds-opcao__descricao {
  font-size: var(--texto-md);
  color: var(--cor-texto-suave);
}

/* Grupo de opções */
.ds-grupo-opcoes {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ds-grupo-opcoes > legend {
  padding: 0;
  margin-bottom: var(--espaco-1);
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
}

.ds-grupo-opcoes--linha {
  flex-flow: row wrap;
  column-gap: var(--espaco-6);
}

.ds-grupo-opcoes--linha > legend {
  flex: 0 0 100%;
}

/* Checkbox e rádio */
.ds-marcador {
  appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: var(--borda-media) solid var(--cor-borda-campo);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie);
  cursor: inherit;
  transition: var(--transicao-cor), box-shadow var(--duracao-rapida) var(--curva-padrao);
}

.ds-marcador[type="radio"] {
  border-radius: 50%;
}

.ds-marcador::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: var(--cor-fundo);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transform: scale(0);
  transition: transform var(--duracao-rapida) var(--curva-entrada);
}

.ds-marcador[type="radio"]::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  mask: none;
}

.ds-marcador:hover {
  border-color: var(--cor-texto-suave);
}

.ds-marcador:checked {
  border-color: var(--cor-texto);
  background: var(--cor-texto);
}

.ds-marcador:checked::before {
  transform: scale(1);
}

.ds-marcador:focus-visible,
.ds-chave:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
}

.ds-marcador[aria-invalid="true"] {
  border-color: var(--cor-perigo);
}

/* Chave (liga/desliga) */
.ds-chave {
  appearance: none;
  flex: none;
  position: relative;
  width: 40px;
  height: 22px;
  margin: 0;
  border: var(--borda-media) solid var(--cor-borda-campo);
  border-radius: var(--raio-redondo);
  background: var(--cor-superficie);
  cursor: inherit;
  transition: var(--transicao-cor);
}

.ds-chave::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--cor-borda-campo);
  transition: transform var(--duracao-rapida) var(--curva-padrao), background-color var(--duracao-instante) var(--curva-padrao);
}

.ds-chave:checked {
  border-color: var(--cor-texto);
  background: var(--cor-texto);
}

.ds-chave:checked::before {
  transform: translateX(18px);
  background: var(--cor-fundo);
}

/* Formulário: pilha de campos com linhas de duas colunas quando houver espaço */
.ds-formulario {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-6);
}

.ds-formulario__linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--espaco-6);
}


/*
 * Estrutura de página: container, cabeçalho, rodapé e pilha de folhas
 *
 * <body class="ds-grade">
 *   <header class="ds-cabecalho"><div class="ds-container ds-cabecalho__interno">
 *     <a class="ds-assinatura">...</a>
 *     <nav class="ds-navegacao" aria-label="Principal"><a href="#metodo">Método</a>... <a class="ds-botao ds-botao--primario ds-botao--sm">Fale Conosco</a></nav>
 *   </div></header>
 *   <main class="ds-container ds-folhas">...</main>
 *   <footer class="ds-rodape"><div class="ds-container ds-rodape__interno">...</div></footer>
 * </body>
 */
.ds-container {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding-left: var(--margem-lateral);
  padding-right: var(--margem-lateral);
  box-sizing: border-box;
}

/* Pilha de folhas da página */
.ds-folhas {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-10);
  padding-top: var(--espaco-14);
  padding-bottom: var(--espaco-18);
}

/* Cabeçalho */
.ds-cabecalho {
  position: relative;
  z-index: var(--z-cabecalho);
  border-bottom: var(--borda-fina) solid var(--cor-borda-sutil);
  background: var(--cor-fundo);
}

.ds-cabecalho--fixo {
  position: sticky;
  top: 0;
}

.ds-cabecalho__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4) var(--espaco-8);
  padding-top: 18px;
  padding-bottom: 18px;
}

.ds-navegacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-1) var(--espaco-7);
  font-size: var(--texto-md);
  font-weight: var(--peso-medio);
}

.ds-navegacao > a:not(.ds-botao) {
  padding: 10px 0;
  color: var(--cor-texto);
  text-decoration: none;
  transition: var(--transicao-cor);
}

.ds-navegacao > a:not(.ds-botao):hover,
.ds-navegacao > a[aria-current="page"] {
  color: var(--cor-texto-acento);
}

/* Rodapé */
.ds-rodape {
  border-top: var(--borda-fina) solid var(--cor-borda-sutil);
  background: var(--cor-fundo);
  font-size: var(--texto-md);
  color: var(--cor-texto-suave);
}

.ds-rodape__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3) var(--espaco-8);
  padding-top: var(--espaco-7);
  padding-bottom: var(--espaco-7);
}

.ds-rodape__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-1) var(--espaco-6);
}

.ds-rodape__links a {
  padding: 10px 0;
  text-decoration: none;
}

.ds-rodape__links a:hover {
  color: var(--cor-texto);
}

/* Cabeçalho de seção: sobretítulo + título + lide */
.ds-titulo-secao {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
}

.ds-titulo-secao > h2,
.ds-titulo-secao__titulo {
  margin: 0;
  font-size: var(--titulo-md);
  font-weight: var(--peso-negrito);
  line-height: var(--entrelinha-titulo);
  letter-spacing: var(--tracking-titulo);
  text-wrap: balance;
}

.ds-titulo-secao > p,
.ds-titulo-secao__lide {
  margin: var(--espaco-2) 0 0;
  max-width: 40em;
  font-size: var(--texto-lg);
  color: var(--cor-texto-secundario);
}

/* Conteúdo da folha em pilha */
.ds-folha__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-7);
}

/*
 * Seções: hero, desenho técnico, etapas numeradas e contato
 */

/* Hero: texto à esquerda, desenho técnico à direita (empilha no celular) */
.ds-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-10) var(--espaco-14);
}

.ds-hero__texto {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-6);
}

.ds-hero__titulo {
  margin: 0;
  font-size: var(--titulo-lg);
  font-weight: var(--peso-negrito);
  line-height: 1.03;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.ds-hero__lide {
  margin: 0;
  max-width: 32em;
  font-size: var(--texto-lg);
  color: var(--cor-texto-secundario);
}

.ds-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
}

.ds-hero__desenho {
  flex: 1 1 420px;
  min-width: 0;
  width: 100%;
}

/*
 * Desenho técnico (SVG): classes para linhas, cotas, nós e anotações.
 * Cores vêm do tema; o nó Pessoa é o único azul.
 */
.ds-desenho {
  display: block;
  width: 100%;
  height: auto;
}

.ds-desenho__linha {
  fill: none;
  stroke: var(--cor-texto-secundario);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Arcos de compasso que marcam o vértice: ficam esmaecidos, como linha de construção */
.ds-desenho__construcao {
  fill: none;
  stroke: var(--cor-texto-suave);
  stroke-width: 1;
  opacity: 0.3;
}

/* Onda que sai de um nó quando ele surge (só aparece animada) */
.ds-desenho__onda {
  fill: none;
  stroke: var(--cor-texto);
  stroke-width: 1.5;
  opacity: 0;
}

.ds-desenho__onda--pessoa {
  stroke: var(--cor-marca-no);
}

.ds-desenho__eixo {
  fill: none;
  stroke: var(--cor-texto-suave);
  stroke-width: 1;
  stroke-dasharray: 6 6;
  opacity: 0.7;
}

.ds-desenho__cota {
  fill: none;
  stroke: var(--cor-texto-suave);
  stroke-width: 1.2;
}

.ds-desenho__no {
  fill: var(--cor-texto);
}

.ds-desenho__no--pessoa {
  fill: var(--cor-marca-no);
}

.ds-desenho__marco {
  fill: none;
  stroke: var(--cor-texto-suave);
  stroke-width: 1.5;
}

.ds-desenho__rotulo {
  font-family: var(--fonte-mono);
  font-size: 15px;
  fill: var(--cor-texto);
}

.ds-desenho__nota {
  font-family: var(--fonte-mono);
  font-size: 13px;
  fill: var(--cor-texto-suave);
}

/* Etapas numeradas em células (ex.: onde a IA entra no trabalho) */
.ds-etapas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--cor-borda);
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-md);
  overflow: hidden;
}

.ds-etapas > li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--espaco-5);
  background: var(--cor-superficie-elevada);
}

.ds-etapas__numero {
  font-family: var(--fonte-mono);
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
}

.ds-etapas > li:first-child .ds-etapas__numero {
  color: var(--cor-texto-acento);
}

.ds-etapas__titulo {
  font-weight: var(--peso-semi);
}

.ds-etapas__texto {
  font-size: var(--texto-md);
  color: var(--cor-texto-secundario);
}

/*
 * Case de sucesso (slide do carrossel): texto à esquerda, figura opcional à direita.
 * Linhas na ordem: o que motivou · o que criamos · onde entra a IA · hoje.
 * Figura de produto leva <figcaption> "Desenho ilustrativo com dados fictícios."
 */
.ds-case {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-8) var(--espaco-12);
}

.ds-case__texto {
  flex: 1.4 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.ds-case__nome {
  margin: 0;
  font-size: var(--titulo-sm);
  font-weight: var(--peso-negrito);
  line-height: var(--entrelinha-titulo);
  letter-spacing: -0.035em;
}

.ds-case__linhas {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  border-top: var(--borda-fina) solid var(--cor-borda);
}

.ds-case__linha {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--espaco-6);
  padding: 18px 0;
  border-bottom: var(--borda-fina) solid var(--cor-borda-sutil);
}

.ds-case__rotulo {
  flex: 0 0 180px;
  margin: 0;
  padding-top: 3px;
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-caixa-alta);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.ds-case__linha > p {
  flex: 1 1 300px;
  margin: 0;
}

.ds-case__figura {
  flex: 1 1 340px;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

/* Maquete de produto: peças que só existem na animação começam invisíveis */
.ds-maquete__onda,
.ds-maquete__pontinho {
  opacity: 0;
}

.ds-case__figura > figcaption {
  font-size: var(--texto-sm);
  text-align: center;
  color: var(--cor-texto-suave);
}

/* Contato: chamada + botão grande */
.ds-contato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-7);
}

.ds-contato > .ds-titulo-secao {
  flex: 1 1 480px;
}

/* Linha discreta de créditos (ex.: fundadores) */
.ds-creditos {
  margin: 0;
  font-size: var(--texto-md);
  color: var(--cor-texto-suave);
}

.ds-creditos a {
  color: var(--cor-texto);
  text-underline-offset: 3px;
}

.ds-creditos a:hover {
  color: var(--cor-texto-acento);
}

/*
 * Carrossel só com CSS (rádio + label), sem JavaScript
 * Gerado por scripts/carrossel.mjs: até 8 slides. Para mais, mude MAX e rode de novo.
 *
 * <div class="ds-carrossel" aria-roledescription="carrossel" aria-label="Cases de sucesso">
 *   <input type="radio" class="ds-carrossel__estado" name="cases" id="case-1" aria-label="Case 1: MovixSoft" checked>
 *   <input type="radio" class="ds-carrossel__estado" name="cases" id="case-2" aria-label="Case 2: próximo case">
 *   <div class="ds-carrossel__controles">
 *     <span class="ds-carrossel__contagem"><span>CASE 01 / 02</span><span>CASE 02 / 02</span></span>
 *     <div class="ds-carrossel__pontos">
 *       <label class="ds-carrossel__ponto" for="case-1" title="Case 1"><span></span></label> ...
 *     </div>
 *     <div class="ds-carrossel__setas">
 *       um .ds-carrossel__par por slide, com a seta anterior e a próxima daquele slide:
 *       <span class="ds-carrossel__par"><label class="ds-carrossel__seta" for="case-2" title="Case anterior">svg</label>
 *         <label class="ds-carrossel__seta" for="case-2" title="Próximo case">svg</label></span> ...
 *     </div>
 *   </div>
 *   <div class="ds-carrossel__janela"><div class="ds-carrossel__trilho">
 *     <article class="ds-carrossel__slide" aria-label="Case 1 de 2: MovixSoft">...</article> ...
 *   </div></div>
 * </div>
 */
.ds-carrossel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ds-carrossel__estado {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ds-carrossel__controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3) var(--espaco-6);
}

.ds-carrossel__contagem {
  font-family: var(--fonte-mono);
  font-size: var(--texto-md);
  letter-spacing: var(--tracking-caixa-alta);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.ds-carrossel__contagem > span,
.ds-carrossel__par {
  display: none;
}

.ds-carrossel__pontos {
  display: flex;
  gap: var(--espaco-1);
}

.ds-carrossel__ponto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--alvo-min);
  height: var(--alvo-min);
  cursor: pointer;
}

.ds-carrossel__ponto > span {
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--cor-borda-forte);
  transition: var(--transicao-cor);
}

.ds-carrossel__ponto:hover > span {
  background: var(--cor-texto-suave);
}

.ds-carrossel__setas {
  display: flex;
}

.ds-carrossel__par {
  gap: var(--espaco-2);
}

.ds-carrossel__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  border: var(--borda-fina) solid var(--cor-borda-forte);
  border-radius: var(--raio-lg);
  color: var(--cor-texto);
  cursor: pointer;
  transition: var(--transicao-cor);
}

.ds-carrossel__seta:hover {
  background: var(--cor-superficie-hover);
}

.ds-carrossel__seta svg {
  width: var(--icone-md);
  height: var(--icone-md);
}

.ds-carrossel__janela {
  overflow: hidden;
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-md);
}

.ds-carrossel__trilho {
  display: flex;
  transition: var(--transicao-transformacao);
}

.ds-carrossel__slide {
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 36px;
}

@media (max-width: 700px) {
  .ds-carrossel__slide {
    padding: var(--espaco-6);
  }
}

/* Slide de convite (último): moldura tracejada */
.ds-carrossel__convite {
  min-height: 420px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  padding: var(--espaco-10);
  border: var(--borda-media) dashed var(--cor-borda-forte);
  border-radius: var(--raio-md);
}

/* Regras por slide */
.ds-carrossel__estado:nth-of-type(1):checked ~ .ds-carrossel__janela .ds-carrossel__trilho {
  transform: translateX(-0%);
}
.ds-carrossel__estado:nth-of-type(1):checked ~ .ds-carrossel__controles .ds-carrossel__contagem > span:nth-child(1) {
  display: inline;
}
.ds-carrossel__estado:nth-of-type(1):checked ~ .ds-carrossel__controles .ds-carrossel__par:nth-child(1) {
  display: inline-flex;
}
.ds-carrossel__estado:nth-of-type(1):checked ~ .ds-carrossel__controles .ds-carrossel__ponto:nth-child(1) > span {
  background: var(--cor-texto);
}
.ds-carrossel__estado:nth-of-type(1):focus-visible ~ .ds-carrossel__controles .ds-carrossel__ponto:nth-child(1) {
  outline: 2px solid var(--cor-foco);
  outline-offset: -4px;
}

.ds-carrossel__estado:nth-of-type(2):checked ~ .ds-carrossel__janela .ds-carrossel__trilho {
  transform: translateX(-100%);
}
.ds-carrossel__estado:nth-of-type(2):checked ~ .ds-carrossel__controles .ds-carrossel__contagem > span:nth-child(2) {
  display: inline;
}
.ds-carrossel__estado:nth-of-type(2):checked ~ .ds-carrossel__controles .ds-carrossel__par:nth-child(2) {
  display: inline-flex;
}
.ds-carrossel__estado:nth-of-type(2):checked ~ .ds-carrossel__controles .ds-carrossel__ponto:nth-child(2) > span {
  background: var(--cor-texto);
}
.ds-carrossel__estado:nth-of-type(2):focus-visible ~ .ds-carrossel__controles .ds-carrossel__ponto:nth-child(2) {
  outline: 2px solid var(--cor-foco);
  outline-offset: -4px;
}

.ds-carrossel__estado:nth-of-type(3):checked ~ .ds-carrossel__janela .ds-carrossel__trilho {
  transform: translateX(-200%);
}
.ds-carrossel__estado:nth-of-type(3):checked ~ .ds-carrossel__controles .ds-carrossel__contagem > span:nth-child(3) {
  display: inline;
}
.ds-carrossel__estado:nth-of-type(3):checked ~ .ds-carrossel__controles .ds-carrossel__par:nth-child(3) {
  display: inline-flex;
}
.ds-carrossel__estado:nth-of-type(3):checked ~ .ds-carrossel__controles .ds-carrossel__ponto:nth-child(3) > span {
  background: var(--cor-texto);
}
.ds-carrossel__estado:nth-of-type(3):focus-visible ~ .ds-carrossel__controles .ds-carrossel__ponto:nth-child(3) {
  outline: 2px solid var(--cor-foco);
  outline-offset: -4px;
}

.ds-carrossel__estado:nth-of-type(4):checked ~ .ds-carrossel__janela .ds-carrossel__trilho {
  transform: translateX(-300%);
}
.ds-carrossel__estado:nth-of-type(4):checked ~ .ds-carrossel__controles .ds-carrossel__contagem > span:nth-child(4) {
  display: inline;
}
.ds-carrossel__estado:nth-of-type(4):checked ~ .ds-carrossel__controles .ds-carrossel__par:nth-child(4) {
  display: inline-flex;
}
.ds-carrossel__estado:nth-of-type(4):checked ~ .ds-carrossel__controles .ds-carrossel__ponto:nth-child(4) > span {
  background: var(--cor-texto);
}
.ds-carrossel__estado:nth-of-type(4):focus-visible ~ .ds-carrossel__controles .ds-carrossel__ponto:nth-child(4) {
  outline: 2px solid var(--cor-foco);
  outline-offset: -4px;
}

.ds-carrossel__estado:nth-of-type(5):checked ~ .ds-carrossel__janela .ds-carrossel__trilho {
  transform: translateX(-400%);
}
.ds-carrossel__estado:nth-of-type(5):checked ~ .ds-carrossel__controles .ds-carrossel__contagem > span:nth-child(5) {
  display: inline;
}
.ds-carrossel__estado:nth-of-type(5):checked ~ .ds-carrossel__controles .ds-carrossel__par:nth-child(5) {
  display: inline-flex;
}
.ds-carrossel__estado:nth-of-type(5):checked ~ .ds-carrossel__controles .ds-carrossel__ponto:nth-child(5) > span {
  background: var(--cor-texto);
}
.ds-carrossel__estado:nth-of-type(5):focus-visible ~ .ds-carrossel__controles .ds-carrossel__ponto:nth-child(5) {
  outline: 2px solid var(--cor-foco);
  outline-offset: -4px;
}

.ds-carrossel__estado:nth-of-type(6):checked ~ .ds-carrossel__janela .ds-carrossel__trilho {
  transform: translateX(-500%);
}
.ds-carrossel__estado:nth-of-type(6):checked ~ .ds-carrossel__controles .ds-carrossel__contagem > span:nth-child(6) {
  display: inline;
}
.ds-carrossel__estado:nth-of-type(6):checked ~ .ds-carrossel__controles .ds-carrossel__par:nth-child(6) {
  display: inline-flex;
}
.ds-carrossel__estado:nth-of-type(6):checked ~ .ds-carrossel__controles .ds-carrossel__ponto:nth-child(6) > span {
  background: var(--cor-texto);
}
.ds-carrossel__estado:nth-of-type(6):focus-visible ~ .ds-carrossel__controles .ds-carrossel__ponto:nth-child(6) {
  outline: 2px solid var(--cor-foco);
  outline-offset: -4px;
}

.ds-carrossel__estado:nth-of-type(7):checked ~ .ds-carrossel__janela .ds-carrossel__trilho {
  transform: translateX(-600%);
}
.ds-carrossel__estado:nth-of-type(7):checked ~ .ds-carrossel__controles .ds-carrossel__contagem > span:nth-child(7) {
  display: inline;
}
.ds-carrossel__estado:nth-of-type(7):checked ~ .ds-carrossel__controles .ds-carrossel__par:nth-child(7) {
  display: inline-flex;
}
.ds-carrossel__estado:nth-of-type(7):checked ~ .ds-carrossel__controles .ds-carrossel__ponto:nth-child(7) > span {
  background: var(--cor-texto);
}
.ds-carrossel__estado:nth-of-type(7):focus-visible ~ .ds-carrossel__controles .ds-carrossel__ponto:nth-child(7) {
  outline: 2px solid var(--cor-foco);
  outline-offset: -4px;
}

.ds-carrossel__estado:nth-of-type(8):checked ~ .ds-carrossel__janela .ds-carrossel__trilho {
  transform: translateX(-700%);
}
.ds-carrossel__estado:nth-of-type(8):checked ~ .ds-carrossel__controles .ds-carrossel__contagem > span:nth-child(8) {
  display: inline;
}
.ds-carrossel__estado:nth-of-type(8):checked ~ .ds-carrossel__controles .ds-carrossel__par:nth-child(8) {
  display: inline-flex;
}
.ds-carrossel__estado:nth-of-type(8):checked ~ .ds-carrossel__controles .ds-carrossel__ponto:nth-child(8) > span {
  background: var(--cor-texto);
}
.ds-carrossel__estado:nth-of-type(8):focus-visible ~ .ds-carrossel__controles .ds-carrossel__ponto:nth-child(8) {
  outline: 2px solid var(--cor-foco);
  outline-offset: -4px;
}

/*
 * Slides 16:9
 * Desenhados em 1920 × 1080 e escalados pela largura do slide (container query),
 * sem JavaScript. Dentro do quadro os tokens de texto e espaço são redefinidos
 * em função de --s (1 px do desenho original), então componentes do DS
 * (cartão, tabela, selo, botão) escalam junto.
 *
 * <section class="ds-slide ds-slide--capa" aria-label="Slide 1: Capa">
 *   <div class="ds-slide__quadro">
 *     <header class="ds-slide__topo">assinatura + meta</header>
 *     ... conteúdo do modelo ...
 *     <div class="ds-carimbo"><span>Folha 01/09</span><span>Capa</span><span>2G</span></div>
 *   </div>
 * </section>
 *
 * Modelos: --capa, --secao, --conteudo, --dados, --frase, --encerramento.
 */
.ds-slide {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
}

.ds-slide__quadro {
  --s: calc(100cqw / 1920);

  /* tokens na escala do slide */
  --texto-xs: calc(18 * var(--s));
  --texto-sm: calc(22 * var(--s));
  --texto-md: calc(26 * var(--s));
  --texto-base: calc(30 * var(--s));
  --texto-lg: calc(38 * var(--s));
  --texto-xl: calc(40 * var(--s));
  --titulo-sm: calc(64 * var(--s));
  --titulo-md: calc(84 * var(--s));
  --titulo-lg: calc(124 * var(--s));
  --espaco-1: calc(6 * var(--s));
  --espaco-2: calc(12 * var(--s));
  --espaco-3: calc(18 * var(--s));
  --espaco-4: calc(24 * var(--s));
  --espaco-5: calc(32 * var(--s));
  --espaco-6: calc(40 * var(--s));
  --espaco-7: calc(44 * var(--s));
  --espaco-8: calc(52 * var(--s));
  --espaco-10: calc(64 * var(--s));
  --espaco-12: calc(80 * var(--s));
  --espaco-14: calc(96 * var(--s));
  --espaco-18: calc(120 * var(--s));
  --raio-sm: calc(3 * var(--s));
  --raio-md: calc(6 * var(--s));
  --raio-lg: calc(10 * var(--s));
  --icone-sm: calc(28 * var(--s));
  --icone-md: calc(32 * var(--s));
  --grade: calc(48 * var(--s));

  position: absolute;
  inset: calc(32 * var(--s));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-8);
  padding: calc(72 * var(--s)) calc(104 * var(--s)) calc(120 * var(--s));
  border: var(--borda-fina) solid var(--cor-borda);
  border-radius: var(--raio-md);
  font-size: var(--texto-base);
  line-height: 1.4;
  background-color: var(--cor-fundo);
  background-image: linear-gradient(var(--cor-grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--cor-grade) 1px, transparent 1px);
  background-size: var(--grade) var(--grade);
}

/* Carimbo colado no canto do quadro */
.ds-slide__quadro > .ds-carimbo {
  position: absolute;
  right: calc(-1 * var(--borda-fina));
  bottom: calc(-1 * var(--borda-fina));
  background: var(--cor-fundo);
}

.ds-slide__quadro > .ds-carimbo > span {
  padding: calc(14 * var(--s)) calc(24 * var(--s));
}

/* Topo: assinatura à esquerda, meta (cliente, data) à direita */
.ds-slide__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-6);
}

.ds-slide__meta {
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
  letter-spacing: var(--tracking-caixa-alta);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.ds-slide .ds-assinatura {
  gap: calc(16 * var(--s));
}

.ds-slide .ds-triade {
  width: calc(52 * var(--s));
  height: calc(52 * var(--s));
}

.ds-slide .ds-assinatura__sigla {
  font-size: calc(34 * var(--s));
}

.ds-slide .ds-assinatura__fio {
  height: calc(40 * var(--s));
}

.ds-slide .ds-assinatura__nome {
  font-size: calc(18 * var(--s));
}

.ds-slide .ds-botao {
  min-height: calc(88 * var(--s));
  padding: 0 var(--espaco-6);
  gap: var(--espaco-3);
}

.ds-slide .ds-botao svg {
  width: var(--icone-md);
  height: var(--icone-md);
}

.ds-slide .ds-tabela table {
  min-width: 0;
}

.ds-slide .ds-tabela tbody th,
.ds-slide .ds-tabela tbody td {
  padding-top: var(--espaco-5);
  padding-bottom: var(--espaco-5);
}

/* Títulos e textos do slide */
.ds-slide__titulo {
  margin: 0;
  max-width: 22em;
  font-size: var(--titulo-md);
  font-weight: var(--peso-negrito);
  line-height: var(--entrelinha-titulo);
  letter-spacing: var(--tracking-titulo);
  text-wrap: balance;
}

.ds-slide__lide {
  margin: 0;
  max-width: 34em;
  font-size: var(--texto-lg);
  line-height: 1.4;
  color: var(--cor-texto-secundario);
}

.ds-slide__corpo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--espaco-6);
}

.ds-slide__fonte {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

/* Capa: texto + desenho técnico */
.ds-slide--capa .ds-slide__corpo {
  flex-direction: row;
  align-items: center;
  gap: var(--espaco-12);
}

.ds-slide--capa .ds-slide__texto {
  flex: 1.6;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-6);
}

.ds-slide--capa .ds-slide__titulo {
  font-size: calc(104 * var(--s));
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
}

.ds-slide--capa .ds-desenho {
  flex: 1;
  min-width: 0;
}

/* Abertura de seção: número grande */
.ds-slide--secao .ds-slide__corpo {
  justify-content: flex-end;
  gap: var(--espaco-4);
}

.ds-slide__numero {
  font-family: var(--fonte-mono);
  font-size: calc(260 * var(--s));
  font-weight: var(--peso-regular);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--cor-texto-acento);
}

/* Frase de impacto */
.ds-slide--frase .ds-slide__titulo {
  max-width: 18em;
  font-size: var(--titulo-lg);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
}

/* Encerramento */
.ds-slide--encerramento .ds-slide__corpo {
  align-items: flex-start;
}

.ds-slide--encerramento .ds-slide__titulo {
  font-size: var(--titulo-lg);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
}

/* Duas colunas genéricas */
.ds-slide__colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espaco-12);
  align-items: start;
}

/*
 * Gráfico de barras horizontais (HTML + CSS)
 * <div class="ds-grafico">
 *   <div class="ds-grafico__linha" style="--valor: 62%"><span class="ds-grafico__rotulo">Atendimento</span>
 *     <span class="ds-grafico__trilho"><span class="ds-grafico__barra"></span></span><span class="ds-grafico__valor">12 h</span></div>
 * </div>
 * Uma única linha pode ser destaque (Azul 2G): .ds-grafico__linha--destaque.
 */
.ds-grafico {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

.ds-grafico__linha {
  display: grid;
  grid-template-columns: minmax(0, 14em) 1fr 5em;
  align-items: center;
  gap: var(--espaco-5);
}

.ds-grafico__rotulo {
  color: var(--cor-texto-secundario);
}

.ds-grafico__trilho {
  height: calc(var(--texto-base) * 0.9);
  border-bottom: var(--borda-fina) solid var(--cor-borda);
}

.ds-grafico__barra {
  display: block;
  width: var(--valor, 0%);
  height: 100%;
  background: var(--cor-texto-suave);
}

.ds-grafico__linha--destaque .ds-grafico__rotulo {
  color: var(--cor-texto);
  font-weight: var(--peso-semi);
}

.ds-grafico__linha--destaque .ds-grafico__barra {
  background: var(--cor-marca-no);
}

.ds-grafico__valor {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/*
 * Deck: pilha de slides para revisar, apresentar e imprimir
 * <main class="ds-deck"> <section class="ds-slide">... </main>
 * Modo apresentação (classe .ds-deck--apresentando no <main>): um slide por vez, no tamanho da tela.
 */
.ds-deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-8);
  padding: var(--espaco-8) var(--margem-lateral);
}

.ds-deck > .ds-slide {
  max-width: 1280px;
  border-radius: var(--raio-md);
  box-shadow: 0 0 0 1px var(--cor-borda-sutil);
}

.ds-deck--apresentando {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  justify-content: center;
  padding: 0;
  background: var(--cor-fundo-profundo);
}

.ds-deck--apresentando > .ds-slide {
  display: none;
  width: min(100vw, calc(100vh * 16 / 9));
  max-width: none;
  border-radius: 0;
  box-shadow: none;
}

.ds-deck--apresentando > .ds-slide[aria-current="true"] {
  display: block;
}

@media print {
  @page {
    size: 1920px 1080px;
    margin: 0;
  }

  .ds-deck {
    display: block;
    padding: 0;
  }

  .ds-deck > .ds-slide {
    width: 1920px;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    break-after: page;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .ds-deck > .ds-slide:last-child {
    break-after: auto;
  }
}


/*
 * 2G · Efeitos
 * Tudo que anima fica sob [data-movimento="ativo"], ligado pelo efeitos.js.
 * Sem o script, ou com movimento reduzido, o conteúdo aparece pronto.
 *
 * Classes:
 *   .ds-carga          filhos entram em sequência ao carregar a página (use com .ds-escalonar)
 *   .ds-revelar        o bloco entra quando aparece na tela (o script adiciona .ds-visivel)
 *   .ds-escalonar      os filhos entram um depois do outro (o script numera com --i)
 *   .ds-desenho--tracar   desenho técnico traçado ao carregar (pathLength="1" nas linhas e cotas)
 *   .ds-linha-tracada  linha de SVG (pathLength="1") traçada quando o bloco é revelado
 *   .ds-varredura      uma linha de leitura passa uma vez pela folha ao carregar
 *   .ds-chamar         botão que chama atenção uma vez quando revelado
 *   .ds-progresso      barra de leitura fina no topo da página
 */

/* ---------- Sempre (com transições curtas, que zeram com movimento reduzido) ---------- */

/* Pressionar: botões, setas e cartões-link afundam 1 px */
.ds-botao,
.ds-carrossel__seta,
.ds-cartao--link {
  transition: var(--transicao-cor), transform var(--duracao-rapida) var(--curva-padrao);
}

.ds-botao:active,
.ds-carrossel__seta:active,
.ds-cartao--link:active {
  transform: translateY(1px);
}

/* Cartão: marcas de corte nos cantos ao passar o mouse, como numa prancha */
.ds-cartao {
  position: relative;
  transition: var(--transicao-cor);
}

.ds-cartao::before,
.ds-cartao::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 0 solid var(--cor-texto);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duracao-rapida) var(--curva-padrao), transform var(--duracao-rapida) var(--curva-padrao);
}

.ds-cartao::before {
  top: -6px;
  left: -6px;
  border-top-width: 1px;
  border-left-width: 1px;
  transform: translate(4px, 4px);
}

.ds-cartao::after {
  right: -6px;
  bottom: -6px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  transform: translate(-4px, -4px);
}

.ds-cartao:hover {
  border-color: var(--cor-texto-suave);
}

.ds-cartao:hover::before,
.ds-cartao:hover::after {
  opacity: 1;
  transform: none;
}

/* Barra de leitura: só existe com movimento ativo e suporte a animação por rolagem */
.ds-progresso {
  display: none;
}

/* ---------- Quadros-chave ---------- */

@keyframes ds-surgir {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes ds-surgir-lado {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
}

@keyframes ds-sumir {
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes ds-descer {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes ds-tracar {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes ds-no-surgir {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}

@keyframes ds-aparecer {
  from {
    opacity: 0;
  }
}

@keyframes ds-entrar-direita {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
}

@keyframes ds-preencher {
  from {
    fill-opacity: 0;
  }
}

@keyframes ds-pontinhos {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  12% {
    opacity: 1;
  }
  25%,
  65% {
    transform: translateY(-3px);
  }
  45%,
  85% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
  }
}

@keyframes ds-esmaecer {
  from {
    opacity: 0.75;
  }
}

@keyframes ds-onda {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

@keyframes ds-cair {
  from {
    transform: scaleY(0);
  }
}

@keyframes ds-abrir {
  from {
    transform: scaleX(0);
  }
}

@keyframes ds-datilografar {
  from {
    clip-path: inset(-20% 100% -20% 0);
  }
  to {
    clip-path: inset(-20% 0 -20% 0);
  }
}

@keyframes ds-carimbar {
  0% {
    opacity: 0;
    transform: scale(1.18) rotate(-2deg);
  }
  60% {
    opacity: 1;
    transform: scale(0.98) rotate(0);
  }
}

@keyframes ds-varrer {
  0% {
    top: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes ds-anel {
  0% {
    box-shadow: 0 0 0 0 var(--cor-foco);
  }
  100% {
    box-shadow: 0 0 0 14px transparent;
  }
}

@keyframes ds-pulso {
  0%,
  100% {
    opacity: 0.25;
  }
  30% {
    opacity: 1;
  }
}

@keyframes ds-progresso {
  from {
    transform: scaleX(0);
  }
}

/* ---------- Com movimento ativo ---------- */

[data-movimento="ativo"] {
  /* Aparecer e sumir na hora (aviso, menu): troque .ds-surgir por .ds-sumir antes de remover */
  .ds-surgir {
    animation: ds-surgir var(--duracao-media) var(--curva-entrada) both;
  }

  .ds-sumir {
    animation: ds-sumir var(--duracao-media) var(--curva-saida) both;
  }

  /* Cabeçalho desce ao carregar */
  .ds-cabecalho {
    animation: ds-descer var(--duracao-lenta) var(--curva-entrada) both;
  }

  /* Entrada em sequência ao carregar */
  .ds-carga > * {
    animation: ds-surgir 600ms var(--curva-entrada) both;
    animation-delay: calc(var(--i, 0) * 90ms + 150ms);
  }

  /* Bloco revelado na rolagem: escondido até entrar na tela */
  .ds-revelar:not(.ds-visivel) {
    opacity: 0;
  }

  .ds-revelar.ds-visivel {
    animation: ds-surgir 600ms var(--curva-entrada) both;
  }

  .ds-revelar.ds-visivel .ds-escalonar > * {
    animation: ds-surgir 550ms var(--curva-entrada) both;
    animation-delay: calc(var(--i, 0) * 90ms + 250ms);
  }

  /* Linhas de tabela e linhas do case entram pela esquerda */
  .ds-revelar.ds-visivel tbody.ds-escalonar > *,
  .ds-revelar.ds-visivel .ds-case__linhas.ds-escalonar > * {
    animation-name: ds-surgir-lado;
  }

  /* SVG: itens de maquete entram no lugar */
  .ds-revelar.ds-visivel svg .ds-escalonar > * {
    transform-box: fill-box;
    animation-duration: 450ms;
    animation-delay: calc(var(--i, 0) * 140ms + 400ms);
  }

  /* Carimbo carimba no fim da entrada da folha */
  .ds-revelar.ds-visivel > .ds-carimbo,
  .ds-carga-folha > .ds-carimbo {
    transform-origin: 70% 50%;
    animation: ds-carimbar 500ms var(--curva-padrao) both;
    animation-delay: 700ms;
  }

  /* No hero o carimbo espera a construção do desenho terminar */
  .ds-carga-folha > .ds-carimbo {
    animation-delay: 3200ms;
  }

  /* Linha de SVG traçada quando o bloco é revelado */
  .ds-linha-tracada {
    stroke-dasharray: 1;
  }

  .ds-revelar:not(.ds-visivel) .ds-linha-tracada {
    stroke-dashoffset: 1;
  }

  .ds-revelar.ds-visivel .ds-linha-tracada {
    animation: ds-tracar 700ms var(--curva-padrao) both;
    animation-delay: calc(var(--i, 0) * 140ms + 700ms);
  }

  /*
   * Maquete de produto (.ds-maquete) montada quando a folha é revelada.
   * Cada peça entra no tempo --t (ms) que vem no HTML; textos aceitam --d (duração).
   *   __corpo     contorno do aparelho traçado e o fundo aparece (rect com pathLength="1")
   *   __entra     grupo que chega deslizando da direita, como notificação
   *   __borda     borda de cartão traçada (pathLength="1"); --fundo também faz o fundo aparecer
   *   __texto     texto datilografado
   *   __ponto     ponto que surge com um pulo; __onda é a onda que sai dele
   *   __pontinho  "digitando…": pulam e somem antes da resposta
   *   __linha     anotação traçada (pathLength="1")
   *   __aparece   surge sem deslocamento
   */
  .ds-revelar.ds-visivel .ds-maquete {
    .ds-maquete__corpo {
      stroke-dasharray: 1;
      animation: ds-tracar 900ms var(--curva-padrao) var(--t, 0ms) both,
        ds-preencher 500ms var(--curva-padrao) calc(var(--t, 0ms) + 600ms) both;
    }

    .ds-maquete__entra {
      animation: ds-entrar-direita 450ms var(--curva-entrada) var(--t, 0ms) both;
    }

    .ds-maquete__borda {
      stroke-dasharray: 1;
      animation: ds-tracar 500ms var(--curva-padrao) var(--t, 0ms) both;
    }

    .ds-maquete__borda--fundo {
      animation: ds-tracar 600ms var(--curva-padrao) var(--t, 0ms) both,
        ds-preencher 400ms var(--curva-padrao) calc(var(--t, 0ms) + 300ms) both;
    }

    .ds-maquete__texto {
      animation: ds-datilografar var(--d, 400ms) steps(16, jump-none) var(--t, 0ms) both;
    }

    .ds-maquete__ponto {
      transform-box: fill-box;
      transform-origin: center;
      animation: ds-no-surgir 340ms cubic-bezier(0.3, 1.6, 0.5, 1) var(--t, 0ms) both;
    }

    .ds-maquete__onda {
      transform-box: fill-box;
      transform-origin: center;
      animation: ds-onda 900ms var(--curva-saida) var(--t, 0ms) forwards;
    }

    .ds-maquete__pontinho {
      transform-box: fill-box;
      animation: ds-pontinhos 1000ms var(--curva-padrao) var(--t, 0ms);
    }

    .ds-maquete__linha {
      stroke-dasharray: 1;
      animation: ds-tracar 500ms var(--curva-padrao) var(--t, 0ms) both;
    }

    .ds-maquete__aparece {
      animation: ds-surgir 400ms var(--curva-entrada) var(--t, 0ms) both;
    }
  }

  /* Linha de leitura que passa uma vez pela folha ao carregar */
  .ds-varredura {
    position: relative;
  }

  .ds-varredura::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cor-texto-acento) 30%, var(--cor-texto-acento) 70%, transparent);
    box-shadow: 0 0 12px var(--cor-texto-acento);
    pointer-events: none;
    animation: ds-varrer 1600ms var(--curva-padrao) 200ms both;
  }

  /* Botão que chama atenção uma vez quando revelado */
  .ds-revelar.ds-visivel .ds-chamar {
    animation: ds-surgir 500ms var(--curva-entrada) 400ms both, ds-anel 900ms var(--curva-saida) 1000ms 2;
  }

  /*
   * Construção do desenho técnico (cerca de 3,2 s, uma vez), como numa prancha:
   *   0,0 s  arcos de compasso marcam o vértice
   *   0,35   Pessoa surge com onda azul
   *   0,65   os dois lados descem da Pessoa
   *   1,35   Processo e Produto surgem quando a linha chega
   *   1,45   a base liga Processo a Produto
   *   1,9    o eixo cai da Pessoa; marco 2G
   *   2,2    cotas se abrem; rótulos e notas são datilografados
   *   2,6    arcos esmaecem; 3,0 a Pessoa dá o último pulso
   * Peças: .ds-desenho__construcao, __linha--esq/--dir/--base, __no--pessoa/--processo/--produto,
   * __onda--*, __eixo, __marco, __cota--base/--esq/--dir, __rotulo--*, __nota--*. Linhas e cotas
   * laterais com pathLength="1".
   */
  .ds-desenho--tracar {
    .ds-desenho__construcao {
      stroke-dasharray: 1;
      animation: ds-tracar 700ms var(--curva-padrao) both, ds-esmaecer 700ms var(--curva-padrao) 2600ms both;
    }

    .ds-desenho__linha {
      stroke-dasharray: 1;
      animation: ds-tracar 750ms var(--curva-padrao) both;
    }

    .ds-desenho__linha--esq,
    .ds-desenho__linha--dir {
      animation-delay: 650ms;
    }

    .ds-desenho__linha--base {
      animation-duration: 600ms;
      animation-delay: 1450ms;
    }

    .ds-desenho__no,
    .ds-desenho__marco {
      transform-box: fill-box;
      transform-origin: center;
      animation: ds-no-surgir 340ms cubic-bezier(0.3, 1.6, 0.5, 1) both;
    }

    .ds-desenho__no--pessoa {
      animation-delay: 350ms;
    }

    .ds-desenho__no--processo,
    .ds-desenho__no--produto {
      animation-delay: 1350ms;
    }

    .ds-desenho__marco {
      animation-delay: 2300ms;
    }

    /* Ondas: invisíveis durante a espera (fill forwards), expandem e somem */
    .ds-desenho__onda {
      transform-box: fill-box;
      transform-origin: center;
      animation: ds-onda 900ms var(--curva-saida) 1350ms forwards;
    }

    .ds-desenho__onda--pessoa {
      animation: ds-onda 900ms var(--curva-saida) 350ms forwards, ds-onda 1100ms var(--curva-saida) 3000ms forwards;
    }

    .ds-desenho__eixo {
      transform-box: fill-box;
      transform-origin: 50% 0;
      animation: ds-cair 500ms var(--curva-padrao) 1900ms both;
    }

    .ds-desenho__cota--base {
      transform-box: fill-box;
      transform-origin: center;
      animation: ds-abrir 500ms var(--curva-padrao) 2200ms both;
    }

    .ds-desenho__cota--esq,
    .ds-desenho__cota--dir {
      stroke-dasharray: 1;
      animation: ds-tracar 400ms var(--curva-padrao) 2200ms both;
    }

    /* Rótulos e notas datilografados */
    .ds-desenho__rotulo,
    .ds-desenho__nota {
      animation: ds-datilografar 450ms steps(14, jump-none) both;
    }

    .ds-desenho__rotulo--pessoa {
      animation-delay: 600ms;
    }

    .ds-desenho__rotulo--processo {
      animation-delay: 1450ms;
    }

    .ds-desenho__rotulo--produto {
      animation-delay: 1550ms;
    }

    .ds-desenho__nota--marco {
      animation-duration: 150ms;
      animation-delay: 2400ms;
    }

    .ds-desenho__nota--esq,
    .ds-desenho__nota--dir {
      animation-delay: 2500ms;
    }

    .ds-desenho__nota--base {
      animation-duration: 800ms;
      animation-timing-function: steps(40, jump-none);
      animation-delay: 2650ms;
    }
  }

  /* Carregando: os nós acendem na ordem Pessoa, Processo, Produto */
  .ds-carregando .ds-triade__no {
    animation: ds-pulso var(--duracao-pulso) var(--curva-padrao) infinite;
  }

  .ds-carregando .ds-triade__no:nth-of-type(2) {
    animation-delay: calc(var(--duracao-pulso) / 3);
  }

  .ds-carregando .ds-triade__no:nth-of-type(3) {
    animation-delay: calc(var(--duracao-pulso) * 2 / 3);
  }

  /* Barra de leitura presa no topo, avançando com a rolagem */
  @supports (animation-timeline: scroll()) {
    .ds-progresso {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: var(--z-aviso);
      height: 2px;
      background: var(--cor-texto-secundario);
      transform-origin: 0 50%;
      pointer-events: none;
      animation: ds-progresso linear both;
      animation-timeline: scroll(root);
    }
  }
}

/* Impressão e PDF mostram o estado final, nunca um quadro do meio da animação */
@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .ds-revelar {
    opacity: 1 !important;
  }
}

/*
 * Carregando (resposta de IA, envio)
 * <div class="ds-carregando" role="status">
 *   <svg class="ds-triade">...</svg><span>Preparando a resposta</span>
 * </div>
 * Com movimento reduzido fica parado; o texto diz o que está acontecendo.
 */
.ds-carregando {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-3);
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
  letter-spacing: var(--tracking-caixa-alta);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.ds-carregando .ds-triade {
  width: 24px;
  height: 24px;
}