/* Âncora Soluções Financeiras · tokens
   Paleta medida por pixel no arquivo da identidade entregue em
   11/09/2026 (identidade/material-cliente-2026-09-11/logo-ancora-v2.png).
   Nenhum valor aqui foi escolhido: cada um é a cor dominante de uma
   parte da marca, lida direto do arquivo.

   A superfície principal é o papel, e o carvão é pontuação. A razão é
   de leitura: o público desta página tem presbiopia e lê no celular, e
   texto escuro sobre claro é a condição em que a letra mantém peso.   */

:root{
  /* Carvão. O fundo da marca. Medido: mediana #101010, com as bordas
     um grau mais quentes. É neutro-quente, e não preto puro.          */
  --carvao:         #121211;   /* faixa escura principal */
  --carvao-fundo:   #0A0A09;   /* topo, contato e rodapé */
  --carvao-alto:    #1B1B19;   /* segundo plano dentro do escuro */
  --carvao-linha:   #32322E;   /* fio sobre carvão */

  /* Azul da âncora. Medido no corpo do símbolo: #043CAC é a cor
     dominante, #0F2E81 é a sombra e #0B41AE é a face iluminada.
     Ele mede 8,63:1 sobre papel e 1,92:1 sobre carvão, e é essa
     assimetria que define onde ele pode aparecer.                     */
  --azul:           #043CAC;
  --azul-escuro:    #0F2E81;
  --azul-luz:       #0B41AE;

  /* Papel, a superfície de leitura. */
  --papel:          #F7F6F3;
  --papel-fundo:    #EDEBE6;
  --papel-linha:    #DEDAD3;

  /* Ouro. Rampa medida no anel e na onda, da sombra ao brilho. */
  --ouro-sombra:    #885B19;   /* só em degradê */
  --ouro-medio:     #BE790E;   /* rótulo sobre carvão, 5,35:1 */
  --ouro:           #DCA225;   /* ícone e rótulo sobre carvão, 8,37:1 */
  --ouro-claro:     #E8D38E;   /* texto sobre carvão, 12,80:1 */
  --ouro-brilho:    #F7E19F;   /* só em degradê */
  --metal: linear-gradient(90deg, var(--ouro-sombra) 0%, var(--ouro-brilho) 48%, var(--ouro) 100%);

  /* Verde do WhatsApp. Não é cor da Âncora e não entra em mais nada: é a
     cor de uma marca de terceiro, usada no único controle que existe
     para ser reconhecido antes de ser lido. O anel mais escuro existe
     porque o verde puro mede 1,84:1 contra o papel e o contorno do
     controle precisa de 3:1.                                          */
  --zap:       #25D366;
  --zap-fio:   #128C7E;
  --zap-toque: #1FBE5B;

  /* Tinta */
  --branco:         #FFFFFF;
  --tinta:          #141412;   /* corpo sobre papel, 17,2:1 */
  --tinta-media:    #4A4842;   /* apoio e descrição sobre papel, 8,5:1 */
  --tinta-fraca:    #64625B;   /* legenda sobre papel, 5,7:1 */
  --texto:          #DEDCD6;   /* corpo sobre carvão, 13,9:1 */
  --texto-fraco:    #A6A49C;   /* legenda sobre carvão, 7,6:1 */

  /* Tipografia. Serifa de texto, não de display: a página quer ser lida
     como documento que se confere, e não como anúncio. A Source Serif
     tem contraste moderado, então o título não afina quando cai sobre
     a faixa de carvão, que é onde a serifa fina desaparece.           */
  --fonte-titulo: "Source Serif", Georgia, "Times New Roman", serif;
  --fonte-texto:  "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Sete degraus, um por papel. A versão anterior fazia a linha de apoio
     e o título de item dividirem 1,25rem, e os dois fazem trabalhos
     diferentes. Agora a distância entre papéis vizinhos nunca é só de cor. */
  --t-xs:   0.8125rem;   /* rótulo em caixa alta */
  --t-sm:   0.9375rem;   /* metadado: origem, aviso, nota, rodapé */
  --t-desc: 1rem;        /* descrição de item dentro de grelha */
  --t-base: 1.0625rem;   /* texto corrido. 17px porque o público tem presbiopia */
  --t-md:   1.25rem;     /* título de item, citação, nome de banco */
  --t-lede: 1.375rem;    /* linha de apoio da seção e o apoio da abertura */
  --t-lg:   1.5rem;      /* subtítulo de lista, nome de pessoa */
  --t-xl:   2.125rem;    /* título de seção */
  --t-2xl:  2.375rem;    /* título da abertura, celular */
  --t-3xl:  3.25rem;     /* título da abertura, tela larga */

  /* Entreletra por corpo, e não um valor só para tudo: serifa aperta
     quando cresce e precisa abrir quando encolhe.                    */
  --tr-display:  -0.022em;
  --tr-headline: -0.016em;
  --tr-title:    -0.006em;

  --alt-display:  1.06;
  --alt-apertada: 1.14;
  --alt-media:    1.35;
  --alt-normal:   1.6;

  /* Espaço em escala de 8, com um meio-passo de 4. */
  --e-h: 4px;
  --e-1: 8px;  --e-2: 16px; --e-3: 24px; --e-4: 32px;
  --e-5: 40px; --e-6: 48px; --e-8: 64px; --e-10: 80px; --e-12: 96px; --e-16: 128px;

  /* Forma. O documento é reto. O único círculo da página é o selo, que
     é a marca, e o marcador de ícone que repete o selo em miniatura.  */
  --raio:       3px;
  --raio-selo:  50%;
  --fio:        1px;
  --medida:     68ch;
  --largura:    1200px;
  --desvio-ancora: 96px;

  --transicao: 200ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* A tinta do texto de apoio. Cada superfície redefine este valor, e
     nenhuma regra de componente precisa saber em que fundo ela caiu.
     É o que impede a disputa de especificidade entre a regra do
     componente e a regra da superfície.                              */
  --apoio: var(--tinta-media);
  --tinta-forte: var(--tinta);

  /* A página é clara por decisão de leitura, não por omissão. Declarar
     isso faz o navegador pintar barra de rolagem e superfície de carga
     no tom certo mesmo com o sistema em modo escuro.                 */
  color-scheme: light;
}

.sobre-carvao{ --apoio: var(--texto); --tinta-forte: var(--branco); }

/* Movimento reduzido é sobre gatilho vestibular, não sobre retorno de
   estado. Zerar toda transição apaga junto a resposta de cor no hover e
   no foco, que é informação. As duas animações de quadro-chave já vivem
   atrás de `no-preference` e somem por inteiro.                       */
@media (prefers-reduced-motion: reduce){ :root{ --transicao: 120ms linear; } }

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: var(--t-base);
  line-height: var(--alt-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Rede de segurança para quem amplia muito a fonte do sistema:
     palavra longa quebra em vez de atravessar a borda da tela.      */
  overflow-wrap: break-word;
}

/* A Source Serif carrega o eixo óptico de 8 a 60, que é a diferença
   entre um desenho de display e um de legenda dentro da mesma família.
   Com `auto` o navegador escolhe o corte pelo corpo: o título da
   abertura ganha o contraste alto do tamanho grande, e o nome de banco
   a 1,25rem ganha o traço mais firme do tamanho pequeno. É a hierarquia
   que a própria letra sabe fazer, e que estava desligada.            */
h1,h2,h3,.citacao,.cartao-lema,.cartao-nome,.marca-nome,
.bancos li,.pessoa-nome,.rodape .assinatura{
  font-optical-sizing: auto;
}

h1,h2,h3{
  font-family: var(--fonte-titulo);
  font-weight: 400;
  color: var(--tinta);
  margin: 0 0 var(--e-3);
  text-wrap: balance;
}
h1{ font-size: var(--t-2xl); line-height: var(--alt-display);
    letter-spacing: var(--tr-display); }
h2{ font-size: var(--t-xl);  line-height: var(--alt-apertada);
    letter-spacing: var(--tr-headline); }
h3{ font-size: var(--t-md);  line-height: var(--alt-media);
    letter-spacing: var(--tr-title); }

p{ margin: 0; max-width: var(--medida); }
a{ color: inherit; }
img{ max-width: 100%; display: block; }
/* Ênfase dentro de um parágrafo de apoio precisa subir de tinta, e não
   só de peso: negrito na mesma cor do texto ao redor quase não aparece. */
strong{ font-weight: 600; color: var(--tinta-forte); }

/* A segunda linha do título. Azul da âncora sobre papel, ouro sobre
   carvão. A troca não é decorativa: o azul mede 1,92:1 no escuro e o
   ouro mede 2,57:1 no claro. Cada cor só existe onde ela se lê.      */
em{ font-style: normal; color: var(--azul); }
.sobre-carvao em{ color: var(--ouro-claro); }

:focus-visible{
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: var(--raio);
}
.sobre-carvao :focus-visible{ outline-color: var(--ouro); }

::selection{ background: var(--ouro-claro); color: var(--carvao-fundo); }
html{ scrollbar-color: var(--papel-linha) var(--papel); }

/* Sombra não existe neste projeto. O documento é plano: separação se
   faz com fio, com tom de fundo e com espaço, nunca com caixa
   flutuando.                                                         */