.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary-hover);
}
.btn-primary:hover {
    border-color: var(--color-primary-hover);
    background-color: var(--color-primary-hover);
}


#form .btn-primary {
    color: var(--color-primary-inverse);
    background-color: var(--color-primary);
    border-color: var(--color-primary-hover);
}

#form .btn-primary:hover {
    color: var(--color-primary-inverse);
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* ---------- fundo da impressão (ver base/body.twig) ----------
   Na tela não existe; ao imprimir, vira um retângulo de CONTEÚDO cobrindo o
   documento inteiro: é assim que a cor de papel de cada template sobrevive ao
   PDF, já que o navegador descarta os  por padrão. Cada template
   define --lp-print-bg com a sua cor; sem isso, fica branco (comportamento
   anterior, nada quebra). */
.lp-print-bg {
    display: none;
}

/* Folha SEM margem de navegador. Dois motivos: a cor do papel passa a cobrir a folha inteira
   (com margem, sobrava uma moldura branca em volta) e a largura útil de um A4 sobe de ~720px
   para ~794px, o que já cruza o breakpoint de 768 por conta própria.
   O texto não fica colado na borda porque o .container continua com o teto de 720px logo
   abaixo: ele centraliza e cria uma folga de uns 10mm de cada lado, enquanto as faixas
   coloridas de fundo seguem sangrando até o fim da folha. */
@page {
    margin: 0;
}

@media print {
    body {
        position: relative;
    }

    /* O teto do Bootstrap na faixa md. É ele que dá a margem visual do texto agora que a
       folha não tem mais margem. max-width nunca alarga nada, então em papel menor que
       720px continua sem efeito. */
    .container,
    .container-sm,
    .container-md {
        max-width: 720px;
    }

    .lp-print-bg {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        color: var(--lp-print-bg, #ffffff);
    }

    /* O conteúdo sobe para z-index 1 em vez de o fundo descer para -1: com
       z-index negativo o Chrome imprimia fotos e painéis como retângulos
       BRANCOS (elementos com overflow/border-radius/backdrop-filter viravam
       camada opaca sobre a camada negativa). Assim o empilhamento fica
       positivo e a página imprime igual à tela. */
    body > *:not(.lp-print-bg) {
        position: relative;
        z-index: 1;
    }

    /* Foto não parte no meio entre duas folhas. O mosaico em si volta pelos breakpoints dos
       templates, que agora também valem em `print` (ver o `, print` nas media queries do
       index.css de cada um): assim o PDF sai com o mesmo layout da tela, e não com o de celular. */
    .grid-photo {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* TRÊS CARACTERÍSTICAS POR LINHA NO PAPEL.
       Os .feature são inline-flex, e o ESPAÇO EM BRANCO entre eles conta na largura: três de
       33% mais os espaços passa de 100%, o terceiro cai pra linha seguinte e sobra meia folha
       vazia. Numa caixa flex o navegador descarta os nós de espaço, então as três encaixam.
       O seletor com duas classes vence o `.feature` do template, que carrega depois. */
    .features-block {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* O título mora dentro do mesmo bloco: sem isto ele viraria um item da própria linha.
       SÓ a largura. A margem é de cada template e não pode ser mexida: no template-02, por
       exemplo, o filete decorativo é um :before absoluto em top:100% + 15px, e é o
       margin-bottom de 35px do título que reserva o espaço dele. Zerando a margem, o filete
       ia parar em cima das características. */
    .features-block > h2,
    .features-block > h3,
    .features-block .features-title {
        width: 100%;
    }

    .features-block .feature {
        width: calc(33.333% - 4px);
        margin: 0;
    }

    /* A GRADE DO BOOTSTRAP TAMBÉM PRECISA VALER NO PAPEL.
       Os templates montam as seções com col-sm/md/lg, e essas regras moram dentro das
       media queries do bootstrap.min.css, que é arquivo de terceiro e não dá pra editar.
       Sem isto, o CSS do template virava desktop (fontes e espaçamentos grandes) enquanto
       as colunas continuavam empilhadas de celular: era o preço e os dormitórios ocupando
       a folha inteira. Cópia fiel, na mesma ordem sm > md > lg, só colunas e offsets. */
    /* faixa 576px */
    .col-sm{flex:1 0 0%}
    .col-sm-auto{flex:0 0 auto;width:auto}
    .col-sm-1{flex:0 0 auto;width:8.33333333%}
    .col-sm-2{flex:0 0 auto;width:16.66666667%}
    .col-sm-3{flex:0 0 auto;width:25%}
    .col-sm-4{flex:0 0 auto;width:33.33333333%}
    .col-sm-5{flex:0 0 auto;width:41.66666667%}
    .col-sm-6{flex:0 0 auto;width:50%}
    .col-sm-7{flex:0 0 auto;width:58.33333333%}
    .col-sm-8{flex:0 0 auto;width:66.66666667%}
    .col-sm-9{flex:0 0 auto;width:75%}
    .col-sm-10{flex:0 0 auto;width:83.33333333%}
    .col-sm-11{flex:0 0 auto;width:91.66666667%}
    .col-sm-12{flex:0 0 auto;width:100%}
    .offset-sm-0{margin-left:0}
    .offset-sm-1{margin-left:8.33333333%}
    .offset-sm-2{margin-left:16.66666667%}
    .offset-sm-3{margin-left:25%}
    .offset-sm-4{margin-left:33.33333333%}
    .offset-sm-5{margin-left:41.66666667%}
    .offset-sm-6{margin-left:50%}
    .offset-sm-7{margin-left:58.33333333%}
    .offset-sm-8{margin-left:66.66666667%}
    .offset-sm-9{margin-left:75%}
    .offset-sm-10{margin-left:83.33333333%}
    .offset-sm-11{margin-left:91.66666667%}
    /* faixa 768px */
    .col-md{flex:1 0 0%}
    .col-md-auto{flex:0 0 auto;width:auto}
    .col-md-1{flex:0 0 auto;width:8.33333333%}
    .col-md-2{flex:0 0 auto;width:16.66666667%}
    .col-md-3{flex:0 0 auto;width:25%}
    .col-md-4{flex:0 0 auto;width:33.33333333%}
    .col-md-5{flex:0 0 auto;width:41.66666667%}
    .col-md-6{flex:0 0 auto;width:50%}
    .col-md-7{flex:0 0 auto;width:58.33333333%}
    .col-md-8{flex:0 0 auto;width:66.66666667%}
    .col-md-9{flex:0 0 auto;width:75%}
    .col-md-10{flex:0 0 auto;width:83.33333333%}
    .col-md-11{flex:0 0 auto;width:91.66666667%}
    .col-md-12{flex:0 0 auto;width:100%}
    .offset-md-0{margin-left:0}
    .offset-md-1{margin-left:8.33333333%}
    .offset-md-2{margin-left:16.66666667%}
    .offset-md-3{margin-left:25%}
    .offset-md-4{margin-left:33.33333333%}
    .offset-md-5{margin-left:41.66666667%}
    .offset-md-6{margin-left:50%}
    .offset-md-7{margin-left:58.33333333%}
    .offset-md-8{margin-left:66.66666667%}
    .offset-md-9{margin-left:75%}
    .offset-md-10{margin-left:83.33333333%}
    .offset-md-11{margin-left:91.66666667%}
    /* faixa 992px */
    .col-lg{flex:1 0 0%}
    .col-lg-auto{flex:0 0 auto;width:auto}
    .col-lg-1{flex:0 0 auto;width:8.33333333%}
    .col-lg-2{flex:0 0 auto;width:16.66666667%}
    .col-lg-3{flex:0 0 auto;width:25%}
    .col-lg-4{flex:0 0 auto;width:33.33333333%}
    .col-lg-5{flex:0 0 auto;width:41.66666667%}
    .col-lg-6{flex:0 0 auto;width:50%}
    .col-lg-7{flex:0 0 auto;width:58.33333333%}
    .col-lg-8{flex:0 0 auto;width:66.66666667%}
    .col-lg-9{flex:0 0 auto;width:75%}
    .col-lg-10{flex:0 0 auto;width:83.33333333%}
    .col-lg-11{flex:0 0 auto;width:91.66666667%}
    .col-lg-12{flex:0 0 auto;width:100%}
    .offset-lg-0{margin-left:0}
    .offset-lg-1{margin-left:8.33333333%}
    .offset-lg-2{margin-left:16.66666667%}
    .offset-lg-3{margin-left:25%}
    .offset-lg-4{margin-left:33.33333333%}
    .offset-lg-5{margin-left:41.66666667%}
    .offset-lg-6{margin-left:50%}
    .offset-lg-7{margin-left:58.33333333%}
    .offset-lg-8{margin-left:66.66666667%}
    .offset-lg-9{margin-left:75%}
    .offset-lg-10{margin-left:83.33333333%}
    .offset-lg-11{margin-left:91.66666667%}

}