/* ==========================================================
   TOKENS: CORES, FONTES E MEDIDAS
   A identidade visual mora aqui. Nenhuma outra folha escreve uma cor ou uma fonte:
   todas usam estas variáveis. Para trocar a paleta, mude os valores abaixo (os nomes
   ficam). Exceções, de propósito: a forma da seta (o preto é só canal alfa) e os véus
   escuros sobre as fotos, que são tinta com transparência.

   Identidade de 2026-10-26 (decidida pelo sócio e pelo Tiago): os cinzas do site do escritório e o
   vermelho só de acento. Em 2026-10-27, o sócio pediu um site limpo, com fotos grandes: os títulos
   ficaram mais leves e menores, as fotos e os botões ganharam cantos arredondados.

   Versão 2 do site limpo (2026-10-27, decisão nova do Tiago): os papéis de cor (fundo, superfície,
   texto, linha, acento) vêm do design system dos sistemas do Núcleo Imobiliário (design-system-imob-mn,
   src/estilos-tokens.html): fundos claros e quentes, texto quase preto quente, o vermelho do escritório
   só de acento e um verde com parcimônia. A paleta antiga (--tinta, --grafite...) fica para a assinatura.
   ========================================================== */
:root {
  --logo-filtro: none;       /* as logos dos clientes: silhuetas pretas; no fundo escuro, invertidas */
  /* Paleta da marca (a mesma do kit de marca CIVITAS v1) */
  --tinta: #323038;          /* texto; fundo das seções escuras */
  --grafite: #4E4E54;        /* quadra escura do símbolo; acentos sobre fundo claro */
  --cinza-medio: #6E6E74;    /* quadra do símbolo no fundo escuro; números grandes, bordas */
  --cinza-claro: #BFBFBF;    /* quadra clara do símbolo; texto suave e acentos sobre fundo escuro */
  --quase-branco: #F2F2F2;   /* fundo da página; texto sobre fundo escuro */
  --vermelho: #E92B31;       /* só a praça do símbolo e detalhes raros (filete, foco, item selecionado) */
  --branco: #FFFFFF;

  /* Do design system do Núcleo Imobiliário (os nomes de lá entre parênteses) */
  --areia: #F3F1EA;          /* fundo da página (--bg-app) */
  --creme: #FFFDF8;          /* superfície, seções em tom branco (--bg-surface) */
  --creme-2: #F9F6EF;        /* superfície dentro das seções em tom branco (--bg-surface-2) */
  --tinta-quente: #211F1B;   /* texto (--text-primary) */
  --texto-quente: #6D685E;   /* texto suave (--text-secondary) */
  --texto-quente-3: #928C80; /* números grandes e traços, nunca texto de leitura (--text-tertiary) */
  --vermelho-mn: #EA0029;    /* o acento (--mn-red) */
  --vermelho-mn-fundo: #C8102C; /* (--mn-red-deep) */
  --verde: #356B4D;          /* a natureza, com parcimônia: os números da gestão (--status-ok) */
  --linha-quente: rgba(33, 31, 27, .12);      /* (--line) */
  --linha-quente-forte: rgba(33, 31, 27, .2); /* (--line-strong) */

  /* Tons derivados da paleta */
  --tinta-escura: #28272D;           /* superfície no tema escuro */
  --tinta-clara: #3C3B42;            /* fundo das seções em tom branco, no modo escuro */
  --cinza-intermediario: #95959B;    /* borda de controle no tema escuro; emblema da parte 2 do ciclo */
  --cinza-texto: #55545B;            /* texto suave sobre fundo claro */

  /* Transparências da paleta */
  --linha-sobre-claro: #3230382E;            /* tinta a 18% */
  --linha-lista-sobre-claro: #32303822;      /* tinta a 13% */
  --linha-sobre-escuro: #F2F2F233;           /* quase branco a 20% */
  --linha-lista-sobre-escuro: #F2F2F226;     /* quase branco a 15% */
  --veu-cabecalho: rgba(243, 241, 234, .9);  /* areia a 90% (a do escritório fica no bloco dela, abaixo) */
  --veu-cabecalho-fim: rgba(243, 241, 234, 0);
  --vidro: rgba(255, 255, 255, .86);         /* o cartão de vidro sobre a foto dos sete fatores */

  /* Papéis (tema claro) */
  --fundo: var(--areia);
  --superficie: var(--creme);
  --texto: var(--tinta-quente);
  --texto-suave: var(--texto-quente);
  --texto-apagado: var(--texto-quente-3);   /* números grandes e traços (não é texto de leitura) */
  --linha: var(--linha-quente);
  --borda-controle: var(--linha-quente-forte);
  --simbolo-modulo-escuro: var(--grafite);
  --simbolo-modulo-claro: var(--cinza-claro);
  --acento: var(--texto-quente);     /* marcas repetidas: marcadores de lista, setas */
  --praca: var(--vermelho-mn);       /* os detalhes raros em vermelho */
  --botao-fundo: var(--tinta-quente);
  --botao-texto: var(--creme);
  --foco: var(--vermelho-mn);
  --fundo-foto: var(--creme-2);      /* o fundo de uma foto enquanto ela carrega */
  --numero-gestao: var(--verde);     /* os números das 3 etapas da gestão: o verde, com parcimônia */
  /* Os quatro eixos da interconexão documental (a cor do documento e o texto dentro dele), um tom da paleta cada,
     do mais escuro ao mais claro: urbanismo, verticalização, exploração da locação, gestão. Aqui, os do Núcleo; cada
     paleta tem os seus, no bloco dela. O centro leva o acento da paleta (--praca). */
  --eixo-1: #211F1B;  --eixo-texto-1: var(--branco);
  --eixo-2: #6D685E;  --eixo-texto-2: var(--branco);
  --eixo-3: #B3AA98;  --eixo-texto-3: #211F1B;
  --eixo-4: #DDD6C6;  --eixo-texto-4: #211F1B;
  --assinatura: var(--texto);       /* a tinta da assinatura: a cor do texto da paleta (#211F1B no Núcleo, #494949 no escritório) */

  /* Fontes (Google Fonts, carregadas no <head> do index.html; se mudarem, troque lá também).
     Títulos na Stack Sans Notch, a fonte da marca; texto corrido na Stack Sans Text, da mesma família,
     desenhada para parágrafo (a Notch, com os entalhes, cansa em texto longo). */
  /* Os títulos na Stack Sans Notch, com os cortes (o sócio gostou deles, 2026-10-27), no peso 400: os cortes do
     t, do a, do e e do j aparecem bem sem o título pesar. */
  --font-titulo: 'Stack Sans Notch', 'Stack Sans Text', 'Helvetica Neue', Arial, sans-serif;
  --font-texto: 'Stack Sans Text', 'Helvetica Neue', Arial, sans-serif;
  --peso-titulo: 400;
  --peso-texto: 300;

  /* Escala tipográfica. Em 2026-10-26 o corpo foi para 18 px (o sócio achou as letras pequenas); em
     2026-10-27 ele achou os títulos grandes demais e pediu letras menores e centralizadas, "mais chique":
     os títulos ficaram mais leves e menores. Nenhum texto de leitura fica abaixo de 16 px. */
  --texto-titulo-1: clamp(30px, 3.2vw, 44px);
  --texto-titulo-2: clamp(32px, 3.5vw, 48px);  /* um pouco maior a pedido do sócio (27/10, vídeo 3) */
  --texto-titulo-3: 22px;
  --texto-destaque: 20px;
  --texto-corpo: 18px;
  --texto-apoio: 16px;    /* listas, botões, menu, notas: o menor texto de leitura */
  --texto-legenda: 14px;  /* legendas, rótulos de controle, numeração */
  --texto-rotulo: 13px;   /* rótulos em caixa alta e espaçados */

  /* A seta do site: larga, encorpada e levemente curva, apontando para a direita. Usada como
     máscara (o preto do desenho é só o canal alfa; a cor vem de quem usa). Ver .seta em componentes.css. */
  --seta-forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath d='M5 21Q24 10 42 13.8' fill='none' stroke='%23000' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M40.3 3.4L59.5 16.5L43.7 25Z' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Espaçamentos */
  --espaco-1: 4px;  --espaco-2: 8px;  --espaco-3: 16px; --espaco-4: 24px;
  --espaco-5: 40px; --espaco-6: 64px; --espaco-7: 96px; --espaco-8: 140px;

  /* Layout */
  --largura-maxima: 1200px;
  --largura-texto: 62ch;
  --altura-controle: 48px;
  --raio: 20px;           /* cantos das fotos e dos cartões */
  --raio-botao: 999px;    /* botões em pílula */
  --filete-vermelho: 48px;
  --margem: clamp(20px, 5vw, 64px);
  --espaco-secao: clamp(var(--espaco-7), 10vw, var(--espaco-8));
  --altura-cabecalho: 121px;  /* no topo da página: a 404 com 551 px (105 px de altura); a 409, no bloco abaixo */
  /* Depois de rolar, o cabeçalho encolhe (js/cabecalho.js, classe compacto): a altura que vale no meio da
     página, para a rolagem até as âncoras e o que fica preso no alto (o anel do ciclo). Sem JavaScript, não encolhe. */
  --altura-cabecalho-compacto: 76px;  /* a 404 com 314 px (60 px de altura); a 409, no bloco abaixo */
  --altura-cabecalho-rolando: var(--altura-cabecalho);

  color-scheme: light;
}

/* ?assinatura=409: a 409 com 86 px no topo e a compacta dela com 81 px */
:root[data-assinatura="409"] { --altura-cabecalho: 102px; --altura-cabecalho-compacto: 97px; }
:root.js { --altura-cabecalho-rolando: var(--altura-cabecalho-compacto); }
/* No celular, o cabeçalho fixo: a 404 com 314 px (60 px de altura) e, encolhida, com 220 px (42 px); a 409 com 74 e 45 */
@media (max-width: 800px) {
  :root { --altura-cabecalho: 80px; --altura-cabecalho-compacto: 58px; }
  :root[data-assinatura="409"] { --altura-cabecalho: 94px; --altura-cabecalho-compacto: 61px; }
}

/* Tema escuro: só para blocos marcados com .tema-escuro. O site fica sempre claro, mesmo com o aparelho
   em modo escuro (pedido do Tiago em 2026-10-27: o site mais claro, como as referências do sócio). */
.tema-escuro {
  --fundo: var(--tinta);
  --superficie: var(--tinta-escura);
  --texto: var(--quase-branco);
  --texto-suave: var(--cinza-claro);
  --texto-apagado: var(--cinza-claro);
  --linha: var(--linha-sobre-escuro);
  --borda-controle: var(--cinza-intermediario);
  --simbolo-modulo-escuro: var(--cinza-claro);
  --simbolo-modulo-claro: var(--cinza-medio);
  --acento: var(--cinza-claro);
  --botao-fundo: var(--quase-branco);
  --botao-texto: var(--tinta);
  --logo-filtro: invert(1);
  --assinatura: var(--quase-branco);
}
/* Seções em tom branco */
.tom-branco { --fundo: var(--creme); --superficie: var(--creme-2); }

/* ==========================================================
   A PALETA DO ESCRITÓRIO, A DO SITE (decisão do Tiago, 28/10; só a cor muda, o resto é idêntico)
   O bloco acima (:root) é a base, com a paleta do design system do Núcleo Imobiliário, que só vale com
   ?cores=nucleo. O <html> já nasce com data-cores="escritorio" (e o script do <head> só o troca quando o
   endereço pede outra paleta), então valem as cores do manual de marca do Menezes Niebuhr (reference/socio-2026-10-27/manual-marca-mn-cores-e-aplicacao.jpg): o cinza
   claro #EEEEEE de fundo, o grafite #494949 no texto e nos traços, o branco e o vermelho #C8102C só de
   acento (o kit de marca antigo usava #E92B31). O texto suave sai do próprio grafite, mais claro, no
   limite que ainda passa no AA sobre o cinza claro (#666666: grafite 84% e branco 16%, 4,9:1).
   ========================================================== */
:root[data-cores="escritorio"] {
  --mn-cinza-claro: #EEEEEE;
  --mn-grafite: #494949;
  --mn-vermelho: #C8102C;
  --fundo: var(--mn-cinza-claro);
  --superficie: var(--branco);
  --texto: var(--mn-grafite);
  --texto-suave: #666666;            /* grafite 84% + branco 16% */
  --texto-apagado: #A4A4A4;          /* grafite 50% + branco 50%: números grandes e traços, não texto */
  --linha: rgba(73, 73, 73, .16);
  --borda-controle: rgba(73, 73, 73, .28);
  --acento: var(--mn-grafite);
  --praca: var(--mn-vermelho);
  --foco: var(--mn-vermelho);
  --botao-fundo: var(--mn-grafite);
  --botao-texto: var(--branco);
  --fundo-foto: var(--mn-cinza-claro);
  --numero-gestao: var(--mn-grafite);
  --veu-cabecalho: rgba(238, 238, 238, .9);
  --veu-cabecalho-fim: rgba(238, 238, 238, 0);
  /* os eixos da interconexão: os cinzas do escritório; o vermelho só no centro */
  --eixo-1: #4E4E54;  --eixo-texto-1: var(--branco);  --eixo-2: #6E6E74;  --eixo-texto-2: var(--branco);
  --eixo-3: #A3A3A9;  --eixo-texto-3: #323038;        --eixo-4: #C9C9CD;  --eixo-texto-4: #323038;
}
:root[data-cores="escritorio"] .tom-branco { --fundo: var(--branco); --superficie: var(--mn-cinza-claro); }

/* ==========================================================
   AS TRÊS PALETAS VERDE-CLARAS (2026-10-27, à noite), para o sócio escolher: "talvez podemos trabalhar com uma
   paleta de um verde clarinho, não um verde assim, floresta amazônica". Três ideias diferentes, pelo endereço
   (?cores=verde-1, verde-2, verde-3), com o mesmo layout. A assinatura segue a cor do texto (currentColor).
   ========================================================== */
/* verde-1, a sálvia: o fundo de todas as seções num verde-sálvia muito claro, o texto num grafite esverdeado,
   e o vermelho do escritório, como sempre, só de acento. */
:root[data-cores="verde-1"] {
  --fundo: #EDF1EA;  --superficie: #FBFCF9;
  --texto: #27302B;  --texto-suave: #55625A;  --texto-apagado: #8E998F;
  --linha: rgba(39, 48, 43, .14);  --borda-controle: rgba(39, 48, 43, .26);
  --acento: #55625A;  --praca: #C8102C;  --foco: #C8102C;
  --botao-fundo: #27302B;  --botao-texto: var(--branco);
  --fundo-foto: #E2E8DE;  --numero-gestao: #4A7457;
  --veu-cabecalho: rgba(237, 241, 234, .9);  --veu-cabecalho-fim: rgba(237, 241, 234, 0);
  --eixo-1: #2F4A3A;  --eixo-texto-1: var(--branco);  --eixo-2: #4A7457;  --eixo-texto-2: var(--branco);
  --eixo-3: #A3C2AA;  --eixo-texto-3: #27302B;        --eixo-4: #D2E3D5;  --eixo-texto-4: #27302B;
}
:root[data-cores="verde-1"] .tom-branco { --fundo: #F7F9F4; --superficie: #EDF1EA; }

/* verde-2, as faixas: o fundo quase branco e, em seções alternadas, faixas verde-claras de borda a borda (como o
   creme e o verde em faixas do Jardí, mas claro); o verde médio no lugar do vermelho, que brigaria com as faixas. */
:root[data-cores="verde-2"] {
  --fundo: #FBFCFA;  --superficie: var(--branco);
  --texto: #313734;  --texto-suave: #58625C;  --texto-apagado: #8F9A93;
  --linha: rgba(49, 55, 52, .13);  --borda-controle: rgba(49, 55, 52, .25);
  --acento: #58625C;  --praca: #3B7653;  --foco: #3B7653;
  --botao-fundo: #313734;  --botao-texto: var(--branco);
  --fundo-foto: #E2EEDF;  --numero-gestao: #3B7653;
  --veu-cabecalho: rgba(251, 252, 250, .9);  --veu-cabecalho-fim: rgba(251, 252, 250, 0);
  --eixo-1: #244A35;  --eixo-texto-1: var(--branco);  --eixo-2: #3B7653;  --eixo-texto-2: var(--branco);
  --eixo-3: #9CC9A9;  --eixo-texto-3: #313734;        --eixo-4: #D2E8D6;  --eixo-texto-4: #313734;
}
:root[data-cores="verde-2"] .tom-branco { --fundo: #E2EEDF; --superficie: #F2F7F0; }

/* verde-3, o acento: o fundo neutro, e o verde-claro no lugar de parte do cinza: os arcos do ciclo, os marcadores
   das listas e as setas; um verde médio nos detalhes que precisam de contraste (o número da etapa aberta, o foco, o
   quadradinho dos rótulos, os números da gestão). Sem vermelho: o vermelho e o verde lado a lado brigariam. */
:root[data-cores="verde-3"] {
  --fundo: #F4F5F2;  --superficie: var(--branco);
  --texto: #363A38;  --texto-suave: #5E6461;  --texto-apagado: #949A96;
  --linha: rgba(54, 58, 56, .13);  --borda-controle: rgba(54, 58, 56, .25);
  --acento: #6DB48A;  --praca: #2F7A4D;  --foco: #2F7A4D;
  --botao-fundo: #363A38;  --botao-texto: var(--branco);
  --fundo-foto: #E4F1E8;  --numero-gestao: #3E8A5C;
  --veu-cabecalho: rgba(244, 245, 242, .9);  --veu-cabecalho-fim: rgba(244, 245, 242, 0);
  --eixo-1: #245C3B;  --eixo-texto-1: var(--branco);  --eixo-2: #2F7A4D;  --eixo-texto-2: var(--branco);
  --eixo-3: #8FCBA4;  --eixo-texto-3: #363A38;        --eixo-4: #CFEAD8;  --eixo-texto-4: #363A38;
}
:root[data-cores="verde-3"] .tom-branco { --fundo: var(--branco); --superficie: #F4F5F2; }
:root[data-cores="verde-3"] #ciclo { --arco-apagado: #D3E8DA; --arco-sobre: #B4D9C1; }