/* tokens.css · Codec Studio · Identidade base 2027 (fonte única para o site novo)
   Gerado por _gerador/gerar_tokens.py em 2026-10-19. Não edite à mão: mude o gerador e rode de novo.
   Modo claro é o padrão. Seções: .cx-cinza, .cx-apoio (verde da fêmea) e .cx-momento-preto (no máximo 1 por página);
   .cx-card-grafite (card dentro do momento preto) e .cx-flutuante-sobre-apoio (flutuante passando sobre o verde).
   Fora daqui, por decisão do operador: Soldadinho 50, 100 e 200 (rosado claro) não entram como fundo, superfície ou padronagem. */

:root {
  /* Cores da marca (valores fixos) */
  --cx-branco: #FFFFFF;  /* Base da página. É o corpo branco do soldadinho. */
  --cx-cinza-50: #F3F3F3;  /* Cinza claro: superfície de seção, de card e do rodapé. */
  --cx-cinza-100: #E3E3E3;  /* Linha fina sobre o branco. */
  --cx-cinza-200: #D4D4D4;  /* Linha fina sobre o cinza claro e padronagem de linhas no claro. */
  --cx-cinza-300: #9F9F9F;  /* Texto secundário no momento preto. */
  --cx-cinza-400: #888888;  /* Borda de campo de formulário (3,54:1 no branco). */
  --cx-cinza-600: #635B5A;  /* Texto secundário no claro: legenda, crédito, nota. */
  --cx-grafite: #212121;  /* Texto e títulos; o "codec" do logo; card dentro do momento preto (sem vermelho 600 em cima). */
  --cx-preto: #0F0F0F;  /* Fundo do momento preto. Nunca é a base da página. */
  --cx-vermelho-400: #F4595C;  /* Soldadinho 400: letra, fio e ícone vermelhos pequenos sobre o preto e o grafite. */
  --cx-vermelho: #D20A2E;  /* Vermelho Soldadinho (600): o acento. Botão principal, fio, rótulo, destaque, ícone. No preto, só letra de 24 px ou mais. */
  --cx-vermelho-700: #B0001E;  /* Soldadinho 700: botão vermelho e link ao passar o mouse. */
  --cx-vermelho-800: #890013;  /* Soldadinho 800: botão vermelho pressionado. */
  --cx-verde-50: #F4F7F2;  /* Fêmea 50: superfície clara de apoio. */
  --cx-verde-100: #E4ECE1;  /* Fêmea 100: linha fina sobre o verde claro. */
  --cx-verde-200: #D0DAC2;  /* Fêmea 200: linha mais marcada sobre o verde claro. */
  --cx-verde: #666F2D;  /* Verde Fêmea (600): o apoio. Fio e destaque da seção verde; texto branco por cima só nas peças das redes. */
  --cx-verde-700: #535B22;  /* Fêmea 700: rótulo e ícone sobre o verde claro; ícone do flutuante sobre o verde (7,27:1 no branco). */

  /* Papéis no modo claro (o padrão do site) */
  --cx-fundo: var(--cx-branco);  /* Fundo da página e das seções claras. */
  --cx-superficie: var(--cx-cinza-50);  /* Card, caixa e faixa sobre o fundo. */
  --cx-linha: var(--cx-cinza-100);  /* Divisória e contorno de card. */
  --cx-linha-forte: var(--cx-cinza-200);  /* Divisória sobre a superfície cinza. */
  --cx-borda-campo: var(--cx-cinza-400);  /* Contorno de campo de formulário. */
  --cx-texto: var(--cx-grafite);  /* Texto corrido. */
  --cx-texto-2: var(--cx-cinza-600);  /* Texto secundário. */
  --cx-titulo: var(--cx-grafite);  /* Títulos. */
  --cx-rotulo: var(--cx-vermelho);  /* Rótulo em caixa alta acima do título. */
  --cx-fio: var(--cx-vermelho);  /* Fio curto que acompanha o rótulo. */
  --cx-destaque: var(--cx-vermelho);  /* Palavra de destaque em Fraunces. */
  --cx-acento: var(--cx-vermelho);  /* Fundo do botão principal (WhatsApp). */
  --cx-icone-cor: var(--cx-vermelho);  /* Ícone de marca e ponto REC. */
  --cx-acento-hover: var(--cx-vermelho-700);  /* Botão principal ao passar o mouse. */
  --cx-acento-ativo: var(--cx-vermelho-800);  /* Botão principal pressionado. */
  --cx-acento-borda: transparent;  /* Borda do botão principal. Na seção verde, Fêmea 200: o botão branco ganha contorno. */
  --cx-sobre-acento: var(--cx-branco);  /* Texto e ícone em cima do vermelho. */
  --cx-link: var(--cx-grafite);  /* Link dentro do texto (sempre sublinhado). */
  --cx-link-sublinhado: var(--cx-vermelho);  /* Sublinhado do link. */
  --cx-link-hover: var(--cx-vermelho-700);  /* Link ao passar o mouse. */
  --cx-foco: var(--cx-grafite);  /* Contorno de foco do teclado. */
  --cx-padrao-linha: var(--cx-cinza-200);  /* Linha da padronagem do símbolo. */
  --cx-padrao-fundo: var(--cx-cinza-50);  /* Fundo atrás da padronagem. */
  --cx-veu-foto: rgb(15 15 15 / 0.35);  /* Véu mais forte permitido sobre foto, só na faixa de um crédito curto. */

  /* Tipografia (Conjunto D, 3 famílias SIL OFL) */
  --cx-fonte-titulo: "Nunito Sans", "Nunito Sans Reserva", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;  /* Títulos, subtítulo, rótulos, botões e menu. */
  --cx-fonte-texto: "Mukta", "Mukta Reserva", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;  /* Texto corrido. */
  --cx-fonte-destaque: "Fraunces", "Fraunces Reserva", Georgia, serif;  /* Uma a três palavras de destaque dentro do título. */
  --cx-peso-titulo: 600;  /* Nunito Sans SemiBold. */
  --cx-peso-subtitulo: 300;  /* Nunito Sans Light, só a partir de 20 px. */
  --cx-peso-rotulo: 700;  /* Nunito Sans Bold, caixa alta espaçada. */
  --cx-peso-botao: 700;  /* Nunito Sans Bold. */
  --cx-peso-menu: 600;  /* Nunito Sans SemiBold. */
  --cx-peso-texto: 400;  /* Mukta Regular. */
  --cx-peso-texto-forte: 600;  /* Mukta SemiBold: negrito dentro do texto corrido (pouco uso). */
  --cx-peso-destaque: 600;  /* Fraunces 72pt Soft SemiBold Italic. */
  --cx-tam-display: clamp(2.5rem, 1.7174rem + 3.4783vw, 4.5rem);  /* Título da abertura (H1). 40 px no celular, 72 px no computador. */
  --cx-tam-h2: clamp(1.875rem, 1.4348rem + 1.9565vw, 3rem);  /* Título de seção (H2). 30 a 48 px. */
  --cx-tam-h3: clamp(1.375rem, 1.2283rem + 0.6522vw, 1.75rem);  /* Subtítulo de bloco (H3). 22 a 28 px. */
  --cx-tam-h4: clamp(1.1875rem, 1.1141rem + 0.3261vw, 1.375rem);  /* Título de card (H4). 19 a 22 px. */
  --cx-tam-subtitulo: clamp(1.25rem, 1.1033rem + 0.6522vw, 1.625rem);  /* Linha de apoio em Nunito Sans Light. 20 a 26 px. */
  --cx-tam-texto: clamp(1.0625rem, 1.038rem + 0.1087vw, 1.125rem);  /* Texto corrido em Mukta. 17 a 18 px. */
  --cx-tam-pequeno: 0.9375rem;  /* Legenda e nota em Mukta. 15 px. */
  --cx-tam-rotulo: clamp(0.75rem, 0.7255rem + 0.1087vw, 0.8125rem);  /* Rótulo em caixa alta. 12 a 13 px. */
  --cx-tam-botao: clamp(1.0625rem, 1.038rem + 0.1087vw, 1.125rem);  /* Texto do botão. 17 a 18 px. */
  --cx-tam-botao-pequeno: 0.9375rem;  /* Texto do botão pequeno da barra do topo. 15 px. */
  --cx-tam-menu: 1rem;  /* Itens do menu. 16 px. */
  --cx-entrelinha-display: 1.08;  /* Entrelinha do H1. */
  --cx-entrelinha-h2: 1.12;  /* Entrelinha do H2. */
  --cx-entrelinha-h3: 1.2;  /* Entrelinha do H3. */
  --cx-entrelinha-h4: 1.25;  /* Entrelinha do H4. */
  --cx-entrelinha-subtitulo: 1.4;  /* Entrelinha do subtítulo. */
  --cx-entrelinha-texto: 1.6;  /* Entrelinha do texto corrido. */
  --cx-entrelinha-pequeno: 1.5;  /* Entrelinha da legenda. */
  --cx-entrelinha-rotulo: 1.25;  /* Entrelinha do rótulo. */
  --cx-entrelinha-botao: 1.1;  /* Entrelinha do botão. */
  --cx-espaco-display: -0.015em;  /* Espaço entre letras do H1. */
  --cx-espaco-h2: -0.01em;  /* Espaço entre letras do H2. */
  --cx-espaco-h3: -0.005em;  /* Espaço entre letras do H3. */
  --cx-espaco-rotulo: 0.16em;  /* Espaço entre letras do rótulo em caixa alta. */
  --cx-espaco-botao: 0.01em;  /* Espaço entre letras do botão. */
  --cx-destaque-escala: 1.13;  /* Tamanho da palavra em Fraunces: 1,13 vez o resto da frase (mesma altura de letra). */
  --cx-destaque-entrelinha: 0.9;  /* Entrelinha da palavra em Fraunces (não abre a linha). */
  --cx-medida-texto: 62ch;  /* Largura máxima do texto corrido. */
  --cx-medida-subtitulo: 46ch;  /* Largura máxima do subtítulo. */
  --cx-medida-titulo: 20ch;  /* Largura máxima do título. */

  /* Espaçamento e grade */
  --cx-esp-1: 4px;  /* Espaço mínimo (ícone e texto). */
  --cx-esp-2: 8px;
  --cx-esp-3: 12px;
  --cx-esp-4: 16px;  /* Vão padrão no celular. */
  --cx-esp-5: 24px;  /* Vão padrão no computador. */
  --cx-esp-6: 32px;
  --cx-esp-7: 48px;  /* Entre título de seção e conteúdo. */
  --cx-esp-8: 64px;
  --cx-esp-9: 96px;
  --cx-esp-10: 128px;
  --cx-margem: clamp(16px, 5vw, 64px);  /* Margem lateral da página: 16 a 18 px no celular, até 64 px no computador. */
  --cx-largura: 1200px;  /* Largura máxima do conteúdo. */
  --cx-largura-larga: 1360px;  /* Largura máxima de foto e grade de trabalhos. */
  --cx-secao: clamp(72px, 10vw, 144px);  /* Respiro em cima e embaixo de cada seção. */
  --cx-secao-curta: clamp(48px, 6vw, 88px);  /* Respiro de seção curta (faixa, prova). */
  --cx-colunas: 4;  /* Colunas da grade: 4 no celular, 8 no tablet, 12 no computador. */
  --cx-vao: 16px;  /* Vão da grade: 16 px no celular, 20 px no tablet, 24 px no computador. */
  --cx-barra-altura: 64px;  /* Altura da barra do topo: 64 px no celular, 72 px a partir de 768 px. */
  --cx-logo-altura: 28px;  /* Altura do logo na barra: 28 px no celular, 32 px a partir de 768 px. */

  /* Formas */
  --cx-raio-campo: 10px;  /* Campo de formulário. */
  --cx-raio-card: 16px;  /* Card e caixa. */
  --cx-raio-foto: 16px;  /* Foto comum. */
  --cx-raio-folha: clamp(20px, 2.4vw, 36px) 0;  /* Forma de folha das formas da marca (2 cantos opostos redondos). Só na foto principal da seção. */
  --cx-raio-pilula: 999px;  /* Botão, etiqueta e filtro. */
  --cx-sombra-flutuante: 0 6px 20px rgb(15 15 15 / 0.2);  /* Sombra do botão flutuante de WhatsApp. O site tem só 2 sombras: esta e a do painel do menu. */
  --cx-sombra-painel: 0 12px 32px rgb(15 15 15 / 0.12);  /* Painel do menu aberto sobre o claro. */

  /* Controles e ícones */
  --cx-alvo-min: 44px;  /* Menor área de toque. */
  --cx-botao-altura: 56px;  /* Altura do botão principal. */
  --cx-botao-altura-pequeno: 44px;  /* Altura do botão da barra e de botões secundários. */
  --cx-botao-borda: 1.5px;  /* Espessura da borda do botão (contorno e botão branco na seção verde). */
  --cx-flutuante: 56px;  /* Diâmetro do botão flutuante de WhatsApp. */
  --cx-flutuante-anel: 3px;  /* Espessura do anel em volta do flutuante: separa o disco de qualquer fundo (branco; Fêmea 200 sobre o verde). */
  --cx-flutuante-fundo: var(--cx-vermelho);  /* Fundo do flutuante. Sobre a seção verde vira branco (classe .cx-flutuante-sobre-apoio). */
  --cx-flutuante-icone: var(--cx-branco);  /* Ícone do flutuante. Sobre a seção verde vira Fêmea 700. */
  --cx-flutuante-anel-cor: var(--cx-branco);  /* Cor do anel do flutuante. Sobre a seção verde vira Fêmea 200. */
  --cx-botao-largura: auto;  /* Largura do botão principal. Abaixo de 480 px: a largura toda. */
  --cx-botao-justifica: center;  /* Alinhamento do conteúdo do botão. Abaixo de 480 px: ícone e texto juntos, à esquerda. */
  --cx-botao-seta: inline-block;  /* Seta do botão principal. Abaixo de 480 px: some (display none). */
  --cx-botao-quebra: nowrap;  /* Texto do botão principal numa linha só. Abaixo de 480 px pode quebrar em 2 linhas equilibradas. */
  --cx-foco-largura: 3px;  /* Espessura do contorno de foco. */
  --cx-foco-distancia: 3px;  /* Distância do contorno de foco. */
  --cx-icone-ui: 24px;  /* Ícone de interface (WhatsApp, seta, play, fechar). */
  --cx-icone-marca: 40px;  /* Ícone oficial de audiovisual em card e passo. */
  --cx-icone-marca-grande: 56px;  /* Ícone oficial em destaque. */
  --cx-camada-barra: 40;  /* Ordem de camada da barra do topo. */
  --cx-camada-flutuante: 50;  /* Ordem de camada do botão flutuante. */

  /* Movimento */
  --cx-dur-1: 160ms;  /* Cor e borda (hover). */
  --cx-dur-2: 280ms;  /* Entrada de elemento, seta do botão. */
  --cx-dur-3: 520ms;  /* Zoom de foto, visor, fio que cresce. */
  --cx-curva-saida: cubic-bezier(0.2, 0.7, 0.2, 1);  /* Entradas. */
  --cx-curva-suave: cubic-bezier(0.65, 0, 0.35, 1);  /* Ida e volta (agulha, filtro). */
  --cx-curva-mola: cubic-bezier(0.34, 1.4, 0.64, 1);  /* Pulinho leve em ícone e play (no máximo 6% de aumento). */
  --cx-zoom-foto: 1.03;  /* Aumento da foto ao passar o mouse. */
  --cx-desloca-seta: 4px;  /* Quanto a seta do botão anda ao passar o mouse. */
}

@media (max-width: 479px) {
  :root {
    --cx-botao-largura: 100%;
    --cx-botao-justifica: flex-start;
    --cx-botao-seta: none;
    --cx-botao-quebra: normal;
  }
}

@media (min-width: 768px) {
  :root {
    --cx-colunas: 8;
    --cx-vao: 20px;
    --cx-barra-altura: 72px;
    --cx-logo-altura: 32px;
  }
}

@media (min-width: 1024px) {
  :root {
    --cx-colunas: 12;
    --cx-vao: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cx-dur-1: 0ms;
    --cx-dur-2: 0ms;
    --cx-dur-3: 0ms;
    --cx-zoom-foto: 1;
    --cx-desloca-seta: 0px;
  }
}

/* Seção cinza claro (superfície) */
.cx-cinza {
  --cx-fundo: var(--cx-cinza-50);
  --cx-superficie: var(--cx-branco);
  --cx-linha: var(--cx-cinza-200);
  --cx-linha-forte: var(--cx-cinza-200);
  --cx-padrao-linha: var(--cx-cinza-200);
  --cx-padrao-fundo: var(--cx-cinza-50);
  background-color: var(--cx-fundo);
  color: var(--cx-texto);
}

/* Seção de apoio no verde claro da fêmea: o vermelho sai; rótulo e ícone Fêmea 700, fio e destaque Verde Fêmea; botão vira branco (só peça branca ou preta no verde) */
.cx-apoio {
  --cx-fundo: var(--cx-verde-50);
  --cx-superficie: var(--cx-branco);
  --cx-linha: var(--cx-verde-100);
  --cx-linha-forte: var(--cx-verde-200);
  --cx-rotulo: var(--cx-verde-700);
  --cx-fio: var(--cx-verde);
  --cx-destaque: var(--cx-verde);
  --cx-acento: var(--cx-branco);
  --cx-acento-hover: var(--cx-verde-100);
  --cx-acento-ativo: var(--cx-verde-200);
  --cx-sobre-acento: var(--cx-verde-700);
  --cx-acento-borda: var(--cx-verde-200);
  --cx-link-sublinhado: var(--cx-verde);
  --cx-link-hover: var(--cx-verde-700);
  --cx-icone-cor: var(--cx-verde-700);
  --cx-padrao-linha: var(--cx-verde-200);
  --cx-padrao-fundo: var(--cx-verde-50);
  background-color: var(--cx-fundo);
  color: var(--cx-texto);
}

/* Momento preto: a seção de impacto (no máximo 1 por página) */
.cx-momento-preto {
  --cx-fundo: var(--cx-preto);
  --cx-superficie: var(--cx-grafite);
  --cx-linha: rgb(255 255 255 / 0.16);
  --cx-linha-forte: rgb(255 255 255 / 0.24);
  --cx-texto: var(--cx-branco);
  --cx-texto-2: var(--cx-cinza-300);
  --cx-titulo: var(--cx-branco);
  --cx-rotulo: var(--cx-vermelho-400);
  --cx-fio: var(--cx-vermelho-400);
  --cx-icone-cor: var(--cx-vermelho-400);
  --cx-destaque: var(--cx-vermelho);
  --cx-link: var(--cx-branco);
  --cx-link-sublinhado: var(--cx-vermelho-400);
  --cx-link-hover: var(--cx-vermelho-400);
  --cx-foco: var(--cx-branco);
  --cx-padrao-linha: var(--cx-grafite);
  --cx-padrao-fundo: var(--cx-preto);
  background-color: var(--cx-fundo);
  color: var(--cx-texto);
}

/* Card grafite dentro do momento preto: nada de vermelho 600 em cima do grafite (2,93:1); botão vira branco */
.cx-card-grafite {
  --cx-fundo: var(--cx-grafite);
  --cx-texto: var(--cx-branco);
  --cx-texto-2: var(--cx-cinza-300);
  --cx-titulo: var(--cx-branco);
  --cx-rotulo: var(--cx-vermelho-400);
  --cx-fio: var(--cx-vermelho-400);
  --cx-icone-cor: var(--cx-vermelho-400);
  --cx-destaque: var(--cx-vermelho-400);
  --cx-acento: var(--cx-branco);
  --cx-acento-hover: var(--cx-cinza-50);
  --cx-acento-ativo: var(--cx-cinza-100);
  --cx-sobre-acento: var(--cx-grafite);
  --cx-link: var(--cx-branco);
  --cx-link-sublinhado: var(--cx-vermelho-400);
  --cx-link-hover: var(--cx-vermelho-400);
  --cx-foco: var(--cx-branco);
  --cx-linha: rgb(255 255 255 / 0.16);
  background-color: var(--cx-fundo);
  color: var(--cx-texto);
}

/* Botão flutuante enquanto passa sobre a seção verde: disco branco, ícone Fêmea 700, anel Fêmea 200 (nunca vermelho sobre verde) */
.cx-flutuante-sobre-apoio {
  --cx-flutuante-fundo: var(--cx-branco);
  --cx-flutuante-icone: var(--cx-verde-700);
  --cx-flutuante-anel-cor: var(--cx-verde-200);
}