/**
 * Ponte de cores: Metronic (legado) -> tema do tenant (V2).
 *
 * O corpo das landings legadas e markup Metronic e pinta tudo com --bs-primary.
 * No bundle o --bs-primary nasce azul (#009ef7) e o landings.css compartilhado
 * ainda forca um magenta de placeholder (#dc47ff !important), que aparecia em
 * pills, botoes e badges de qualquer cliente que nao pintasse tudo inline.
 *
 * Aqui as variaveis do Metronic passam a apontar pras vars do tema do V2
 * (helpers/theme-css.php, valores vindos do banco por imobiliaria). Precisa de
 * !important pra ganhar do !important do landings.css.
 *
 * Carregar SEMPRE depois de style.bundle.css e landings.css, e so em landing
 * que inclui o layouts/head.php do V2 (e ele que define as --cor-*).
 */

:root {
    --bs-primary: var(--cor-primaria) !important;
    --bs-primary-rgb: var(--cor-primaria-rgb) !important;
    --bs-primary-active: var(--cor-secundaria) !important;
    --bs-primary-light: var(--cor-primaria-light) !important;
    --bs-primary-inverse: #ffffff !important;
    --bs-text-primary: var(--cor-primaria) !important;
    --bs-link-color: var(--cor-primaria) !important;
    --bs-link-hover-color: var(--cor-secundaria) !important;
}

/* .btn.btn-primary (0,2,0) do Metronic ganha do .btn-primary (0,1,0) do V2 na
   marra, entao a cor tem que ser reafirmada aqui. */
.btn.btn-primary {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--btn-primary-text, #fff);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    background-color: var(--cor-secundaria);
    border-color: var(--cor-secundaria);
    color: var(--btn-primary-text, #fff);
}

.badge-primary,
.badge.badge-primary {
    background-color: var(--cor-primaria);
    color: #fff;
}

.bg-light-primary {
    background-color: rgba(var(--cor-primaria-rgb), 0.12) !important;
}

.noUi-target .noUi-connect {
    background: var(--cor-primaria) !important;
}

/* O Bootstrap do bundle trava .container em 1140px. O header/footer do V2 usam
   .container e ficariam mais estreitos que o resto do site. Escopado no <header>
   pra nao mexer na largura do corpo legado da landing. */
header .container {
    max-width: var(--container-max, 1280px);
}

/* ------------------------------------------------------------------ *
 * COLISAO .g-N : V2 x Bootstrap
 * ------------------------------------------------------------------ *
 * No utilities.css do V2, `.g-5` e utilitario de GAP (gap:1.25rem !important).
 * No Bootstrap do bundle, `.g-5` so define a variavel --bs-gutter-x, e o
 * espacamento sai do padding das colunas.
 *
 * Numa `<div class="row g-5">` do markup legado os dois se aplicam e o gap
 * ENTRA POR CIMA das gutters: 4 colunas de 25% + 3 gaps passam de 100% e a
 * ultima coluna quebra pra linha de baixo (a section de 4 cards virava 3+1).
 *
 * Zerar o gap so nas rows do corpo legado devolve o comportamento do Bootstrap.
 * Fica escopado em `main` pra nao encostar no header/footer do V2, e precisa de
 * !important + especificidade maior pra ganhar do !important do utilities.
 * ------------------------------------------------------------------ */
main .row {
    gap: 0 !important;
}

/* ------------------------------------------------------------------ *
 * ALTURA DO HERO: a section inteira vale a dobra, a curva fecha embaixo
 * ------------------------------------------------------------------ *
 * No site antigo o header ficava DENTRO da section do hero e somava a
 * propria altura (~100px). O header do V2 e sobreposto (nao ocupa altura),
 * entao o hero encolheu e a curva subia pro meio da tela.
 *
 * Dar altura so pro miolo (.bg-fume) nao resolve: a `.curva-custom` e IRMA
 * dele dentro da `.bg-capa` e ainda tem margem negativa (mt-lg-n17 = -68px)
 * contra uma altura de 45px, entao a section acabava com 90vh - 23px e
 * sobrava um naco de tela depois da curva.
 *
 * Agora quem manda e a section: 100vh de altura, layout em coluna, miolo com
 * flex-grow e curva com flex fixo. Como a curva e o ultimo item, a base dela
 * cai exatamente no fim da dobra, independente da margem negativa que a
 * landing use (n17, n12, n1...). O miolo cresce sozinho pra compensar.
 *
 * Seletor `section.bg-capa` (0,1,1) de proposito: cada landing legada repete
 * um `.bg-capa { min-height: 90vh }` no <style> do proprio <head>, que vem
 * depois deste arquivo. Com a especificidade maior nao precisa editar as 5.
 * ------------------------------------------------------------------ */
/* 94vh e nao 100vh: a dobra cheia ficou pesada demais. Sobrando uma fatia da
   proxima secao, o visitante enxerga que a pagina continua e rola. */
section.bg-capa {
    display: flex;
    flex-direction: column;
    min-height: 94vh;
}

/* svh = viewport com as barras do navegador VISIVEIS. Sem isso o mobile
   estoura a dobra e a curva so aparece depois de rolar. */
@supports (min-height: 94svh) {
    section.bg-capa {
        min-height: 94svh;
    }
}

section.bg-capa > .bg-fume {
    flex: 1 1 auto;
    /* zera o min-h-600px/min-h-sm-750px do markup legado: em tela baixa eles
       empurrariam a curva pra fora da dobra. Quem define a altura e o flex. */
    min-height: 0 !important;
    padding-top: var(--header-height, 82px);
}

section.bg-capa > .curva-custom {
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    section.bg-capa > .bg-fume {
        padding-top: var(--header-height-mobile, 60px);
    }
}