:root {
    /* Paleta (trocar pelas cores extraídas da logomarca do cliente):
       cor primária (marca, faixas escuras) + cor de destaque (botões e CTAs; texto branco por cima
       precisa passar em contraste) + neutros. Uma cor metálica/secundária serve só para detalhes,
       divisores e badges — nunca como fundo de botão com texto por cima. */
    --cor-primaria: #23272D;
    --cor-primaria-escura: #14171A;
    --cor-primaria-clara: #3B4148;
    --cor-destaque: #4D5761;
    --cor-destaque-escura: #373F47;
    --cor-destaque-clara: #B4BCC4;
    /* Botões primários: azul da logomarca da Klinox. */
    --cor-botao: #0A5497;
    --cor-botao-escura: #073F73;
    /* Links do menu superior: um tom mais escuro que o botão "Fale Conosco". */
    --cor-menu: #052E55;
    --cor-menu-hover: #031E3A;
    --cor-metal: #8A929B;
    --cor-metal-clara: #D4D8DC;
    --cor-texto: #171B20;
    --cor-texto-claro: #2E353D;
    --cor-fundo: #DDE0E3;
    --cor-fundo-alt: #CED2D6;
    --cor-borda: #B4B9BF;
    --cor-sucesso: #1E7E42;
    --cor-erro: #C0392B;
    --cor-branco: #FFFFFF;
    --cor-texto-sobre-ambar: #FFFFFF;

    /* Montserrat (geométrica, forte) nos títulos — eco da tipografia da logo — e Inter no
       corpo do texto, para boa leitura em blocos longos de conteúdo técnico. */
    --fonte-base: 'Inter', Arial, sans-serif;
    --fonte-titulo: 'Montserrat', Helvetica, Arial, sans-serif;

    --raio-padrao: 8px;
    --raio-grande: 16px;
    --raio-pill: 999px;
    --sombra-card: 0 2px 10px rgba(20, 23, 26, 0.08);
    --sombra-elevada: 0 8px 24px rgba(20, 23, 26, 0.18);

    --largura-maxima: 1200px;
    --largura-maxima-estreita: 760px;

    --espaco-secao: clamp(48px, 6vw, 96px);
}