/* TDIA: estilos compartilhados */

/*
 * Archivo self-hospedado: o @import do Google Fonts serializava
 * HTML -> style.css -> css2 -> woff2, quatro saltos antes do primeiro
 * texto pintar. Arquivo unico porque Archivo e variavel: os pesos
 * 500/700/800 saiam do mesmo woff2. Subset latin cobre o pt-BR.
 * O hash no nome permite cache imutavel sem build (ver nginx-tdia.conf).
 */
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/archivo-latin-cd56e2.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Noto Sans JP self-hospedada para o japonês (requisito 27). Subset gerado a
 * partir do texto real, não por faixa de kanji: 485 glifos em 147 KB, contra
 * 1,7 MB por peso da fonte inteira. O eixo de peso sobrevive ao subset, então
 * um arquivo só cobre 400, 700 e 800, como a Archivo.
 *
 * A origem do texto são as páginas de site/ja/ MAIS os dicionários japoneses
 * de app.js e avaliacao.js: aquelas mensagens também pintam em /ja/, e foram
 * esquecidas na primeira geração deste subset. O teste de src/site.test.ts
 * confere as duas origens e reprova se um caractere ficar sem glifo.
 *
 * Regenerar quando a copy japonesa mudar:
 *   python3 -m fontTools.subset "NotoSansJP[wght].ttf" \
 *     --text-file=<CJK de site/ja/*.html + app.js + avaliacao.js> \
 *     --layout-features+=palt --flavor=woff2 \
 *     --output-file=noto-jp-<hash>.woff2
 * A fonte vem do repositório google/fonts, sob SIL OFL. A lista de cobertura
 * fica ao lado, em cobertura-ja.txt, e o hash no nome tem que ser trocado
 * aqui e no preload das páginas de site/ja/.
 *
 * O unicode-range é o que impede a fonte de ser baixada fora de /ja/: nenhuma
 * página latina pinta um glifo CJK, exceto o rótulo 日本語 do seletor de
 * idioma, e esse usa var(--font-mono), que só inclui a Noto dentro de
 * :lang(ja). Ver o bloco :lang(ja) mais abaixo.
 */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/noto-jp-351897.woff2') format('woff2');
  unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+4E00-9FFF, U+FF00-FFEF;
}

:root {
  --bg: #f3f0ea;
  --text: #1e1b16;
  /* Contraste WCAG AA sobre --bg (#f3f0ea), medido: o ocre antigo
     (#b97c14) dava 3,10:1 e reprovava em todo texto pequeno. Ele fica
     como --accent-bright, restrito a decoracao, onde nao ha texto a ler.
     Consumidores: cursor de digitacao do header (.brand-cursor), cursor
     do H1 (.type-line) e o ponto final (.accent-dot). O outline de foco
     usa --accent nos dois temas. */
  --accent: #8f5f0d;        /* 4,85:1 - texto */
  --accent-bright: #b97c14; /* decoracao apenas */
  --accent-hover: #6f4a0a;  /* 6,94:1 */
  --text-secondary: #5c564c;   /* 6,39:1 */
  --text-tertiary: #6e6758;    /* 4,93:1 - era #8a8375, 3,31:1 */
  --line: #ddd6c9;
  --texture-dot: rgba(185, 124, 20, 0.18);
  --texture-line: rgba(30, 27, 22, 0.055);
  --input-bg: rgba(255, 255, 255, 0.34);
  /* fundo do chip selecionado (avaliação). Alfa 0,07 e não mais: em 0,10 o
     fundo tingido derrubava o texto ocre para 4,36:1 e reprovava o AA do
     requisito 2; em 0,07 a conta fecha em 4,52:1. */
  --chip-ativo: rgba(185, 124, 20, 0.07);
  --erro: #8b2f24;
  --sucesso: #35643f;
  color-scheme: light;
  --pad-x: clamp(20px, 5.5vw, 72px);
  /* padding vertical do header. Vive aqui, e não solto na regra do
     .site-header, porque a primeira dobra da home é calculada a partir dele
     (ver .manifesto): uma fonte de verdade por breakpoint. */
  --header-pad-y: 20px;
  --font-display: Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/*
 * Tema escuro segue a preferencia do sistema. Mesma familia ocre da
 * paleta clara, com o acento clareado para manter AA sobre o fundo
 * escuro (#e0a838 sobre #17140f: 8,6:1; secundarios acima de 4,5:1).
 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17140f;
    --text: #ece7dd;
    --accent: #e0a838;
    /* no claro a decoracao e a nota mais FORTE que o texto ocre; no escuro a
       hierarquia so se mantem invertendo a direcao: mais clara, nao mais
       escura. Com #b97c14 o cursor e o ponto do H1 ficavam abaixo do
       #e0a838 ao redor e o acento sumia. Consumidores: cursor do header,
       cursor do H1 e .accent-dot, todos decoracao (--texture-dot e token
       separado, intocado). */
    --accent-bright: #f0c266;
    --accent-hover: #f0c266;
    --text-secondary: #b3ab9c;
    --text-tertiary: #999080;
    --line: #353026;
    --texture-dot: rgba(185, 124, 20, 0.22);
    --texture-line: rgba(236, 231, 221, 0.05);
    --input-bg: rgba(255, 255, 255, 0.06);
    /* tinge com o proprio acento do tema; o fundo clareia e o #e0a838 ainda
       mede 6,99:1 por cima */
    --chip-ativo: rgba(224, 168, 56, 0.12);
    --erro: #e2857a;
    --sucesso: #8ec79a;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; min-width: 0; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  min-height: 100vh;
  /* bloco de contencao da textura: sem isso o body::before absoluto cairia no
     bloco inicial (do tamanho do viewport) e voltaria a nao acompanhar o
     documento. O min-height acima garante textura ate numa pagina curta. */
  position: relative;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { color: var(--accent-hover); }

/*
 * COREOGRAFIA SINCRONIZADA (requisito 10) — timeline do load da home.
 * Uma história só, três atos que nunca se sobrepõem: header → acrônimo → H1.
 *
 *   ATO 1 — HEADER            0.00–0.75s
 *     0.10 / 0.25 / 0.40 / 0.55s  letras T, D, I, A aparecem uma a uma
 *     0.00–0.75s                  cursor de bloco pisca (5 ciclos de 0.15s)
 *     0.75s                       cursor some. Fim do ato 1.
 *
 *   ATO 2 — ACRÔNIMO          0.85–1.60s   (começa 0.10s após o ato 1 fechar)
 *     0.85–1.35s                  "TD > Transformação Digital" (fade + subida)
 *     1.10–1.60s                  "IA > Inteligência Artificial" (fade + subida)
 *     1.60s                       acrônimo inteiro visível. Fim do ato 2.
 *
 *   ATO 3 — TÍTULO            1.70–3.55s   (começa 0.10s após o ato 2 fechar)
 *     1.70–2.60s                  INTELIGÊNCIA (12 passos)
 *     2.60–2.90s                  QUE (3 passos)
 *     2.90–3.55s                  ENTREGA. (8 passos)
 *     3.55s                       cursor de bloco some, ponto ocre fica.
 *
 *   FUNDO — TEXTURA           0.20–3.55s   fade sutil por baixo, sem cursor,
 *                                          fecha junto com o último ato.
 *
 * Invariantes: o cursor do header morre em 0.75s e o do título só nasce em
 * 1.70s, então nunca há dois cursores ativos ao mesmo tempo; o acrônimo está
 * 100% visível antes da primeira letra do H1. Sequência inteira: 3.55s,
 * dentro do orçamento de ~4s.
 */

/* textura de fundo: grade fina + malha de pontos, entra com atraso.
   position:absolute (e nao fixed) porque a textura pertence ao DOCUMENTO,
   nao ao viewport (requisito 5): a camada cobre o body inteiro e a mascara
   vertical decai do topo ao rodape da pagina. Presa ao viewport, a mascara
   renascia em forca maxima a cada rolagem e a grade ficava tao densa no
   rodape quanto na primeira dobra. Como a camada agora rola junto com o
   resto do conteudo, o scroll nao repinta nada.
   O joelho em 100vh NAO reintroduz o viewport: a camada nao se move com a
   rolagem, o 100vh so marca onde a primeira dobra termina. Ate la a queda
   1 -> 0,62 reproduz o que a mascara radial antiga entregava no fim da dobra
   (spec/home-desktop.png); dali ao rodape o decaimento segue ate 0,45, como
   no artboard design/Main.dc.html. Nas duas paginas o topo
   comeca em forca total, entao o monitore.ai, curto, nao fica sem textura. */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(var(--texture-dot) 1.5px, transparent 1.5px),
    repeating-linear-gradient(0deg, var(--texture-line) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, var(--texture-line) 0 1px, transparent 1px 96px);
  background-size: 96px 96px, 96px 96px, 96px 96px;
  mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.62) 100vh, rgba(0, 0, 0, 0.45) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.62) 100vh, rgba(0, 0, 0, 0.45) 100%);
  animation: texture-in 3.35s ease-out 0.2s forwards;
}

@keyframes texture-in {
  to { opacity: 1; }
}

.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--header-pad-y) var(--pad-x);
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--text);
}
.brand:hover { color: var(--text); }

.logo-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.brand-name {
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 17px;
  display: inline-flex;
  align-items: center;
}

/* nome TDIA digitado letra a letra no load, com cursor de bloco ocre */
/* step-start: a letra acende no instante do próprio delay. Com steps(1, end)
   o Chrome resolvia a fase de preenchimento no valor inicial e o "T" ficava
   invisível para sempre. */
.brand-letter {
  opacity: 0;
  animation: letter-in 0.01s step-start forwards;
}
.brand-letter:nth-child(1) { animation-delay: 0.1s; }
.brand-letter:nth-child(2) { animation-delay: 0.25s; }
.brand-letter:nth-child(3) { animation-delay: 0.4s; }
.brand-letter:nth-child(4) { animation-delay: 0.55s; }

@keyframes letter-in {
  to { opacity: 1; }
}

/* cursor pisca durante a digitação (0–0.75s) e some logo em seguida,
   liberando a cena para o acrônimo (ver timeline no topo do arquivo) */
.brand-cursor {
  width: 0.55em;
  height: 1em;
  margin-left: 0.12em;
  background: var(--accent-bright);
  opacity: 0;
  animation:
    cursor-blink 0.15s steps(2, end) 5,
    cursor-out 0.01s linear 0.75s forwards;
}

@keyframes cursor-blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes cursor-out {
  to { opacity: 0; }
}

.header-contact,
.back-link {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.header-contact { display: none; }

/* Lado direito do header: contato (ou "< VOLTAR") mais o seletor de idioma.
   O agrupamento mantém o space-between do .site-header com dois filhos, e o
   flex-wrap deixa o seletor cair para uma segunda linha se o espaço faltar.
   Abaixo de 768px o .header-contact é display:none, então em 390px o seletor
   tem o lado direito inteiro e nada precisa quebrar. */
.header-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0 16px;
}

/* Seletor de idioma (requisito 26). O idioma atual é um span, não link.
   font-mono é a pilha do sistema e NÃO inclui Archivo nem a fonte japonesa:
   o rótulo 日本語 cai no CJK do sistema operacional, e nenhuma página não
   japonesa baixa fonte por causa de três glifos. Alvos de 44px pelo
   requisito 6; a altura casa com a do .header-contact ao lado. */
.lang-switch {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
}

.lang-switch a,
.lang-switch .lang-atual {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
}

.lang-switch a { color: var(--text-tertiary); }
.lang-switch a:hover { color: var(--accent-hover); }
.lang-switch .lang-atual { color: var(--text); font-weight: 700; }

/* Manifesto / conteúdo principal */
/* tetos em vh no padding: a composição tem que caber numa tela de 900px de
   altura (e de 844 no mobile), sem empurrar lede, links e rodapé para fora.
   Vale para as duas páginas: o showcase é tão alto quanto o manifesto. */
.manifesto,
.showcase {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: clamp(28px, 4vh, 160px) var(--pad-x) clamp(32px, 4.5vh, 180px);
}

/* A home passou a rolar (seções dos requisitos 13 a 18), então o
   margin-top:auto do rodapé não segura mais a primeira dobra: quem reserva a
   altura agora é o próprio manifesto. A conta é a tela menos o header, cuja
   caixa é o alvo de toque de 44px do .brand mais os dois paddings. O
   conteúdo continua alinhado ao topo, composição intocada. Só a home: o
   monitore.ai usa .showcase e segue no fluxo antigo. */
.manifesto {
  min-height: calc(100vh - 44px - 2 * var(--header-pad-y));
}

/* Acrônimo TD·IA: as duas leituras surgem em sequência, depois do load */
.acronym-line {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 6px;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.acronym-key { color: var(--text); font-weight: 700; }
.acronym-sep { color: var(--accent); }

/* ato 2: entram só depois do cursor do header sumir (0.75s) e terminam
   em 1.60s, antes da primeira letra do H1 (1.70s) */
.acronym-part {
  opacity: 0;
  transform: translateY(6px);
  animation: acronym-in 0.5s ease-out forwards;
}
.acronym-part:nth-child(1) { animation-delay: 0.85s; }
.acronym-part:nth-child(2) { animation-delay: 1.10s; }

/* título digitado como num prompt do Claude Code: bloco ocre corre com a digitação.
   Começa só depois que o acrônimo já apareceu, para nunca coexistir com o
   cursor do header, e as 3 linhas correm em sequência contínua (um cursor
   por vez, sem pausa entre linhas). */
.display-title .type-line {
  display: inline-block;
  /* clip SÓ na horizontal: é o eixo do typewriter. Antes era overflow:hidden,
     que também cortava na vertical — com line-height 0.98 a caixa fica mais
     baixa que a área de conteúdo da fonte e decepava o circunflexo do "Ê" de
     INTELIGÊNCIA (e a cauda do Q). overflow-y:visible deixa os diacríticos
     transbordarem sem afetar layout, altura de linha ou o cursor de bloco. */
  overflow-x: clip;
  overflow-y: visible;
  white-space: nowrap;
  vertical-align: bottom;
  /* content-box aqui e só aqui: os max-width dos keyframes são larguras de
     TEXTO (medidas na Archivo). Com o border-box global, a borda do cursor
     comia 0.4em do texto e os últimos passos revelavam menos do que o
     calibrado. */
  box-sizing: content-box;
  /* sem max-width no estado de repouso: o 0 inicial vem do fill backwards das
     animações (ver abaixo), e o estado final é a largura natural do texto. */
  /* 0.4em: bloco quadrado, em paridade com o cursor de 0.55em do header.
     Em 0.13em lia como caret fino, de outra família visual. */
  border-right: 0.4em solid transparent;
}

/* digitação e cursor são duas animações separadas, com a mesma duração e o
   mesmo delay: a digitação usa steps() (o efeito), o cursor usa linear (a
   janela de acesa/apagada). Antes o border-color viajava dentro dos mesmos
   keyframes com steps(): a função quantizava o corte 99.9%→100% e a linha 2
   ficava com um resto de cursor ocre aceso depois do fim. */
/* fill backwards (e não both): o 0 inicial vale durante o delay, mas ao fim da
   animação a linha volta ao repouso, sem max-width, na largura natural. Com
   `both` o valor final era o último degrau do steps(), e o Chrome erra esse
   degrau na linha 2 (0.3s/3 passos com delay 2.6s: o progresso do after-phase
   cai em 0.99999… e o floor devolve 2/3), o que decepava o E de QUE. Como o
   fill morre exatamente no fim da animação, o último passo aparece no mesmo
   instante em que apareceria: a timeline não muda. */
.type-line-1 { animation: type-l1 0.9s steps(12, end) 1.7s backwards, cursor-window 0.9s linear 1.7s forwards; }
.type-line-2 { animation: type-l2 0.3s steps(3, end) 2.6s backwards, cursor-window 0.3s linear 2.6s forwards; }
.type-line-3 { animation: type-l3 0.65s steps(8, end) 2.9s backwards, cursor-window 0.65s linear 2.9s forwards; }

@keyframes cursor-window {
  0%, 99.9% { border-right-color: var(--accent-bright); }
  100% { border-right-color: transparent; }
}

/* max-width calibrado na largura real do texto com Archivo (7.45 / 2.27 / 5.40em).
   Acima disso o inline-block não estica: os últimos passos de cada steps() não
   revelavam nada, as letras saíam em pares e o cursor travava no fim da linha.
   Se a Archivo não carregar, o fallback system-ui desenha as linhas MAIS
   ESTREITAS que estes targets: os últimos passos passam a não revelar nada e a
   digitação termina antes do fim da animação. Degradação aceitável, o texto
   aparece inteiro; a calibração é pela Archivo, que é a fonte servida. */
@keyframes type-l1 { from { max-width: 0; } to { max-width: 7.45em; } }
@keyframes type-l2 { from { max-width: 0; } to { max-width: 2.27em; } }
@keyframes type-l3 { from { max-width: 0; } to { max-width: 5.40em; } }

/* CALIBRAÇÃO POR IDIOMA (requisito 26)
 *
 * Só duas coisas mudam de idioma para idioma: a contagem de caracteres nos
 * steps() e a largura de cada linha. Os delays e as durações são os mesmos em
 * todos, então a timeline documentada acima vale sem alteração: o H1 abre em
 * 1.70s e fecha em 3.55s, e os invariantes do requisito 10 seguem de graça.
 *
 * Como medir a largura de um idioma novo: renderize as três linhas com o CSS
 * real (.display-title .type-line, com a animação desligada), leia
 * getBoundingClientRect().width menos a border-right e divida pelo font-size.
 * Depois arredonde uns 3% para cima, que é a folga já embutida nos valores do
 * pt-BR. Errar para cima só faz os últimos passos não revelarem nada; errar
 * para baixo corta as últimas letras, que é bug de verdade.
 *
 *   idioma  linhas                            steps      medido        no CSS
 *   pt-BR   INTELIGÊNCIA / QUE / ENTREGA.     12 / 3 / 8  7.21/2.20/5.25  7.45/2.27/5.40
 *   en      INTELLIGENCE / THAT / DELIVERS.   12 / 4 / 9  7.46/2.68/5.33  7.69/2.77/5.50
 *   ja      成果を / 届ける / 知性。            3 / 3 / 3  2.96/2.90/2.51  3.06/2.99/2.59
 *
 * O espanhol (INTELIGENCIA / QUE / ENTREGA.) mede exatamente como o pt-BR: o
 * Ê e o E têm o mesmo avanço na Archivo, então ele reaproveita os keyframes
 * do pt-BR sem uma linha própria aqui.
 *
 * O japonês é o único que mexe nas DURAÇÕES, e só nelas. Com 3 caracteres por
 * linha, manter o 0.9 / 0.3 / 0.65 do pt-BR faria a linha 2 ser digitada três
 * vezes mais rápido que a linha 1, e o ritmo denunciaria que os tempos foram
 * feitos para outro texto. As nove letras são repartidas em partes iguais
 * dentro da MESMA janela: começa em 1.70s, fecha em 3.55s, e todo o resto da
 * timeline acima segue idêntico. */
@keyframes type-l1-en { from { max-width: 0; } to { max-width: 7.69em; } }
@keyframes type-l2-en { from { max-width: 0; } to { max-width: 2.77em; } }
@keyframes type-l3-en { from { max-width: 0; } to { max-width: 5.50em; } }

/* INTELLIGENCE é 3.3% mais larga que INTELIGÊNCIA na Archivo. No piso de 46px
   do clamp isso dá 360.5px de linha para 347px de área útil em 390px: sem
   scroll horizontal (o requisito 6 continua de pé), mas a linha invade a
   margem direita e encosta na borda da tela. Baixar só o piso resolve, e só
   tem efeito abaixo de ~418px de largura, onde o piso é quem manda: acima
   disso o min(11vw, 10.2vh) já devolve 46px ou mais nos dois idiomas. Os
   max-width dos keyframes são em em, então a calibração acompanha sozinha. */
:lang(en) .display-title { font-size: clamp(43px, min(11vw, 10.2vh), 168px); }

:lang(en) .type-line-1 { animation: type-l1-en 0.9s steps(12, end) 1.7s backwards, cursor-window 0.9s linear 1.7s forwards; }
:lang(en) .type-line-2 { animation: type-l2-en 0.3s steps(4, end) 2.6s backwards, cursor-window 0.3s linear 2.6s forwards; }
:lang(en) .type-line-3 { animation: type-l3-en 0.65s steps(9, end) 2.9s backwards, cursor-window 0.65s linear 2.9s forwards; }

/* JAPONÊS (requisito 26 e 27)
 *
 * A família entra nas variáveis AQUI, nunca no :root. O style.css é um só
 * para os quatro idiomas, e declarar a Noto globalmente faria a home em
 * português baixar 148 KB só para desenhar o rótulo 日本語 do seletor de
 * idioma. Fora de /ja/ esses três glifos caem no CJK do sistema operacional,
 * que todo desktop e todo celular têm e custa zero byte. O unicode-range
 * sozinho não resolveria isso: ele decide quando o arquivo é baixado, não
 * qual família o seletor resolve.
 * A Noto vem primeiro nas duas primeiras pilhas, mas o unicode-range mantém
 * o latino (TDIA, monitore.ai, Forward Deployed Engineer) na Archivo. */
:lang(ja) {
  --font-display: 'Noto Sans JP', Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace, 'Noto Sans JP';
  /* palt aperta o espaçamento proporcional de kana e pontuação: sem ele a
     vírgula e o ponto japoneses deixam meio quadratim de buraco. */
  font-feature-settings: "palt" 1;
  /* impede quebra de linha antes de kana pequeno e de pontuação */
  line-break: strict;
}

/* Caixa alta não existe em japonês: o text-transform: uppercase espalhado
   pelo arquivo é inócuo sobre kana e kanji, e a hierarquia passa a depender
   só de peso, tamanho e cor, que continuam valendo. O que quebra de verdade é
   o tracking negativo, calibrado para apertar maiúsculas latinas: sobre
   glifos CJK, que já trazem o próprio respiro dentro da caixa em, ele encosta
   um no outro. O tracking positivo dos rótulos mono fica como está, porque
   字間 aberto é estilo legítimo em japonês. .brand-name fica de fora: é
   sempre "TDIA", latino. */
:lang(ja) .display-title,
:lang(ja) .showcase-title,
:lang(ja) .section-title,
:lang(ja) .contact-dialog h2,
:lang(ja) .moment-title,
:lang(ja) .situacao-titulo,
:lang(ja) .faq summary,
:lang(ja) .pergunta-titulo { letter-spacing: 0; }

/* line-height 0.98 espreme o latino sem cortar nada, porque a maiúscula não
   ocupa a caixa em inteira. O glifo CJK ocupa: em 0.98 as três linhas do H1
   se tocam. */
:lang(ja) .display-title { line-height: 1.1; }

/* O tamanho NÃO muda: três glifos CJK a 92px pesam mais na página que doze
   maiúsculas latinas do mesmo corpo, porque cada um preenche a caixa em
   inteira. O bloco fica mais estreito e mais alto que o latino, e é assim que
   um título japonês deve ser. Subir o corpo para igualar a LARGURA do latino
   pediria ~170px, e as três linhas passariam de 550px de altura, empurrando
   lede e links para fora da primeira dobra. */
@keyframes type-l1-ja { from { max-width: 0; } to { max-width: 3.06em; } }
@keyframes type-l2-ja { from { max-width: 0; } to { max-width: 2.99em; } }
@keyframes type-l3-ja { from { max-width: 0; } to { max-width: 2.59em; } }

:lang(ja) .type-line-1 { animation: type-l1-ja 0.62s steps(3, end) 1.7s backwards, cursor-window 0.62s linear 1.7s forwards; }
:lang(ja) .type-line-2 { animation: type-l2-ja 0.62s steps(3, end) 2.32s backwards, cursor-window 0.62s linear 2.32s forwards; }
:lang(ja) .type-line-3 { animation: type-l3-ja 0.61s steps(3, end) 2.94s backwards, cursor-window 0.61s linear 2.94s forwards; }


@keyframes acronym-in {
  to { opacity: 1; transform: none; }
}

.display-title {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--text);
  /* escala pelos dois eixos: só por largura, uma tela de 900px de altura
     recebia 158px e as três linhas comiam metade do viewport */
  font-size: clamp(46px, min(11vw, 10.2vh), 168px);
  overflow-wrap: break-word;
}

.accent-dot { color: var(--accent-bright); }

.manifesto-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* ~65 caracteres por linha, como no mockup. Em 720px a linha ia a ~79 */
  max-width: 600px;
}

.lede {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.65;
  color: var(--text-secondary);
  font-weight: 500;
}

.link-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cta-link,
.secondary-link {
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.cta-link {
  font-size: clamp(13px, 1.1vw, 14px);
  color: var(--accent);
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.cta-link:hover { color: var(--accent-hover); }

.secondary-link {
  font-size: clamp(11px, 1vw, 12px);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Footer */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 18px var(--pad-x) 24px;
  border-top: 1px solid var(--line);
}

.footer-brand {
  font-weight: 800;
  font-size: 14px;
  color: var(--text-secondary);
}

.footer-tagline {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: right;
}

.footer-disciplines {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Formulário de contato: dialog nativo mantém foco, Escape e semântica sem
   uma biblioteca de modal. */
.contact-dialog {
  width: min(640px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(30, 27, 22, 0.24);
}

.contact-dialog::backdrop {
  background: rgba(30, 27, 22, 0.48);
  backdrop-filter: blur(3px);
}

.dialog-shell { padding: clamp(24px, 5vw, 44px); }

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.dialog-label {
  font: 700 11px var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--accent);
}

.dialog-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-secondary);
  font: 28px/1 var(--font-body);
  cursor: pointer;
}

.dialog-close:hover { border-color: var(--accent); color: var(--accent); }

.contact-dialog h2 {
  margin: 0;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.dialog-intro {
  margin: 14px 0 28px;
  color: var(--text-secondary);
  font: 500 16px/1.55 var(--font-body);
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text-secondary);
  font: 700 12px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--input-bg);
  color: var(--text);
  padding: 12px 13px;
  font: 16px/1.4 var(--font-body);
  text-transform: none;
}

.contact-form textarea { resize: vertical; min-height: 112px; }
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.form-wide { grid-column: 1 / -1; }
.turnstile-box:empty { display: none; }

.form-privacy {
  margin: -6px 0 0;
  color: var(--text-tertiary);
  font: 13px/1.45 var(--font-body);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 44px;
}

.submit-button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: 700 13px var(--font-mono);
  letter-spacing: 0.12em;
  cursor: pointer;
}

.submit-button:hover { color: var(--accent-hover); }
.submit-button:disabled { cursor: wait; opacity: 0.55; }
.form-status { color: var(--text-secondary); font: 14px/1.4 var(--font-body); }
.form-status.error { color: var(--erro); }
.form-status.success { color: var(--sucesso); }

@media (max-width: 560px) {
  .contact-form { grid-template-columns: 1fr; }
  .form-wide { grid-column: auto; }
  .form-actions { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (max-width: 767.98px) {
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-tagline {
    text-align: left;
  }
  .link-group {
    gap: 8px;
  }
  .site-footer {
    gap: 8px;
    padding: 14px var(--pad-x) 18px;
  }
}

/* Página monitore.ai */
.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.showcase-title {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: var(--text);
  font-size: clamp(48px, min(9vw, 9vh), 96px);
  overflow-wrap: break-word;
}

.showcase-lede {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.65;
  color: var(--text-secondary);
  font-weight: 500;
  max-width: 520px;
}

.bullets {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
  max-width: 520px;
}

.bullet {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.bullet-mark {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  margin-top: 3px;
  flex-shrink: 0;
}

.bullet-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.stats {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 400px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.stat-label {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-tertiary);
}

/* ------------------------------------------------------------------
   Seções da home abaixo da dobra (requisitos 13 a 18).

   Todas repetem o mesmo esqueleto: linha superior em --line, rótulo mono
   .eyebrow e título Archivo 800 com a pontuação final em --accent-bright
   (.accent-dot). A tipografia é fluida entre os dois artboards de
   referência: design/Mobile.dc.html (390px) e Main.dc.html
   (1280px). Nada de cursor ou digitação aqui: a coreografia do requisito 10
   é exclusiva da entrada da página.
   ------------------------------------------------------------------ */
.section {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.2vw, 28px);
  padding: clamp(56px, 6vw, 80px) var(--pad-x);
  border-top: 1px solid var(--line);
}

/* Entrada por scroll (requisito 18): fade + leve subida, uma vez só. A
   classe .visible vem do IntersectionObserver do app.js. O estado escondido
   só nasce quando o movimento é permitido, então com reduce a seção já está
   visível e nem depende do JS. */
@media (prefers-reduced-motion: no-preference) {
  .section {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  .section.visible {
    opacity: 1;
    transform: none;
  }
}

.section-title {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--text);
  font-size: clamp(32px, 4vw, 52px);
  overflow-wrap: break-word;
}

/* monitore.ai é nome próprio: caixa baixa, como na página de projetos */
.section-title-name { text-transform: none; }

/* o CTA final fecha a página com um título maior que o das outras seções */
.section-title-lead { font-size: clamp(38px, 5vw, 64px); }

.section-lede {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: var(--text-secondary);
  font-weight: 500;
  max-width: 600px;
}

/* Momentos: uma coluna no mobile, o desktop distribui no bloco
   min-width:768px lá embaixo */
.moments {
  display: grid;
  margin-top: 12px;
  gap: clamp(40px, 5vw, 72px);
}

.moment {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 18px);
}

.moment-label {
  font: 700 11px var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--accent);
}

.moment-title {
  margin: 0;
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
}

/* aqui os bullets são a lista de sintomas dentro da coluna, e não um bloco
   solto como no monitore.ai: sem o respiro nem o teto de largura de lá */
.moment .bullets {
  margin-top: 0;
  gap: 12px;
  max-width: none;
}

/* Fluxo da esteira na home (requisito 21): três caixas, você pede, a IA
   executa, você decide, com um chevron no vão entre elas. Até 2026-09-23 era
   uma barra contínua de pontas arredondadas e sem conectores; o dono pediu
   caixas no mesmo dia. A largura da caixa da IA é a mensagem: a maior parte
   do trabalho sai da equipe, que fica com o pedido e a decisão. Sem passos,
   sem fases e sem atores além de você e a IA: a linha do tempo de nove
   segmentos por ator saiu em 2026-09-23 por descrever o método a ponto de
   dispensar a contratação. Humano em ocre e IA em cor secundária, as mesmas
   cores das etiquetas de ator da esteira.html; cantos retos como o resto do
   site. No mobile as caixas empilham (grid de uma coluna, o padrão abaixo) e
   o chevron aponta para baixo. */
.fluxo {
  display: grid;
  gap: 28px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.fluxo-passo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 12px 16px;
  background: var(--line);
  color: var(--text);
}
.fluxo-passo.ia { background: var(--text-secondary); color: var(--bg); }
.fluxo-passo.humano { background: var(--accent); color: var(--bg); }
/* Chevron no vão: quadrado de 10px com duas bordas, girado 45°. Girado, a
   ponta avança 3,5px além do centro do quadrado; os 22px são a metade do vão
   (14px) mais o meio quadrado (5px) mais esse avanço. Sem glifo de seta e sem
   data URI: nada de fonte ou CSP no caminho, e nada para o leitor de tela. */
.fluxo-passo + .fluxo-passo::before {
  content: '';
  position: absolute;
  top: -22px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border: solid var(--text-tertiary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.fluxo-ator {
  font: 700 11px var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* sem alfa na sublinha: --bg sobre --accent fecha em 4,85:1 e sobre
   --text-secondary em 6,39:1; qualquer opacidade derrubaria o AA */
.fluxo-texto { font: 13px/1.4 var(--font-body); }

@media (min-width: 768px) {
  .fluxo { grid-template-columns: 2fr 5fr 2fr; }
  .fluxo-passo { align-items: center; text-align: center; }
  .fluxo-passo + .fluxo-passo::before {
    top: calc(50% - 5px);
    left: -22px;
    transform: rotate(-45deg);
  }
  /* três ganhos, não quatro: a grade da entrega garantida logo acima já
     tem quatro colunas e as duas seções não podem parecer a mesma */
  .stats-grid.ganhos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Prova: no mobile o grid tem uma coluna só e empilha na ordem do DOM
   (título, texto, indicadores, link). No desktop os indicadores saltam para
   a coluna da direita e o link volta para baixo do texto, sem duplicar
   marcação (ver bloco min-width:768px). */
.proof {
  display: grid;
  gap: 20px;
}

.proof > .stats { margin-top: 0; }

/* Grade de indicadores (Controle e Pacote da oferta): o mesmo .stat da
   Prova, quatro em linha no desktop e empilhados no mobile. Valor um degrau
   menor que o da Prova porque são frases, não números. */
.stats-grid {
  display: grid;
  gap: 20px;
  margin-top: 12px;
  max-width: none;
}
.stats-grid .stat-value { font-size: 20px; }

/* Papéis (forward-deployed-engineer.html, requisito 23, .papeis.dois): quem
   faz o quê, nunca a sequência. Etiqueta de ator em ocre e, em cada coluna,
   itens .stat com o nome em mono e uma linha de apoio. A grade de quatro
   atores da esteira.html saiu em 2026-09-23, trocada pelo .comparativo
   abaixo. */
.papeis {
  display: grid;
  gap: clamp(28px, 3vw, 40px);
  margin-top: 12px;
}

.papel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.papel-ator {
  align-self: flex-start;
  padding: 6px 10px;
  font: 700 11px var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--line);
  color: var(--text);
}
.humano .papel-ator { background: var(--accent); color: var(--bg); }

.papel .stat-value { font-size: 20px; }

/* Comparativo da esteira (esteira.html, requisito 22, decidido em
   2026-09-23): duas faixas de etapas com o tamanho proporcional ao tempo, a
   tradicional em cima e a com IA embaixo. Especificação e código, na cor
   da IA, encolhem a duas faixas finas na segunda linha e o que sobra vira a
   caixa tracejada do tempo ganho; as etapas humanas, em ocre, têm o mesmo
   tamanho nas duas linhas: "a IA trabalha, a sua equipe decide" em um
   desenho só. Substitui a grade de papéis de quatro atores e nove itens,
   que tinha texto demais. As etapas são as genéricas de qualquer esteira,
   não o método da TDIA (regra de corte do requisito 21). No mobile as duas
   faixas viram colunas lado a lado e o tempo corre para baixo
   (grid-template-rows com os mesmos pesos); no desktop, colunas. */
.comparativo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 12px;
  margin: 8px 0 0;
}
.comparativo > figcaption { grid-column: 1 / -1; }
.faixa {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.etapas {
  display: grid;
  gap: 4px;
  height: 26rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tradicional .etapas { grid-template-rows: 1fr 1.5fr 3.5fr 1fr 1fr; }
.com-tdia .etapas { grid-template-rows: 1fr 0.15fr 0.15fr 1fr 1fr 4.7fr; }
.etapa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 8px;
  overflow: hidden;
  text-align: center;
  font: 700 12px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--line);
  color: var(--text);
}
.etapa.humano { background: var(--accent); color: var(--bg); }
.etapa.ia { background: var(--text-secondary); color: var(--bg); }
/* faixa fina: o tamanho é a mensagem, o nome fica só para o leitor de tela */
.com-tdia .etapa.ia { padding: 0; color: transparent; }
.etapa.devolvido {
  background: none;
  border: 1.5px dashed var(--text-tertiary);
  color: var(--text-tertiary);
  font: 500 13px/1.4 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}
.etapa-quem {
  font: 13px/1.4 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}

/* o pacote fecha a mesma seção: filete e rótulo mono, sem novo título */
.pacote {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: clamp(8px, 1.5vw, 20px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
}

/* Perguntas: <details> nativos, sem JS */
.faq {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  margin-top: 12px;
}

.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }

/* o marcador nativo cai por três caminhos, um por motor: display:flex no
   Chrome, list-style no Firefox e o pseudo -webkit- no Safari. O ">" ocre
   que gira ao abrir entra por ::after. */
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: clamp(18px, 1.8vw, 22px) 0;
  list-style: none;
  cursor: pointer;
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: ">";
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent);
  transition: transform 0.2s ease-out;
}

.faq details[open] summary::after { transform: rotate(90deg); }

/* aberto, o respiro pergunta -> resposta e o gap do artboard (12px no
   desktop, 10px no mobile), e nao o padding cheio do summary, que somava
   ~44px. O padding de cima e a margem da resposta continuam inteiros: o
   item aberto fica 22 / 12 / 22, igual ao artboard, sem colar no filete de
   baixo. Alvo de toque preservado: 22 + 12 + ~24px de texto = 58px, acima
   dos 44px dos requisitos 6 e 18. */
.faq details[open] summary { padding-bottom: clamp(10px, 1vw, 12px); }

.faq-answer {
  margin: 0 0 clamp(18px, 1.8vw, 22px);
  max-width: 640px;
}

/* a margem negativa devolve ao olho o respiro do artboard (~45px entre o
   botão e esta linha). O padding de alvo de toque do link abaixo empurra a
   caixa do parágrafo 14px acima do texto, então descontamos os mesmos 14px:
   o alvo de toque continua inteiro, só a distância visual encolhe. */
.cta-note {
  margin: -17px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-tertiary);
}

/* alvo de toque de 44px sem tirar o e-mail de dentro da frase: o
   inline-block cresce a caixa clicável, o texto continua na linha. O
   line-height é explícito porque a conta depende dele: 14 + 14x1,2 + 14 =
   44,8px, independente do que o parágrafo herdar. */
.cta-note a {
  display: inline-block;
  padding: 14px 0;
  line-height: 1.2;
}

/* ------------------------------------------------------------------
   Avaliação inicial (avaliacao.html, requisitos 19 a 21). Reusa .showcase,
   .eyebrow, .showcase-title, .showcase-lede, .bullets e .cta-link; classe
   nova só onde não havia equivalente. */

/* o título da página e o do perfil são caixa alta, diferente do monitore.ai
   (nome próprio em caixa baixa) que motivou o .showcase-title original */
.avaliacao-title { text-transform: uppercase; }

/* gatilho inline dentro da frase do .cta-note ("Abra o formulário"): botão
   vestido de link, com o mesmo truque de alvo de toque do .cta-note a */
.nota-link {
  display: inline-block;
  padding: 14px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
  color: var(--accent);
}
.nota-link:hover { color: var(--accent-hover); }
.nota-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.pergunta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pergunta-titulo {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.pergunta-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--accent);
  flex-shrink: 0;
}

.pergunta-opcional {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--chip-ativo);
  color: var(--accent);
}
/* marcador de selecionado na linguagem da casa; \00a0 porque espaço solto
   no fim do content colapsa */
.chip[aria-pressed="true"]::before { content: '>\00a0'; }

.site-campo { max-width: 480px; }

.site-campo input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--input-bg);
  color: var(--text);
  padding: 12px 13px;
  font: 16px/1.4 var(--font-body);
}
.site-campo input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.campo-nota {
  margin: 0;
  font: 13px/1.45 var(--font-body);
  color: var(--text-tertiary);
}

.avaliacao-acao {
  display: flex;
  flex-direction: column;
  gap: 4px;
}


@media (min-width: 768px) {
  /* padding fluido também no desktop: em 1280x720 e 1366x768 os 34/30px fixos
     do header e do rodapé eram o que sobrava para fora da tela */
  :root { --header-pad-y: clamp(18px, 3vh, 34px); }
  .header-contact { display: flex; }
  .manifesto,
  .showcase { gap: clamp(20px, 3vh, 56px); }
  .site-footer { padding: clamp(14px, 2.4vh, 30px) var(--pad-x); }

  .showcase-columns {
    display: flex;
    gap: 72px;
  }
  .stats { padding-top: 4px; }

  .moments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 0; }
  .comparativo { grid-template-columns: 1fr; gap: clamp(24px, 2.4vw, 32px); }
  .etapas { height: auto; }
  .tradicional .etapas { grid-template: auto / 1fr 1.5fr 3.5fr 1fr 1fr; }
  .com-tdia .etapas { grid-template: auto / 1fr 0.15fr 0.15fr 1fr 1fr 4.7fr; }
  .etapa { min-height: 56px; padding: 10px 8px; }

  /* Prova: texto à esquerda e indicadores em coluna fixa à direita. Os
     indicadores são o 3º filho no DOM (a ordem do mobile), então aqui vão
     para a coluna 2 explicitamente e o link cai de volta para baixo do
     texto, na coluna 1. */
  /* 360px e 72px são as medidas do artboard em 1280. Fluidas para baixo
     porque a soma delas é quase metade de um tablet de 768: fixas, a coluna
     de texto sobrava com 251px e o link do monitore.ai quebrava em duas
     linhas. */
  .proof {
    grid-template-columns: minmax(0, 1fr) clamp(270px, 28vw, 360px);
    column-gap: clamp(40px, 5.6vw, 72px);
    align-items: start;
  }
  .proof > .stats {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}

/* laptops de 720/768px de altura: mesma composição do desktop, respiro menor.
   Depois do bloco min-width:768px acima, senão o gap de lá venceria por ordem.
   Só o eixo vertical muda: 1440x900 e 1920x1080 ficam intocados. */
@media (min-width: 768px) and (max-height: 800px) {
  .manifesto,
  .showcase {
    padding-top: clamp(20px, 3vh, 160px);
    padding-bottom: clamp(22px, 3.2vh, 180px);
    gap: clamp(16px, 2.4vh, 56px);
  }
  .manifesto-copy { gap: 18px; }
}

/* monitore no mobile: empilhado, a coluna inteira estourava a tela de 844px.
   Bloco no fim do arquivo de propósito: media query não soma especificidade,
   então precisa vir depois das regras base de .stats / .stat / .bullets. */
@media (max-width: 767.98px) {
  .showcase {
    padding-top: clamp(20px, 2.4vh, 120px);
    padding-bottom: clamp(16px, 1.8vh, 96px);
    gap: 18px;
  }
  .bullets { margin-top: 10px; gap: 8px; }
  /* bullets e stats são dois grupos distintos: 11px de respiro entre eles lia
     como um bloco só. Agora 20px de intervalo e mais ar dentro dos stats. */
  .stats { gap: 18px; margin-top: 20px; }
  .stat { padding-top: 16px; }
  /* tamanhos do artboard mobile (design/Mobile.dc.html). Viviam
     no gate de telas curtas la embaixo, entao num 390x844 caiam nos valores de
     desktop (15 / 24 / 14). Valem para todo mobile: as mesmas classes servem
     os bullets e indicadores do monitore.ai e as respostas do FAQ, que no
     artboard tambem sao 14/1,55. */
  .bullet-text { font-size: 14px; line-height: 1.55; }
  .stat-value { font-size: 20px; }
  .stat-label { font-size: 13px; }
  /* respiros menores do artboard mobile: 8px entre titulo e bloco, 8px dentro
     10px entre os sintomas de cada momento */
  .moments,
  .faq { margin-top: 8px; }
  .moment .bullets { gap: 10px; }
  /* a linha das disciplinas (camada do acrônimo) tem que caber inteira em uma
     linha: em duas, o rodapé inflava de 76 para 105px, 12% da tela */
  .footer-disciplines {
    font-size: clamp(9px, 2.5vw, 10px);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  /* escopado nas seções novas: o rótulo do monitore.ai fica nos 13px */
  .section .eyebrow { font-size: 12px; }
  /* avaliação no mobile: mesmos degraus do restante da página */
  .avaliacao .eyebrow { font-size: 12px; }
  .pergunta-titulo { font-size: 16px; gap: 10px; }
  .chips { gap: 8px; }
  .chip { padding: 0 14px; font-size: 11px; letter-spacing: 0.06em; }
}

/* telas curtas de celular (iPhone SE, 375x667): a mesma composição, comprimida.
   Depois do bloco mobile acima para vencer no cascade, e antes do
   prefers-reduced-motion, que continua sendo o último do arquivo.
   Alvos de toque (min-height 44px em .brand, .cta-link, .secondary-link,
   .back-link) NÃO entram aqui: acessibilidade não é folga de layout. */
@media (max-width: 767.98px) and (max-height: 720px) {
  :root { --header-pad-y: 12px; }
  .site-footer { padding: 10px var(--pad-x) 12px; gap: 4px; }
  .manifesto,
  .showcase { padding-top: 16px; padding-bottom: 18px; gap: 16px; }
  .manifesto-copy { gap: 14px; }
  .display-title { font-size: clamp(38px, min(11vw, 10.2vh), 168px); }
  .showcase-title { font-size: clamp(34px, min(8vw, 8vh), 96px); }
  .lede,
  .showcase-lede { font-size: 15px; line-height: 1.5; }
  /* só a entrelinha: o corpo de 14px já vem do bloco mobile acima */
  .bullet-text { line-height: 1.5; }
  .bullets { gap: 6px; margin-top: 6px; }
  .stats { gap: 8px; margin-top: 10px; }
  .stat { padding-top: 8px; gap: 2px; }
}

/* Movimento reduzido: nada anima, todo mundo já nasce no estado final.
   Bloco no fim do arquivo de propósito: media query não soma especificidade,
   então precisa vir depois de .brand-letter, .brand-cursor e .acronym-part,
   que antes venciam por ordem e continuavam animando mesmo com reduce. */
@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
    opacity: 0.6;
  }
  .acronym-part {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .brand-letter {
    animation: none;
    opacity: 1;
  }
  .brand-cursor {
    animation: none;
    opacity: 0;
  }
  .display-title .type-line {
    animation: none;
    max-width: none;
    border-right: 0;
  }
  /* o estado escondido das seções nem chega aqui: ele vive dentro de um
     @media (prefers-reduced-motion: no-preference). Só o giro do marcador
     das perguntas precisa ser desligado. */
  .faq summary::after { transition: none; }
}

/* Página do Forward Deployed Engineer (requisito 23): três situações em
   cartões com filete vertical ocre (forma diferente dos .stat com filete em
   cima, para as duas grades não lerem como repetição), faixa de áreas de
   atuação em uma linha e papéis em duas colunas. */
.situacoes {
  display: grid;
  gap: 24px;
  margin-top: 12px;
}
.situacao {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 20px;
  border-left: 2px solid var(--accent);
}
.situacao-tag {
  font: 700 11px var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.situacao-titulo {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
}
.situacao-texto {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-tertiary);
}
.fecho {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  font-weight: 600;
  color: var(--text);
  max-width: 600px;
}
.atua-faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  padding: 28px var(--pad-x);
  border-top: 1px solid var(--line);
}
.atua-faixa .eyebrow { margin: 0; }
.atua-tag {
  font: 600 14px var(--font-mono);
  color: var(--text);
}
.papeis.dois .papel { gap: 18px; }

/* Artigo (requisito 24): texto corrido com a mesma medida da linha de apoio. */
.prosa {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
}
.prosa p {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: var(--text-secondary);
}
.prosa strong { color: var(--text); font-weight: 600; }

@media (min-width: 768px) {
  .situacoes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
  .papeis.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; }
  .atua-faixa { gap: 12px 28px; }
}