/* Tema de cores — IMPÉRIO DO GÁS E ÁGUA (paleta oficial da marca, passada pelo cliente:
   Azul #1C2747 / Vermelho #BF291B / Azul #012665 / Cinza-azulado #DEE2EB).

   Mapeamento: a marca deu 2 tons de azul quase idênticos — confirmado por amostragem de pixel
   nas fotos reais da fachada e da logo que são propósitos diferentes, não uma escolha aleatória:
   #012665 é o azul mais vivo do cilindro na logo (vira --color-primary: botões, links, topbar),
   #1C2747 é o azul quase-preto do letreiro da fachada (vira --color-footer: só o rodapé, mais
   escuro e sóbrio). #BF291B é o vermelho da chama/wordmark "Gás" (--color-secondary). #DEE2EB é
   um cinza-azulado bem claro, não um tom vibrante — funciona como tom neutro estrutural (tint de
   seção, fundo de ícone), não como uma 4ª cor de destaque. */
:root {
    --color-primary: #012665;
    --color-primary-50: #EAEDF2;
    --color-primary-100: #D7DDE7;
    --color-primary-200: #A8B4CA;
    --color-primary-300: #778AAC;
    --color-primary-400: #3E5A8A;
    --color-primary-500: #012665;
    --color-primary-600: #012056;
    --color-primary-700: #011A44;
    --color-primary-800: #011436;
    --color-primary-900: #000D24;
    --color-primary-rgb: 1, 38, 101;

    --color-secondary: #BF291B;
    --color-secondary-50: #FAEDEC;
    --color-secondary-100: #F5DDDB;
    --color-secondary-200: #E9B5B1;
    --color-secondary-300: #DD8C85;
    --color-secondary-400: #CE5C52;
    --color-secondary-500: #BF291B;
    --color-secondary-600: #A32317;
    --color-secondary-700: #811C12;
    --color-secondary-800: #66160E;
    --color-secondary-900: #430E0A;
    --color-secondary-rgb: 191, 41, 27;

    --color-tertiary: #DEE2EB;
    --color-tertiary-50: #FCFDFD;
    --color-tertiary-100: #FAFAFC;
    --color-tertiary-200: #F4F5F8;
    --color-tertiary-300: #EDEFF4;
    --color-tertiary-400: #E6E9F0;
    --color-tertiary-500: #DEE2EB;
    --color-tertiary-600: #BEC1C9;
    --color-tertiary-700: #96999F;
    --color-tertiary-800: #76787D;
    --color-tertiary-900: #4E5053;
    --color-tertiary-rgb: 222, 226, 235;

    --gradient-primary: linear-gradient(to right, #012665, #BF291B);

    /* Azul quase-preto do letreiro real da fachada — usado só no footer, pra dar mais
       profundidade que o azul mais vivo do primary (mesma lógica já usada no Gás São Pedro,
       mas aqui é uma cor oficial da marca, não extraída de foto). */
    --color-footer: #1C2747;
    --color-footer-rgb: 28, 39, 71;
}

/* --color-tertiary é claro demais (quase branco) pra funcionar como ponta de gradiente de
   texto sobre fundo branco — o texto ficaria ilegível no início do degradê. Troca pontual só
   nesta marca: degradê primary→secondary, os dois tons saturados da paleta oficial.
   Especificidade elevada (:root + classe) de propósito: css/style.css carrega depois deste
   arquivo e define a mesma classe com a mesma especificidade, então essa regra precisava
   "ganhar" a cascata sem recorrer a !important. */
:root .lp-text-gradient-brand {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* A seção do hero (90vh, bem larga) tem proporção bem diferente da foto (1600x900, ~16:9)
   deitada. Com background-size:cover, o navegador amplia a foto pra cobrir a largura toda da
   seção (a escala é sempre definida pela largura aqui, já que a seção é proporcionalmente mais
   larga que a foto) e essa ampliação "come" uma fatia de baixo da imagem — o cliente achou a
   foto "muito próxima"/cortada. Testei background-size:contain (mostra a foto 100% sem corte),
   mas o cliente rejeitou — não quer barra de cor nenhuma nas laterais, quer a foto "vazada" (=
   cobrindo o hero inteiro, sem nenhum respiro de cor sólida). Voltei pra cover (sem barras) e
   aumentei a altura mínima da seção: como a escala por largura é fixa, uma seção mais ALTA
   mostra uma fatia MAIOR da imagem já ampliada (o oposto do que eu tinha tentado antes, que foi
   diminuir a altura por engano). 115vh chega bem perto do ponto de corte zero pra telas
   desktop largas — acima disso o hero ocupa mais que uma tela cheia, mas é o preço de cobrir a
   seção inteira com a foto sem cortar a fachada. */
:root .lp-hero {
    min-height: 115vh;
}
:root .lp-hero-bg {
    background-position: center center;
}