/* ==========================================
   ACHEI ÁGUA & GÁS — BASE

   As cores saem da logo, e não de um gosto: o azul-marinho do fundo
   dela, o azul claro do "Água" e o âmbar do "Gás".

   O marinho manda no cabeçalho, e é por isso que a logo funciona lá —
   o "Achei" dela é branco, e some em qualquer fundo claro. Do
   cabeçalho para baixo é claro: linha azulada, fundo de cartão branco,
   e o azul claro nos detalhes. Um site de busca se lê melhor claro, e
   o marinho seria peso demais numa tela que a pessoa varre com pressa.

   Quem usa isto está com o botijão vazio na cozinha, de noite, no
   celular, com pressa. Então: texto grande, botão que o dedo acerta, e
   o preço legível de longe.
   ========================================== */

*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, p, ul, ol, li, figure, blockquote {
    margin: 0;
    padding: 0;
}

ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; color: inherit; }


:root {
    /* O marinho do fundo da logo. Manda no cabeçalho e no rodapé. */
    --marinho: #0b2d52;
    --marinho-fundo: #08223f;
    --marinho-clara: #16456f;

    /* O azul do "Água", tirado a dedo do arquivo da logo: é o tom mais
       presente nas letras dela. Manda nos detalhes, nas bordas, nos
       links e no que estiver escolhido. */
    --agua: #0093fc;
    --agua-clara: #e6f3ff;

    /* O mesmo azul, escurecido, e só para onde houver TEXTO BRANCO em
       cima. Branco sobre #0093fc dá 3,2 de contraste, abaixo do mínimo
       legível — e esta é uma tela que a pessoa lê de noite, com pressa,
       na cozinha. O escuro passa de 4,9. */
    --agua-escura: #0b72c9;

    /* O âmbar do "Gás". Aparece só onde o assunto é gás, e nunca
       disputa com o azul. */
    --gas: #ef8a17;
    --gas-clara: #fdf2e2;

    --tinta: #10243a;
    --tinta-fraca: #5b7186;
    /* A linha puxa para o azul, e não para o cinza. É o que costura o
       claro de baixo ao marinho de cima. */
    --linha: #dbe7f3;
    --papel: #ffffff;
    --fundo: #f1f6fc;

    --verde: #157a43;
    --verde-claro: #e7f5ec;
    --vermelho: #b42318;
    --vermelho-claro: #fdeceb;

    --fonte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --titulo: "Sora", var(--fonte);

    --raio: 14px;
    --raio-grande: 20px;
    --sombra: 0 1px 2px rgba(21, 32, 43, .06), 0 8px 24px rgba(21, 32, 43, .06);
}


body {
    background: var(--fundo);
    color: var(--tinta);
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.limite {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 18px;
}

.apenas-leitor-de-tela {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* ==========================================
   BOTÕES
========================================== */

.botao,
.botao-vazio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    /* 52px de altura. Abaixo disso o polegar erra, e quem está com o
       botijão vazio não tem paciência para errar duas vezes. */
    min-height: 52px;
    padding: 12px 20px;
    border: none;
    border-radius: var(--raio);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: .18s;
}

.botao {
    background: var(--agua-escura);
    color: #fff;
}

.botao:hover:not(:disabled) { background: #0a63af; }
.botao:disabled { opacity: .5; cursor: default; }

.botao-vazio {
    background: var(--papel);
    color: var(--tinta);
    border: 1.5px solid var(--linha);
}

.botao-vazio:hover { border-color: var(--agua); color: var(--agua); }

.botao-zap {
    background: var(--verde);
    color: #fff;
}

.botao-zap:hover { background: #106336; }


/* ==========================================
   CAMPOS
========================================== */

.campo { margin-bottom: 14px; }

.campo label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.campo input,
.campo select {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    background: var(--papel);
    border: 1.5px solid var(--linha);
    border-radius: var(--raio);
    outline: none;
}

.campo input:focus,
.campo select:focus { border-color: var(--agua); }

.campo .dica {
    margin-top: 6px;
    font-size: 13px;
    color: var(--tinta-fraca);
}


/* ==========================================
   RECADOS
========================================== */

.recado {
    padding: 12px 14px;
    border-radius: var(--raio);
    margin-bottom: 14px;
    font-size: 14.5px;
    font-weight: 500;
    background: var(--agua-clara);
    border: 1px solid #bfdffd;
    color: var(--marinho);
}

.recado.erro {
    background: var(--vermelho-claro);
    color: var(--vermelho);
}