/* ===========================================================================
   ADICON — CSS GLOBAL
   ---------------------------------------------------------------------------
   O que vale em toda página: fontes, tokens, reset, tipografia, container,
   cabeçalho, rodapé, botões, formulário, aviso de cookies e voltar ao topo.
   O que é de uma página só mora em `home.css` / `institucional.css`.

   TODO VALOR AQUI FOI MEDIDO NO SITE NO AR (www.adicon-imoveis.com.br) com o
   Chrome sem janela, em 1440, 1200, 992, 768, 480 e 390 — não é aproximação de
   olho. Quando um número parecer estranho (`30.63%`, `43.33%`, `24.5px`,
   `21.4286px`), é porque é o número da referência: o tema Canvas do site no ar
   calcula assim, e mudar para o "redondo" move o bloco na tela.

   SEM BOOTSTRAP E SEM O TEMA. O site no ar carrega bootstrap.css +
   style.css (308 KB) + swiper + dark + font-icons + animate + magnific-popup +
   responsive; o que ele de fato usa está reescrito aqui.
   ========================================================================= */

/* ---- 1. FONTES ---------------------------------------------------------- */
/* SERVIDAS DAQUI, não do Google Fonts: o site no ar busca as três famílias em
   `fonts.googleapis.com` a cada visita.
   SÓ O SUBCONJUNTO `latin`: o português cabe inteiro em U+0000-00FF, e o
   `latin-ext` dobraria o peso sem desenhar um caractere a mais.

   OS PESOS SÃO OS QUE A REFERÊNCIA APLICA, e não os que ela pede no <link>:
   - Lato 300 aparece nos subtítulos ("Junte-se aos mais de 90…", "Dúvidas,
     orçamentos…"); sem este arquivo eles saem em 400, mais gordos.
   - Lato 500 é pedido na frase de posicionamento, mas a família não tem 500:
     tanto lá como aqui o navegador desenha em 400. Não há arquivo a baixar.
   - Lato 600 é pedido no botão "Enviar", e a família também não tem 600: cai
     em 700 nos dois lados.
   - Raleway é variável e cobre 300/600/700 num arquivo só.
   - Crete Round entra no texto de apoio do botão "Solicite um orçamento". O
     site no ar pede `Crete+Round:400italic` e aplica `font-style: normal`;
     como só existe a itálica, é ela que desenha — por isso o arquivo é o
     itálico e o `@font-face` abaixo o declara como `normal`, que é o único
     jeito de repetir o desenho da referência. */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/lato-300-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lato-400-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/lato-700-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/raleway-variable-latin.woff2') format('woff2-variations'),
         url('../fonts/raleway-variable-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Crete Round';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/crete-round-400-italic-latin.woff2') format('woff2');
}

/* ---- 2. TOKENS ---------------------------------------------------------- */
:root {
    /* MEDIDO: são DOIS vermelhos no mesmo site. #942E24 só no item de menu da
       página atual; #7A2B24 em tudo o mais (links, botões, ícones, pontos do
       carrossel). Mantidos os dois, porque é o que a referência desenha. */
    --cor-marca:  #942e24;
    --cor-acento: #7a2b24;

    --cor-texto:   #555555;  /* corpo */
    --cor-titulo-h: #444444; /* h1..h4 e itens de menu em repouso */
    --cor-titulo:  #333333;  /* títulos de seção e dos cartões */
    --cor-suave:   #999999;  /* texto dos cartões de serviço */
    --cor-media:   #777777;  /* subtítulo da seção de contato */
    --cor-clara:   #eeeeee;  /* texto sobre faixa escura */
    --cor-branco:  #ffffff;

    --cor-escura:  #282828;  /* faixas escuras */
    --cor-rodape:  #333333;
    --cor-rodape-txt: #cccccc;
    --cor-borda:   #dddddd;  /* borda de campo (2px) */
    --cor-linha:   #eeeeee;  /* borda do cabeçalho e traços do divisor */
    --cor-linha-cartao: #e5e5e5;

    --fonte-corpo:    Lato, sans-serif;
    --fonte-titulo:   Raleway, sans-serif;
    --fonte-destaque: 'Crete Round', serif;

    --transicao: .25s ease;
}

/* ---- 3. RESET ----------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* O cabeçalho fica fixo no topo depois do primeiro rolar (60px de altura,
       medido). Sem isto a âncora para #servicos para com o título escondido
       atrás dele. */
    scroll-padding-top: 60px;
}

body {
    margin: 0;
    /* MEDIDO: Lato 14px com linha de 21px e texto #555 sobre branco. */
    font-family: var(--fonte-corpo);
    font-size: 14px;
    line-height: 21px;
    color: var(--cor-texto);
    background: var(--cor-branco);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

svg {
    display: inline-block;
    vertical-align: middle;
}

a {
    color: var(--cor-acento);
    text-decoration: none;
    transition: color var(--transicao);
}

a:hover {
    color: var(--cor-titulo);
}

/* MEDIDO na política de privacidade, que é onde os títulos aparecem no tamanho
   natural: Raleway 600 em #444, com 30px até o que vem embaixo. Título de
   seção da home é outra coisa — ver `.titulo-bloco` mais abaixo. */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 30px;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    color: var(--cor-titulo-h);
}

h1 { font-size: 36px; line-height: 54px; }
h2 { font-size: 30px; line-height: 45px; }
h3 { font-size: 24px; line-height: 36px; }
h4 { font-size: 20px; line-height: 30px; }

p {
    margin: 0 0 30px;
}

/* MEDIDO na política de privacidade: a lista do tema NÃO tem recuo — o texto
   do item alinha com o dos parágrafos e o marcador fica pendurado à esquerda. */
ul, ol {
    margin: 0 0 30px;
    padding-left: 0;
}

button {
    font: inherit;
    color: inherit;
}

/* FOCO VISÍVEL: o tema não tinha nenhum, e quem navega por teclado ficava sem
   saber onde estava. */
:focus-visible {
    outline: 2px solid var(--cor-marca);
    outline-offset: 2px;
}

/* PULAR PARA O CONTEÚDO — some da tela até receber foco. */
.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 300;
    padding: 12px 18px;
    background: var(--cor-acento);
    color: var(--cor-branco);
}

.pular-para-conteudo:focus {
    left: 0;
    color: var(--cor-branco);
}

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- 4. CONTAINER ------------------------------------------------------- */
/* MEDIDO faixa por faixa. A largura é FIXA por faixa (não é fluida) — é a
   grade do Bootstrap 3 que o tema usa, e é ela que decide onde cada bloco
   quebra:
       viewport ≥1200 → 1170     (conteúdo 1140)
       ≥992           →  970     (conteúdo  940)
       ≥768           →  750     (conteúdo  720)
       ≥480           →  470     (conteúdo  440)
       abaixo         →  310     (conteúdo  280)
   ⚠ Os 310px do celular não são erro de digitação: num aparelho de 375px o
   site no ar deixa 32px de margem de cada lado. Trocar por 100% deixaria o
   texto mais largo do que a cliente conhece. */
.container {
    position: relative;
    width: 310px;
    margin-inline: auto;
    padding-inline: 15px;
}

@media (min-width: 480px) { .container { width: 470px; } }
@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

/* ---- 5. GRADE ----------------------------------------------------------- */
/* As colunas do tema, com os números dele: um terço é 30.63%, dois terços é
   43.33% (sim, 43 — o tema define assim, e é por isso que os dois cartões da
   segunda fileira de "Serviços" não chegam na borda direita), metade é 48% e o
   vão entre colunas é 4%. Aqui é `flex` no lugar de `float`, o que dá a mesma
   geometria sem precisar de `.clear` no HTML. */
.colunas {
    display: flex;
    flex-wrap: wrap;
    column-gap: 4%;
    row-gap: 50px;
}

.coluna--um-terco  { width: 30.63%; }
.coluna--dois-tercos { width: 43.33%; }
.coluna--metade    { width: 48%; }

/* MEDIDO: abaixo de 768 o tema empilha tudo, com 50px entre blocos. */
@media (max-width: 767px) {
    .coluna--um-terco,
    .coluna--dois-tercos,
    .coluna--metade {
        width: 100%;
    }
}

/* ---- 6. CABEÇALHO ------------------------------------------------------- */
/* MEDIDO: 100px de altura, fundo branco, borda de 1px em #EEE embaixo. O logo
   à esquerda com uma linha vertical depois dele, o menu à direita. A partir do
   primeiro rolar o miolo do cabeçalho gruda no topo e ENCOLHE para 60px (com
   sombra) — é o `sticky-header` do tema, e só acontece de 992px para cima. */
.cabecalho {
    position: relative;
    height: 100px;
    border-bottom: 1px solid var(--cor-linha);
    background: var(--cor-branco);
    transition: height .4s ease;
}

.cabecalho__wrap {
    position: relative;
    z-index: 199;
    min-height: 100px;
    background: var(--cor-branco);
    transition: min-height .4s ease;
}

/* MEDIDO: entre 992 e 1199 de largura o logo e o menu NÃO cabem lado a lado, e
   o site no ar joga o menu para uma segunda linha — o cabeçalho fica com 200px
   e a capa começa 100px mais abaixo. Daí o `wrap` aqui e a altura por
   `min-height`: sem os dois, o `flex` espremia o logo (247px em vez de 256) e
   o texto dos itens, que é o que a nossa primeira versão fazia.
   `flex-shrink: 0` é o que garante a quebra em vez do aperto. */
/* ⚠ A TRANSIÇÃO AQUI É O QUE FAZ A VOLTA ANIMAR. Sem ela a descida animava e a
   subida saltava: ao soltar o cabeçalho, esta linha voltava a 100px de uma vez
   e empurrava a barra junto, atropelando a transição de quem está em volta.
   Quem encolhe/cresce tem que animar em TODA a pilha — barra, miolo e linha. */
.cabecalho__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    min-height: 100px;
    transition: min-height .4s ease;
}

.cabecalho__logo,
.menu {
    flex-shrink: 0;
}

/* MEDIDO: no cabeçalho o container é de largura cheia, com 30px de respiro —
   por isso o logo começa a 30px da borda da janela, e não alinhado ao
   conteúdo. */
@media (min-width: 992px) {
    .cabecalho .container {
        width: 100%;
        padding-inline: 30px;
    }
}

.cabecalho__logo {
    display: flex;
    align-items: center;
}

/* MEDIDO: a arte tem 210x82 e o site no ar a desenha com 100px de ALTURA, o
   que dá 256px de largura — 22% maior do que o arquivo, e é por isso que ela
   sai um pouco borrada lá também. Mantido o mesmo tamanho na tela para não
   mudar o que a cliente conhece; o conserto de verdade é um arquivo de logo
   maior, e está anotado no README. */
.cabecalho__logo img {
    width: auto;
    height: 100px;
    transition: height .4s ease;
}

.cabecalho__hamburguer {
    display: none;
    position: absolute;
    left: 0;
    top: 25px;
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    background: none;
    color: var(--cor-texto);
    cursor: pointer;
    text-align: center;
}

/* MEDIDO: o traço do menu do celular tem 14px na referência (a caixa que
   recebe o toque é que tem 50x50). */
.cabecalho__hamburguer svg {
    height: 14px;
    width: auto;
}

.menu {
    margin-left: auto;
}

/* MEDIDO: a lista tem 15px de respiro DENTRO e 15px de margem FORA, do lado
   direito — são esses 30px que fazem o último item ("Contato") parar 30px antes
   da borda do cabeçalho, e não encostado nela. */
.menu__lista {
    display: flex;
    align-items: stretch;
    height: 100%;
    margin: 0 15px 0 0;
    padding: 0 15px 0 0;
    list-style: none;
}

.menu__lista li + li {
    margin-left: 2px;
}

/* MEDIDO: Raleway 13/700, caixa alta, 1px de espaçamento entre letras, em
   #444; o respiro de 39px em cima e embaixo é o que centra o texto nos 100px
   do cabeçalho. SÓ o item da página atual sai na cor da marca. */
.menu__link {
    display: block;
    padding: 39px 15px;
    font-family: var(--fonte-titulo);
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 1px;
    color: var(--cor-titulo-h);
    text-transform: uppercase;
    transition: color var(--transicao), padding .4s ease;
}

.menu__link:hover,
.menu__link--ativo {
    color: var(--cor-marca);
}

/* MEDIDO: de 992 a 1199 o menu não cabe ao lado do logo e cai para uma segunda
   linha — o cabeçalho passa a ter 200px e a capa começa 100px mais abaixo. A
   altura é cravada aqui porque a de fora (`.cabecalho`) segura o lugar no fluxo:
   o miolo cresce sozinho, mas quem empurra o conteúdo é ela. */
@media (min-width: 992px) and (max-width: 1199px) {
    .cabecalho {
        height: 200px;
    }
}

/* CABEÇALHO GRUDADO (a classe entra pelo site.js no primeiro rolar) */
@media (min-width: 992px) {
    /* ⚠ ALTURA EXPLÍCITA, NUNCA `auto`: é o que permite a ANIMAÇÃO. `height:
       auto` não é animável, e com ela o cabeçalho saltava de 100 para 60 num
       quadro só, enquanto o site no ar desliza em 0,4s (`transition: height
       .4s ease`, do tema). Ao subir a tela a animação é a mesma, ao contrário. */
    .cabecalho--fixo {
        height: 60px;
    }

    .cabecalho--fixo .cabecalho__wrap {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        min-height: 60px;
        box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    }

    .cabecalho--fixo .cabecalho__linha {
        min-height: 60px;
    }

    .cabecalho--fixo .cabecalho__logo img {
        height: 60px;
    }

    .cabecalho--fixo .menu__link {
        padding: 19px 15px;
    }
}

/* MEDIDO: de 992 para cima o logo tem uma linha vertical de 1px depois dele,
   com 30px de respiro dos dois lados dela. */
@media (min-width: 992px) {
    .cabecalho__logo {
        margin-right: 30px;
        padding-right: 30px;
        border-right: 1px solid var(--cor-linha);
    }
}

/* MEDIDO: abaixo de 992 o logo vai para o meio, a linha vertical sai, o menu
   vira gaveta e aparece o botão de três traços.

   ⚠ NO CELULAR O CABEÇALHO NÃO ANIMA NADA. Ele não gruda, não encolhe e não
   tem transição: sobe com a página como qualquer bloco (medido — o
   `#header-wrap` da referência fica `position: relative` e vai a `top: -600`
   ao rolar 600). Quem segura a classe `--fixo` é o `site.js`; as transições
   têm de sair AQUI, senão a gaveta abre deslizando, o que a referência não
   faz. */

@media (max-width: 991px) {
    /* ALTURA LIVRE: com a gaveta aberta o cabeçalho CRESCE (101px → 355px em
       390) e empurra a capa para baixo — a gaveta não é uma camada por cima.
       Os 101px são 100 de conteúdo + a borda, que aqui soma (a referência
       larga a altura fixa abaixo de 992). */
    .cabecalho {
        height: auto;
        transition: none;
    }

    .cabecalho__wrap,
    .cabecalho__linha,
    .cabecalho__logo img,
    .menu__link {
        transition: none;
    }

    .cabecalho__linha {
        position: relative;
        justify-content: center;
    }

    .cabecalho__hamburguer {
        display: block;
    }

    /* MEDIDO com o menu aberto no site no ar: a gaveta ocupa a LARGURA DO
       CONTEÚDO do container (280px em 390, 440 em 480, 720 em 768), começa
       colada no pé da linha do logo (y=100) e entra NO FLUXO — por isso o
       `width: 100%` numa linha flex que quebra, e não `position: absolute`.
       Cada item tem 50px de altura (respiro 14/5 + linha de 22) e um traço de
       1px separando um do outro. */
    .menu {
        display: none;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .menu.aberto {
        display: block;
    }

    .menu__lista {
        flex-direction: column;
        align-items: stretch;
        margin: 0;
        padding: 0;
    }

    .menu__lista li + li {
        margin-left: 0;
        border-top: 1px solid var(--cor-linha);
    }

    .menu__link {
        padding: 14px 5px;
    }

    /* ⚠ VERDE-ÁGUA MESMO, E É DA REFERÊNCIA: no celular o item da página atual
       sai em #1ABC9C — o verde que vem de fábrica no tema Canvas, que o site
       no ar sobrescreveu SÓ na regra do menu de computador. Medido nos dois
       lados: #942E24 de 992 para cima, #1ABC9C abaixo disso. Está no README
       como divergência de marca da referência, para a Sami decidir. */
    .menu__link--ativo {
        color: #1abc9c;
    }
}

/* ---- 7. TÍTULO DE SEÇÃO ------------------------------------------------- */
/* MEDIDO: é o `.heading-block` do tema, e aparece cinco vezes no site. Três
   coisas o definem, e as três estavam faltando na nossa cópia:
     1. o h2 é Raleway 30/700 CAIXA ALTA com 1px entre letras (o corpo do site
        usa 600 e caixa normal — este é o único lugar com 700);
     2. o subtítulo é um bloco de 700px no máximo, centrado, com 10px de
        respiro em cima;
     3. embaixo de tudo vem um TRAÇO de 40x2px centrado, 30px depois do texto.
   O traço é o detalhe que mais salta aos olhos quando falta. */
.titulo-bloco {
    margin-bottom: 50px;
    text-align: center;
}

.titulo-bloco::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    margin: 30px auto 0;
    border-top: 2px solid var(--cor-titulo-h);
}

.titulo-bloco__titulo {
    margin: 0;
    padding: 0 15px;
    font-size: 30px;
    line-height: 45px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--cor-titulo);
    text-transform: uppercase;
}

.titulo-bloco__subtitulo {
    display: block;
    max-width: 700px;
    margin: 10px auto 0;
    font-family: var(--fonte-corpo);
    font-size: 22px;
    font-weight: 300;
    line-height: 33px;
    color: var(--cor-media);
}

/* MEDIDO: abaixo de 768 o título cai para 26/39 e o subtítulo para 18/27. */
@media (max-width: 767px) {
    .titulo-bloco__titulo {
        font-size: 26px;
        line-height: 39px;
    }

    .titulo-bloco__subtitulo {
        font-size: 18px;
        line-height: 27px;
    }
}

/* ---- 8. BOTÕES ---------------------------------------------------------- */
/* MEDIDO no "Enviar": 102x40, fundo #7A2B24, Lato 14/600 (que a família
   resolve em 700) caixa alta com 1px entre letras, canto de 3px, uma borda
   inferior de 3px em preto a 15% (é o "button-3d" do tema) e sombra de texto
   em preto a 20%. */
.botao {
    display: inline-block;
    height: 40px;
    padding: 0 22px;
    border: none;
    border-bottom: 3px solid rgba(0, 0, 0, .15);
    border-radius: 3px;
    background: var(--cor-acento);
    color: var(--cor-branco);
    font-family: var(--fonte-corpo);
    font-size: 14px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transicao);
}

.botao:hover {
    background: var(--cor-titulo-h);
    color: var(--cor-branco);
}

.botao[disabled] {
    opacity: .6;
    cursor: default;
}

/* ---- 9. FORMULÁRIO ------------------------------------------------------ */
/* MEDIDO: primeira fileira em três colunas (nome, e-mail, telefone), depois
   assunto e mensagem em largura cheia, com 25px entre fileiras. */
.form-lead__campos {
    display: flex;
    flex-wrap: wrap;
    column-gap: 4%;
}

.campo {
    width: 30.63%;
    margin-bottom: 25px;
}

.campo--largo {
    width: 100%;
}

@media (max-width: 767px) {
    .campo {
        width: 100%;
    }
}

/* MEDIDO: rótulo em Raleway 13/700 caixa alta com 1px entre letras e 10px até
   o campo. O asterisco é um `<small>` de 0,85em no mesmo peso. */
.campo label {
    display: inline-block;
    margin-bottom: 10px;
    font-family: var(--fonte-titulo);
    font-size: 13px;
    font-weight: 700;
    line-height: 19.5px;
    letter-spacing: 1px;
    color: var(--cor-texto);
    text-transform: uppercase;
}

/* MEDIDO: o asterisco é Lato 11,05px (0,85em) com linha de 16,575px. A linha
   PRECISA ser essa: com a linha do rótulo (19,5px) a caixa dele cresce 1px, e
   os três rótulos empurram o botão "Enviar" 3px para baixo. */
.campo label small {
    font-family: var(--fonte-corpo);
    font-size: .85em;
    font-weight: 700;
    line-height: 1.5;
}

/* MEDIDO: respiro 8/14, borda de 2px em #DDD, canto reto, Lato 15 com linha de
   1,42857 — é essa linha que dá os 41px de altura do campo e os 149px da caixa
   de mensagem com `rows="6"`. */
.campo input,
.campo textarea {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: 2px solid var(--cor-borda);
    border-radius: 0;
    background: var(--cor-branco);
    font-family: var(--fonte-corpo);
    font-size: 15px;
    line-height: 1.42857;
    color: var(--cor-texto);
    transition: border-color var(--transicao);
}

.campo textarea {
    resize: vertical;
}

/* A DICA DENTRO DO CAMPO é nossa (a referência não tem placeholder nenhum), e
   o cinza é cravado aqui de propósito: o padrão de cada navegador é um tom
   diferente, e no Firefox ele ainda vem com transparência. #999 é o mesmo
   cinza-claro dos sites irmãos, claro o bastante para não se confundir com o
   que a pessoa digita (#555) e escuro o bastante para se ler. O rótulo acima
   do campo continua sendo o nome de verdade. */
.campo input::placeholder,
.campo textarea::placeholder {
    color: var(--cor-suave);
    opacity: 1;
}

.campo input:focus,
.campo textarea:focus {
    border-color: var(--cor-acento);
    outline: none;
}

.form-lead__acoes {
    margin-top: 0;
}

/* WIDGET DO TURNSTILE — logo ACIMA do botão "Enviar".
   A caixa que a Cloudflare desenha é um <iframe> de 300px fixos: não dá para
   estilizar por dentro nem esticar. Aqui só se garante o respiro até o botão e
   que ela não abra rolagem lateral onde a coluna é mais estreita que 300px (o
   celular, onde o conteúdo tem 280). */
.form-lead__turnstile {
    max-width: 100%;
    margin-bottom: 20px;
    overflow: hidden;
}

/* NO CELULAR A COLUNA TEM 280px E O WIDGET TEM 300 FIXOS. Cortar os 20px que
   sobram come o "Privacy • Help" e metade do logo da Cloudflare; então a caixa
   fica no tamanho natural dela e é REDUZIDA proporcionalmente (0,93), que é o
   que faz os 300 caberem nos 280. `transform` não deixa rolagem lateral: o
   navegador conta o tamanho JÁ reduzido. */
@media (max-width: 479px) {
    .form-lead__turnstile {
        width: 300px;
        max-width: none;
        margin-bottom: 15px;
        transform: scale(.93);
        transform-origin: left top;
    }
}

/* ISCA ANTI-ROBÔ: fora da tela, mas não `display:none` — robô ignora campo
   escondido desse jeito, e a graça é justamente que ele preencha. */
.isca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.aviso {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 3px;
    font-size: 14px;
}

.aviso--ok {
    background: #e8f4ec;
    color: #1c6b3a;
}

.aviso--erro {
    background: #fbeaea;
    color: #8c2f2f;
}

/* ---- 10. RODAPÉ --------------------------------------------------------- */
/* MEDIDO: borda de 5px em preto a 20% em cima, fundo #333 com mais uma camada
   de preto a 20% (o que dá o #292929 que se vê), respiro de 40px, texto de
   14px com linha de 25,2px e sombra de texto em preto a 10%. Duas colunas de
   48%: à esquerda o crédito, à direita os contatos alinhados à direita. */
.rodape {
    position: relative;
    border-top: 5px solid rgba(0, 0, 0, .2);
    background: var(--cor-rodape);
    color: var(--cor-rodape-txt);
    font-size: 14px;
}

.rodape__creditos {
    padding: 40px 0;
    background: rgba(0, 0, 0, .2);
    line-height: 25.2px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
}

/* `flex-start` NÃO É DETALHE: sem ele as duas colunas ficam da mesma altura
   (no site no ar elas flutuam, e cada uma tem a altura do próprio conteúdo — o
   crédito ocupa uma linha, os contatos duas). */
.rodape__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 4%;
}

.rodape__coluna {
    width: 48%;
    color: var(--cor-branco);
}

.rodape__coluna--contato {
    text-align: right;
}

.rodape p {
    margin: 0;
}

.rodape a {
    color: var(--cor-rodape-txt);
}

.rodape a:hover {
    color: var(--cor-branco);
}

/* MEDIDO: o ícone tem a altura da linha de texto (14px) e um espaço depois. */
.rodape__item svg {
    height: 14px;
    width: auto;
    margin-right: 4px;
}

.rodape__separador {
    margin: 0 4px;
}

/* MEDIDO: abaixo de 768 o site no ar CENTRA o crédito e ESCONDE a coluna de
   contatos (e-mail, telefone e CNPJ) — no celular esses dados só existem nos
   cartões da seção de contato. */
@media (max-width: 767px) {
    .rodape__coluna {
        width: 100%;
        text-align: center;
    }

    .rodape__coluna--contato {
        display: none;
    }
}

/* ---- 11. VOLTAR AO TOPO ------------------------------------------------- */
/* MEDIDO: 40x40 a 30px do canto, preto a 30%, canto de 2px, seta de 20px. Só
   aparece depois de rolar. */
.voltar-topo {
    display: none;
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 299;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 2px;
    background: rgba(0, 0, 0, .3);
    color: var(--cor-branco);
    line-height: 36px;
    text-align: center;
    cursor: pointer;
}

.voltar-topo.visivel {
    display: block;
}

/* COM O CHAT NA TELA, O BOTÃO SOBE.
   ---------------------------------------------------------------------------
   MEDIDO em 2026-09-21: a bolha do chat (widget do painel, compartilhado entre
   os sites e que não dá para editar daqui) fica em `right: 20px; bottom: 20px`
   com 60px e `z-index: 999999`; o nosso botão fica em `right: 30px; bottom:
   30px` com 40px e `z-index: 299`. Os dois ocupam o mesmo canto, e a bolha
   cobre o botão inteiro.

   92px = os 80 que a bolha ocupa (20 + 60) mais 12 de respiro. É a mesma conta
   que o próprio widget usa para abrir a janela de conversa acima da bolha.

   A CLASSE `tem-chat` É POSTA PELO JAVASCRIPT quando o widget chega de verdade
   (ver `pages/partials/footer.php`), não pela flag do painel: com a flag
   ligada e sem fluxo de conversa cadastrado, o widget volta vazio e não há
   bolha nenhuma de que fugir. */
body.tem-chat .voltar-topo {
    bottom: 92px;
}

.voltar-topo svg {
    height: 20px;
    width: auto;
}

/* ---- 12. AVISO DE COOKIES ----------------------------------------------- */
/* MEDIDO: barra de largura cheia colada no pé, fundo #212327 com a textura de
   pontinhos, texto de 14px em negrito na cor #ECF0F1, link sublinhado na cor
   da marca e o botão azul do Bootstrap. Entra deslizando de baixo um segundo
   depois da página carregar.

   ⚠ O DESENHO É O MESMO, A ORIGEM NÃO: o site no ar baixa o CSS e o JS do
   "Bootstrap Cookie Alert" de `cdn.jsdelivr.net` (um repositório `gh-pages` de
   conta pessoal) em toda visita. Aqui é CSS nosso, com a textura em
   `public/img/`, e o aceite fica em localStorage. */
.cookies-aviso {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    width: 100%;
    padding: 7.5px 12.5px;
    border: 1px solid transparent;
    background: #212327 url('../img/cookies-textura.png?v=1788976461');
    color: #ecf0f1;
    font-size: 14px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: all 500ms ease-out;
}

.cookies-aviso.aberto {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 1000ms;
}

.cookies-aviso a {
    color: var(--cor-acento);
    text-decoration: underline;
}

.cookies-aviso__botao {
    margin-left: 10px;
    padding: 5px 10px;
    border: 1px solid #2e6da4;
    border-radius: 3px;
    background: #337ab7;
    color: var(--cor-branco);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    vertical-align: baseline;
    cursor: pointer;
}

.cookies-aviso__botao:hover {
    background: #286090;
    border-color: #204d74;
}

/* ---- BARRA DE INSTALAR O APP (PWA) -------------------------------------- */
/* MESMA BARRA DO AVISO DE COOKIES (a classe vem junto no HTML), com três
   acréscimos: o ícone do app à esquerda, o botão de fechar à direita e o
   empilhamento — quando as duas barras precisam aparecer, esta sobe e fica
   acima da de cookies, em vez de uma cobrir a outra. Quem calcula a altura é
   o `site.js`, porque a barra de baixo muda de altura conforme o texto quebra. */
.instalar-app {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.instalar-app b {
    font-weight: 400;
}

.instalar-app__icone {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 6px;
}

.instalar-app__botao-fechar,
.instalar-app__fechar {
    flex: 0 0 auto;
    padding: 0 6px;
    border: 0;
    background: none;
    color: #ecf0f1;
    font-size: 22px;
    line-height: 1;
    opacity: .7;
    cursor: pointer;
}

.instalar-app__fechar:hover {
    opacity: 1;
}

/* NO CELULAR o texto ocupa a linha inteira e os botões descem para a segunda —
   com tudo na mesma linha, a frase virava duas palavras por linha. */
@media (max-width: 575px) {
    .instalar-app b {
        flex: 1 0 100%;
        order: 1;
    }

    .instalar-app__icone {
        order: 0;
    }

    .instalar-app .cookies-aviso__botao {
        order: 2;
        margin-left: 0;
    }

    .instalar-app__fechar {
        order: 3;
    }
}

/* QUEM PEDE "menos animação" não vê a barra deslizar nem a seta pular. */
/* QUEM PEDE "menos animação" NO SISTEMA não vê a rolagem deslizar nem a barra de
   cookies subir.

   ⚠ O CABEÇALHO FICOU DE FORA DESTA LISTA, DE PROPÓSITO. Ele estava aqui, e o
   efeito foi este: com "reduzir movimento" ligado no Windows, o site no ar
   continuava animando (não tem regra dessas) e o NOSSO cabeçalho saltava de
   100px para 60px de uma vez — a diferença que o Sami viu e cobrou em
   2026-09-09. Encolher um cabeçalho em 0,4s não é o tipo de movimento que essa
   preferência existe para conter (giro, salto, parallax, laço infinito); ficar
   igual à referência vale mais aqui. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .cookies-aviso {
        transition: none;
    }
}

/* ---- REDES SOCIAIS NO RODAPÉ -------------------------------------------- */
/* SÓ EXISTE SE A CLIENTE CADASTRAR ALGUMA REDE NO PAINEL (ver footer.php). O
   site no ar não tem este bloco — não há o que medir contra: o desenho segue o
   resto do rodapé (14px, #ccc, vermelho no hover). */
.rodape__redes {
    display: inline-flex;
    gap: 12px;
    margin-left: 4px;
    vertical-align: middle;
}

.rodape__rede {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-rodape-txt);
    transition: color var(--transicao);
}

.rodape__rede svg {
    height: 15px;
    width: auto;
}

.rodape__rede:hover {
    color: var(--cor-branco);
}