/* A identidade da Aponte (a empresa da Bela Fernandes), tirada da logo que ela mandou em 11/11/2026.
   As três cores da logo foram medidas na imagem dela (JPEG antigo): são aproximações até ela mandar o
   arquivo original. As fontes são as mais próximas que achamos entre as gratuitas (ver ../identidade/LEIA-ME.md).
   Este arquivo é a origem. As cópias em public/aponte/ da demonstração e do aplicativo saem de
   `python distribuir.py`, desta pasta: edite aqui, e não nas cópias. */
:root {
  /* As cores da logo. */
  --aponte-tinta: #191f1d;          /* o preto das letras "A" e "ponte" */
  --aponte-azul: #1a88bf;           /* o arco que liga o "A" ao "p" */
  --aponte-verde-azulado: #49909c;  /* a assinatura "desenvolvimento organizacional" */

  /* Tons tirados dessas três, para a tela. */
  --aponte-azul-forte: #146d9c;     /* texto e contorno em azul sobre fundo claro (contraste 5,7 para 1 com o branco) */
  --aponte-azul-fundo: #0e5578;     /* a sombra do botão azul */
  --aponte-azul-400: #3d9fd0;
  --aponte-azul-100: #d3e9f5;
  --aponte-azul-050: #e9f4fa;
  --aponte-verde-050: #e6f1f3;

  --fundo: #f3f8fb;                 /* o fundo das páginas: branco puxado para o azul */
  --fundo-fraco: #e2ecf2;           /* trilhos, barras vazias */
  --cartao: #ffffff;
  --texto: var(--aponte-tinta);
  --texto-medio: #3c4a51;
  --texto-fraco: #5d6c74;
  --texto-apagado: #9fb0b9;
  --borda: rgba(25, 31, 29, 0.1);
  --borda-forte: rgba(25, 31, 29, 0.2);
  --sombra: 0 14px 34px rgba(20, 60, 85, 0.1);
  --ok: #2f8f5b;
  --erro: #b3261e;
  --destaque: #c9891f;              /* a lâmpada dos insights: âmbar, a única cor fora da logo */

  --fonte-titulo: 'Arvo', Rockwell, 'Roboto Slab', Georgia, serif;
  --fonte-texto: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--fundo);
  color: var(--texto);
  font: 400 17px/1.5 var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, p, ol, ul, li, figure, fieldset, legend { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--aponte-azul); color: #fff; }

/* A marca. O nome "Aponte" é o desenho tirado da imagem dela (aponte-nome.svg). A assinatura
   "desenvolvimento organizacional" é texto, na cor e no lugar em que está na logo (à direita da perna do "p"),
   e só aparece na marca grande: abaixo de uns 100 px de altura ela fica pequena demais para ler.
   <span class="marca marca--grande"><img src="/aponte/aponte-nome.svg" alt="Aponte"><span class="marca__assinatura">desenvolvimento organizacional</span></span> */
.marca { --altura: 44px; position: relative; display: inline-block; height: var(--altura); line-height: 0; text-decoration: none; }
.marca img { display: block; height: 100%; width: auto; }
/* O lugar e o tamanho da assinatura foram medidos na logo dela (saida/recorte-da-imagem-original.png): ela começa
   a 37,2% da largura do nome, termina antes da ponta do "e" e tem 9,2% da altura do nome. */
.marca__assinatura { display: none; position: absolute; left: 37.2%; bottom: 2.3%; font: 700 calc(var(--altura) * 0.092)/1 var(--fonte-titulo); letter-spacing: 0; color: var(--aponte-verde-azulado); white-space: nowrap; }
.marca--pequena { --altura: 34px; }
.marca--grande { --altura: 112px; }
.marca--grande .marca__assinatura { display: block; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--aponte-azul-050); color: var(--aponte-azul-forte);
  font: 700 13px/1 var(--fonte-texto); letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
}
.botao {
  appearance: none; border: 0; cursor: pointer;
  padding: 14px 22px; border-radius: 14px;
  background: var(--aponte-azul-forte); color: #fff;
  font: 600 17px/1 var(--fonte-texto);
  transition: background 160ms ease, transform 160ms ease;
}
.botao:hover { background: var(--aponte-azul-fundo); }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: 0.55; cursor: default; }
.botao--contorno {
  background: transparent; color: var(--texto-medio);
  border: 1.5px solid var(--borda-forte);
}
.botao--contorno:hover { background: var(--fundo-fraco); }
.botao--pequeno { padding: 9px 14px; font-size: 14px; border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}