:root {
    /* Paleta extraída do site atual do cliente (www.jbaguapotavel.com.br, Google Sites), a
       pedido do usuário ("use as mesmas cores, fotos, fontes, logos"). A cor de marca é o
       teal/azul-petróleo #45818E — usada nos títulos e no botão "FALE CONOSCO" do site atual
       (tema "Teal" do Google Sites). Como #45818E sobre branco fica em ~4,4:1 (abaixo do
       mínimo AA de 4,5:1 para texto normal), definimos uma variante mais escura
       (--cor-primaria-escura #33626C) para os fundos de botão e para os títulos, mantendo o
       #45818E original nos links e detalhes — mesmo tipo de ajuste feito nos projetos-irmãos
       (Electro, Assistek). O azul-petróleo escuro das seções de destaque (--cor-fundo-escuro)
       vem do fundo da placa 3D do logo do cliente.
       Escala de teal: 50 #eef4f5 · 100 #d6e5e7 · 300 #9cc3ca · 500 #45818E (marca) ·
       600 #3a6f7a · 700 #33626C (escura) · 800 #274b53 · 900 #14323C. */
    --cor-primaria: #45818E;
    --cor-primaria-escura: #33626C;
    --cor-primaria-clara: #6BA5B0;
    --cor-destaque: #45818E;
    --cor-destaque-escura: #2C5560;
    --cor-texto: #1f2d33;
    --cor-texto-claro: #55666d;
    --cor-fundo: #ffffff;
    --cor-fundo-alt: #f2f7f8;
    --cor-fundo-escuro: #14323C;
    --cor-borda: #dbe6e8;
    --cor-sucesso: #1e7e42;
    --cor-erro: #c0392b;
    --cor-branco: #ffffff;

    /* Fonte idêntica à do site atual (tema Google Sites "Merriweather"), carregada em
       head-meta.php via Google Fonts. Merriweather foi desenhada para leitura em tela, então
       serve tanto para títulos quanto para corpo de texto. */
    --fonte-base: 'Merriweather', Georgia, 'Times New Roman', serif;
    --fonte-titulo: 'Merriweather', Georgia, 'Times New Roman', serif;

    --raio-padrao: 8px;
    --raio-grande: 16px;
    --sombra-card: 0 2px 10px rgba(0, 0, 0, 0.08);
    --sombra-elevada: 0 8px 24px rgba(20, 50, 60, 0.18);

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

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