/* =============================================================
   MARQUES — TOKENS VISUAIS COMPARTILHADOS
   versao: 1.2.0
   estado: PARA REVISAO VISUAL — nao homologado
   origem: blueprint.bryanjohnson.com (inspecao de estilos computados
           em 22/09/2026, 1440px e 390px)
   guia:   docs/VISUAL_BLUEPRINT.md

   ARQUIVO CANONICO. Nao editar as copias dentro dos projetos.
   Para propagar:  node scripts/sync-tokens.js
   Cada projeto recebe uma COPIA local. Nenhum site carrega o CSS
   de outro — nao existe dependencia de rede entre eles.

   Marcacao de procedencia em cada token:
     [V] valor verificado no codigo da referencia
     [O] caracteristica observada visualmente na referencia
     [A] adaptacao nossa, com motivo declarado
   ============================================================= */

/* ---------- tipografia local ----------
   DM Sans e Montserrat sao as fontes realmente carregadas pela
   referencia [V] e ambas usam SIL Open Font License 1.1, que
   permite uso comercial e hospedagem propria.

   A referencia tambem carrega GTStandard-M (Grilli Type, proprietaria)
   e Font Awesome 5 Pro. Nenhuma das duas e usada aqui: licenca
   incompativel com redistribuicao. Ver assets/fonts/LEIA-ME.md.

   Os arquivos ficam em assets/fonts/, relativo a ESTE arquivo.
   Enquanto nao existirem, o navegador cai na pilha de sistema e a
   pagina continua correta — so perde o desenho exato da fonte. */

@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* O 700 entra por um uso so: a letra dos botoes de acao, que precisa ter peso
   de verdade e nao bold sintetico. Os titulos continuam em 400 e 500, como na
   referencia. Sao 14 KB. */
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---------- superficies ----------
     A referencia e uma interface CLARA. O escuro aparece so como
     faixa de destaque, nunca como base. */
  --osso: #f6f4ec;          /* [V] rgb(246,244,236) — fundo da pagina */
  --osso-2: #f1ecde;        /* [V] rgb(241,236,222) — faixa alternada */
  --papel: #ffffff;         /* [V] cartao elevado */
  --pedra: #e1e3e1;         /* [V] rgb(225,227,225) — painel neutro */
  --pedra-2: #d7dad9;       /* [A] segundo nivel de painel, derivado */

  /* ---------- tinta ---------- */
  --tinta: #111c35;         /* [V] rgb(17,28,53) — texto e acao primaria */
  --tinta-2: #1d2c4e;       /* [V] rgb(29,44,78) — hover e faixa escura */
  --tinta-mudo: #5b6880;    /* [A] opaco no lugar de rgba(17,28,53,.45):
                                   45% sobre osso da 3,4:1 e reprova AA.
                                   Este valor da 5,0:1. */
  --fio: rgba(17, 28, 53, 0.13);      /* [A] fio quando inevitavel */
  --fio-forte: rgba(17, 28, 53, 0.22);

  /* ---------- sobre fundo escuro ---------- */
  --osso-sobre-escuro: #f6f4ec;   /* [V] 13,8:1 sobre --tinta */
  --mudo-sobre-escuro: #a9b4c7;   /* [A] 7,2:1 sobre --tinta */
  --fio-sobre-escuro: rgba(246, 244, 236, 0.18);

  /* ---------- acentos ---------- */
  --azul: #4a6aab;          /* [V] rgb(74,106,171) — acento frio */
  --ouro: #7d611f;          /* [A] ouro da marca rebaixado para ler sobre
                                   osso: 5,4:1. O #c6a05c antigo dava 2,3:1
                                   e reprovava como texto. */
  --ouro-luz: #c6a05c;      /* [A] so sobre fundo escuro — 6,2:1 sobre tinta */
  --positivo: #2f6f52;      /* [A] */
  --alerta: #a4443c;        /* [A] */
  --alerta-luz: #e8877d;    /* [A] so sobre fundo escuro, mesma prateleira do
                                   --ouro-luz: 6,6:1 sobre tinta. O --alerta
                                   cheio da 2,80:1 ali e reprova ate como
                                   texto grande. */

  /* ---------- WhatsApp ----------
     Acento de marca externa, na mesma prateleira de --positivo e --alerta:
     todo site da casa fala com o cliente por WhatsApp, e o verde precisa
     sair igual nos dois. Sao dois porque um so nao serve nos dois fundos.

     --zap-luz e o verde de marca (#25D366). Sobre fundo escuro ele da
     8,0:1 e brilha. Sobre o fundo osso ele da 1,75:1 e reprova em
     WCAG 1.4.11, que pede 3:1 para o contorno de um componente — um botao
     que o olho nao acha nao e um botao.
     --zap e o mesmo verde fechado ate 4,66:1 sobre osso, texto branco a
     5,27:1. Continua verde de WhatsApp a olho nu. */
  --zap: #0f7c3f;           /* [A] superficie de botao sobre fundo claro */
  --zap-luz: #25d366;       /* [A] glifo sobre fundo escuro */
  --zap-fundo: #0c6533;     /* [A] estado pressionado */

  /* O glifo do WhatsApp, vetor embutido, usado como mascara CSS: assume a
     cor de quem o aplica, e nao custa um arquivo a mais no pacote. */
  --glifo-whats: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.347-.347.52-.52.174-.174.232-.298.347-.497.115-.198.057-.372-.018-.52-.075-.149-.669-1.612-.916-2.207-.244-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");

  /* ---------- tipografia ---------- */
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Arial, sans-serif;
  --titulo: "Montserrat", "DM Sans", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Arial, sans-serif;

  /* Escala. A referencia usa 45,6px/28px no h1 e 30px/22px no h2 [V].
     O corpo dela e 14px/12,6px [V]; aqui sobe para 18px/17px [A].
     Dois motivos: o nosso texto carrega condicao contratual em portugues,
     nao nome de produto; e o publico do consorcio em Canarana inclui gente
     com presbiopia que nao vai apertar os olhos para ler prazo e multa.
     Nenhum texto da pagina fica abaixo de 12,5px. */
  --t-titulo-1: clamp(33px, 4.7vw, 58px);
  --t-titulo-2: clamp(28px, 2.9vw, 42px);
  --t-titulo-3: 21px;
  --t-corpo: 18px;
  --t-corpo-2: 16px;
  --t-micro: 14px;
  --t-etiqueta: 12.5px;
  /* Piso absoluto. Nenhuma regra da folha pode declarar tamanho menor que
     este — o portao verifica. */
  --t-minimo: 12.5px;

  --p-leve: 400;            /* [V] titulos da referencia em 400 */
  --p-medio: 500;           /* [V] peso maximo dos titulos dela */
  --p-forte: 700;           /* [A] reservado a numero e botao */

  --lh-titulo: 1.1;         /* [V] ~1,15 a 1,2 */
  --lh-corpo: 1.6;          /* [A] 1,375 da referencia e curto para PT-BR */
  --ls-titulo: -0.018em;    /* [A] a referencia usa 0; ver guia */
  --ls-etiqueta: 0.13em;    /* [V] maiuscula miuda espacada */

  /* ---------- espacamento ----------
     Escala 8. O 72px de secao e verificado na referencia [V]. */
  --e-1: 8px;
  --e-2: 16px;
  --e-3: 24px;
  --e-4: 32px;
  --e-5: 48px;
  --e-6: 72px;
  --e-7: 96px;

  /* ---------- forma ---------- */
  --raio: 10px;             /* [V] raio dominante dos cartoes */
  --raio-g: 12px;           /* [V] segundo raio */
  --raio-campo: 8px;        /* [A] */
  --raio-pilula: 100px;     /* [V] todos os botoes sao pilula */

  /* ---------- medidas ---------- */
  --largura: 1480px;        /* [V] max-width do container */
  --largura-texto: 780px;   /* [V] coluna de leitura */
  --gutter: 40px;           /* [V] 40px desktop */
  --gutter-mobile: 20px;    /* [V] 20px mobile */

  /* ---------- interacao ---------- */
  --transicao: 180ms cubic-bezier(0.32, 0.72, 0.35, 1);
  --sombra: 0 1px 2px rgba(17, 28, 53, 0.04), 0 8px 24px rgba(17, 28, 53, 0.06);
  --sombra-alta: 0 2px 4px rgba(17, 28, 53, 0.05), 0 16px 40px rgba(17, 28, 53, 0.1);
  --foco: 2px solid var(--tinta);
  --foco-recuo: 3px;
}

@media (max-width: 760px) {
  :root {
    --t-corpo: 17px;
    --gutter: var(--gutter-mobile);
    --e-6: 56px;
    --e-7: 64px;
  }
}