@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(assets/fonts/outfit-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(assets/fonts/outfit-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url(assets/fonts/dmsans-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url(assets/fonts/dmsans-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --bf-papel: #ffffff;
    --bf-papel-frio: #f6fafc;
    --bf-azul-claro: #eaf4fa;
    --bf-azul: #0b5186;
    --bf-azul-fundo: #09385d;
    --bf-azul-noite: #072b47;
    --bf-azul-brilho: #0093d0;
    --bf-azul-nitido: #0072a1;
    --bf-azul-aceso: #4fb6e0;
    --bf-azul-tenue: #b9d3e6;
    --bf-tinta: #173047;
    --bf-tinta-suave: #4a6076;
    --bf-verde: #087f75;
    --bf-verde-forte: #066b62;
    --bf-borda: #d7e5ef;

    --bf-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
    --bf-corpo: 'DM Sans', 'Segoe UI', system-ui, sans-serif;

    --bf-t-mega: clamp(2.25rem, 1.35rem + 3.7vw, 4rem);
    --bf-t-grande: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    --bf-t-media: clamp(1.25rem, 1.06rem + 0.8vw, 1.6rem);
    --bf-t-corpo: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
    --bf-t-lead: clamp(1.09rem, 1rem + 0.45vw, 1.32rem);
    --bf-t-mini: 0.82rem;

    --bf-r-controle: 6px;
    --bf-r-painel: 14px;
    --bf-r-pilula: 999px;

    --bf-espaco-secao: clamp(4rem, 2.5rem + 6vw, 7.5rem);
    --bf-largura: 1200px;
    --bf-margem: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);

    --bf-transicao: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bf-papel);
    color: var(--bf-tinta);
    font-family: var(--bf-corpo);
    font-size: var(--bf-t-corpo);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--bf-display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.018em;
    margin: 0;
    text-wrap: balance;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

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

a { color: var(--bf-azul); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bf-azul-fundo); }

:focus-visible {
    outline: 3px solid var(--bf-azul-brilho);
    outline-offset: 2px;
    border-radius: 3px;
}

::selection { background: var(--bf-azul-claro); color: var(--bf-azul-fundo); }

/* ------------------------------------------------------------
   4. Utilitarios de estrutura
   ------------------------------------------------------------ */
.bf-shell {
    width: 100%;
    max-width: var(--bf-largura);
    margin-inline: auto;
    padding-inline: var(--bf-margem);
}

.bf-skip {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 200;
    padding: 0.85rem 1.25rem;
    background: var(--bf-azul-fundo);
    color: #fff;
    font-weight: 600;
    border-radius: var(--bf-r-controle);
    text-decoration: none;
    transition: top var(--bf-transicao);
}
.bf-skip:focus { top: 1rem; color: #fff; }

/* Palavra composta que nao pode quebrar no hifen. Existe por causa de
   "on-line": quebrado em "on-" e "line" ele parece erro de digitacao. */
.bf-junto { white-space: nowrap; }

.bf-kicker {
    margin: 0 0 0.9rem;
    font-family: var(--bf-display);
    font-size: var(--bf-t-mini);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bf-azul);
}

/* ------------------------------------------------------------
   5. Revelacao reversivel
   O estado oculto so existe sob html.js, entao sem JavaScript
   tudo nasce visivel. O observer alterna a classe na entrada e
   na saida, sem unobserve, e a animacao repete a cada passagem.
   ------------------------------------------------------------ */
html.js .bf-reveal {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: calc(var(--bf-atraso, 0) * 80ms);
    will-change: opacity, transform;
}
html.js .bf-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.js .bf-reveal {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0s;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------
   6. Botoes
   ------------------------------------------------------------ */
.bf-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 52px;
    padding: 0.85rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--bf-r-controle);
    background: var(--bf-azul);
    color: #fff;
    font-family: var(--bf-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--bf-transicao), transform var(--bf-transicao), box-shadow var(--bf-transicao);
}
.bf-action:hover {
    background: var(--bf-azul-fundo);
    color: #fff;
    transform: translateY(-2px);
}
.bf-action:active { transform: translateY(0); }

.bf-action .bf-action__glyph {
    width: 20px;
    height: 20px;
    flex: none;
}

.bf-action.bf-action--wa { background: var(--bf-verde); }
.bf-action.bf-action--wa:hover { background: var(--bf-verde-forte); }

.bf-action.bf-action--ghost {
    background: transparent;
    border-color: var(--bf-borda);
    color: var(--bf-azul);
}
.bf-action.bf-action--ghost:hover {
    background: var(--bf-azul-claro);
    border-color: var(--bf-azul);
    color: var(--bf-azul-fundo);
}

.bf-action.bf-action--light {
    background: #fff;
    color: var(--bf-azul-fundo);
}
.bf-action.bf-action--light:hover {
    background: var(--bf-azul-claro);
    color: var(--bf-azul-noite);
}

/* ------------------------------------------------------------
   7. Faixa de contato e cabecalho
   ------------------------------------------------------------ */
.bf-topbar {
    display: none;
    background: var(--bf-azul-noite);
    color: var(--bf-azul-tenue);
    font-size: 0.85rem;
}
.bf-topbar .bf-topbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.75rem;
    min-height: 40px;
}
.bf-topbar .bf-topbar__line { margin: 0; }
.bf-topbar .bf-topbar__link {
    color: #fff;
    font-weight: 500;
    text-decoration: none;
}
.bf-topbar .bf-topbar__link:hover { color: var(--bf-azul-tenue); text-decoration: underline; }

@media (min-width: 1000px) {
    .bf-topbar { display: block; }
}

.bf-masthead {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--bf-azul-fundo);
    transition: box-shadow var(--bf-transicao);
}
.bf-masthead.is-stuck { box-shadow: 0 10px 30px -18px rgba(7, 43, 71, 0.75); }

.bf-masthead .bf-masthead__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
    flex-wrap: wrap;
}

/* logo menor; o padding compensa a altura para o cabecalho nao encolher:
   128px tira 6,5px do logo (400x119), o padding devolve 3,3px por lado. */
.bf-masthead .bf-masthead__brand {
    display: inline-flex;
    align-items: center;
    padding-block: 1.155rem;
}
.bf-masthead .bf-masthead__brand img {
    width: 128px;
    height: auto;
}

.bf-masthead .bf-masthead__toggle {
    display: none;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: var(--bf-r-controle);
    background: transparent;
    color: #fff;
    font-family: var(--bf-display);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}
.bf-masthead .bf-masthead__bars {
    position: relative;
    width: 18px;
    height: 2px;
    background: currentColor;
}
.bf-masthead .bf-masthead__bars::before,
.bf-masthead .bf-masthead__bars::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform var(--bf-transicao);
}
.bf-masthead .bf-masthead__bars::before { top: -6px; }
.bf-masthead .bf-masthead__bars::after { top: 6px; }
.bf-masthead .bf-masthead__toggle[aria-expanded="true"] .bf-masthead__bars::before { transform: translateY(6px); }
.bf-masthead .bf-masthead__toggle[aria-expanded="true"] .bf-masthead__bars::after { transform: translateY(-6px); }
.bf-masthead .bf-masthead__toggle-text { line-height: 1; }

.bf-masthead .bf-masthead__nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 1.35rem;
    padding-bottom: 0.5rem;
}
.bf-masthead .bf-masthead__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 0.15rem;
    color: #fff;
    font-family: var(--bf-display);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color var(--bf-transicao), color var(--bf-transicao);
}
.bf-masthead .bf-masthead__link:hover {
    color: #fff;
    border-bottom-color: var(--bf-azul-brilho);
}
.bf-masthead .bf-masthead__cta {
    min-height: 46px;
    padding: 0.7rem 1.2rem;
    font-size: 0.96rem;
}

@media (min-width: 900px) {
    .bf-masthead .bf-masthead__row { flex-wrap: nowrap; }
    .bf-masthead .bf-masthead__nav { padding-bottom: 0; flex-wrap: nowrap; }
}

.bf-masthead .bf-masthead__close,
.bf-masthead .bf-masthead__overlay { display: none; }

@media (max-width: 899px) {
    html.js .bf-masthead .bf-masthead__toggle { display: inline-flex; }

    /* Acima do banner de consentimento (120), senao ele cobria o pe da gaveta.
       Fixo de proposito: trocado na abertura, junto com a trava de rolagem do
       html, o Chrome recriava a camada da gaveta e ela surgia sem deslizar
       (medido em 23/09/2026). Fechado, cabecalho e banner nem se encostam. */
    html.js .bf-masthead { z-index: 130; }

    /* Gaveta lateral: entra pela esquerda, 85vw, por cima da pagina. Fechada,
       continua no DOM fora da tela e com visibility hidden, que tira os links
       da ordem de Tab; o atraso do visibility deixa a saida animar inteira. */
    html.js .bf-masthead .bf-masthead__nav {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.15rem;
        width: 85vw;
        padding: 0.75rem 1.25rem 1.5rem;
        background: var(--bf-azul-fundo);
        box-shadow: 24px 0 48px -24px rgba(0, 0, 0, 0.6);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 320ms;
    }
    html.js .bf-masthead .bf-masthead__nav.is-open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
    }

    /* Veu 50% escuro fora da gaveta. Fechado, para de receber toque na hora,
       mesmo durante o fade de saida, para nao engolir o toque seguinte. */
    html.js .bf-masthead .bf-masthead__overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 320ms ease, visibility 0s linear 320ms;
    }
    html.js .bf-masthead .bf-masthead__nav.is-open + .bf-masthead__overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 320ms ease, visibility 0s;
    }

    /* Aberta, a pagina de tras nao rola. */
    html.js:has(.bf-masthead__nav.is-open) { overflow: hidden; }

    html.js .bf-masthead .bf-masthead__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        flex: none;
        width: 44px;
        height: 44px;
        margin-bottom: 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.32);
        border-radius: var(--bf-r-controle);
        background: transparent;
        color: #fff;
        cursor: pointer;
    }
    .bf-masthead .bf-masthead__cross { position: relative; width: 18px; height: 18px; }
    .bf-masthead .bf-masthead__cross::before,
    .bf-masthead .bf-masthead__cross::after {
        content: '';
        position: absolute;
        top: 8px;
        left: 0;
        width: 18px;
        height: 2px;
        background: currentColor;
    }
    .bf-masthead .bf-masthead__cross::before { transform: rotate(45deg); }
    .bf-masthead .bf-masthead__cross::after { transform: rotate(-45deg); }

    html.js .bf-masthead .bf-masthead__link {
        min-height: 52px;
        font-size: 1.1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .bf-masthead .bf-masthead__nav { width: 100%; flex-direction: column; align-items: stretch; }
    .bf-masthead .bf-masthead__cta { margin-top: 1rem; }
}

/* Movimento reduzido: a gaveta e o veu aparecem e somem sem transicao. O
   none cobre tambem o atraso do visibility, que a regra global nao zera. */
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
    html.js .bf-masthead .bf-masthead__nav,
    html.js .bf-masthead .bf-masthead__nav.is-open,
    html.js .bf-masthead .bf-masthead__overlay,
    html.js .bf-masthead .bf-masthead__nav.is-open + .bf-masthead__overlay { transition: none; }
}

/* ------------------------------------------------------------
   8. Hero
   A imagem e cover, sangrada e dissolvida no fundo por mascara,
   sem moldura, sem cartao e sem sombra.

   No desktop o alinhamento nao vem do CSS, vem do enquadramento da capa
   (`capa-hero`): no master de 1536 o casal comeca em x=880, 57,3% da
   largura, e a copy para em 50% da coluna, que e 50% da viewport porque a
   coluna e centrada. Sobra um corredor de 7,3% e e dentro dele que o veu
   nasce e morre inteiro. Nao troque o `center` horizontal do
   `object-position` por porcentagem: e ele que mantem foto e coluna no
   mesmo eixo em qualquer largura.
   ------------------------------------------------------------ */
.bf-hero {
    position: relative;
    overflow: clip;
    background: linear-gradient(180deg, #fff 0%, #fff 38%, var(--bf-azul-claro) 100%);
}

.bf-hero .bf-hero__body {
    position: relative;
    z-index: 2;
    max-width: 760px;
    /* Puxa a copy para dentro da cauda dissolvida da imagem. */
    margin-top: clamp(-3rem, -1.5rem - 3vw, -2rem);
    padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.bf-hero .bf-hero__title {
    font-size: var(--bf-t-mega);
    font-weight: 600;
    max-width: 14ch;
    margin-bottom: 1.25rem;
    color: var(--bf-azul-fundo);
}

.bf-hero .bf-hero__lead {
    max-width: 40ch;
    margin-bottom: 2rem;
    font-size: var(--bf-t-lead);
    color: var(--bf-tinta-suave);
}

.bf-hero .bf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.bf-hero .bf-hero__media {
    position: relative;
}
.bf-hero .bf-hero__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center 18%;
    /* A foto fica cheia ate 62% e so entao dissolve, com a cauda comprimida
       no fim da faixa. E dentro dessa cauda, com alfa de um digito, que a copy
       entra: da para ver a imagem atras do texto sem perder contraste. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0, 0, 0, 0.42) 89%, rgba(0, 0, 0, 0.12) 96%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0, 0, 0, 0.42) 89%, rgba(0, 0, 0, 0.12) 96%, transparent 100%);
}

/* No mobile a foto e faixa de topo sobre fundo claro e a copy vem abaixo
   dela, entao nao existe texto por cima da foto e nao existe veu. */
.bf-hero .bf-hero__veu { display: none; }

@media (min-width: 1024px) {
    /* O hero emenda com o cabecalho e o topo azuis; a pagina volta a ser
       clara na faixa de confianca, logo abaixo. */
    .bf-hero { background: var(--bf-azul-fundo); }

    .bf-hero .bf-hero__body {
        /* Volta a largura cheia da coluna: o teto de 760px e so do mobile, e
           aqui ele empurrava a copy para dentro, fora do eixo esquerdo do
           cabecalho e das secoes de baixo. Com a coluna centrada, o teto de
           50% dos filhos cai exatamente no meio da viewport em qualquer
           largura, que e o que o corredor do veu pressupoe. */
        max-width: var(--bf-largura);
        margin-top: 0;
        padding-block: clamp(3rem, 1.5rem + 4.5vw, 5.5rem);
        /* O teto de 720px nao e estetico: acima dele o hero fica mais
           estreito que 1,5:1 nas larguras baixas, o `cover` passa a escalar
           pela altura e o casal sai do eixo da coluna. */
        min-height: clamp(560px, 42vw, 720px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .bf-hero .bf-kicker { color: var(--bf-azul-tenue); }
    .bf-hero .bf-hero__title { color: #fff; }
    .bf-hero .bf-hero__lead { color: #dce9f3; }
    .bf-hero .bf-action--ghost {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.5);
        color: #fff;
    }
    .bf-hero .bf-action--ghost:hover {
        background: #fff;
        border-color: #fff;
        color: var(--bf-azul-fundo);
    }

    .bf-hero .bf-hero__media {
        position: absolute;
        inset: 0;
    }
    .bf-hero .bf-hero__media picture,
    .bf-hero .bf-hero__media img {
        width: 100%;
        height: 100%;
    }
    .bf-hero .bf-hero__media img {
        aspect-ratio: auto;
        /* Horizontal em `center` por regra da capa-hero. O 25% vertical
           deixa ar acima das cabecas e corta logo abaixo das maos. */
        object-position: center 25%;
        -webkit-mask-image: none;
        mask-image: none;
    }
    /* Opaco ate 59%, onde a copy acaba a 1280px, e zero em 63,5%, antes da
       contadora. Medido no render: a cadeira escura do fundo comeca em 52% e
       a contadora so em 64%, nao em 57% como o `montar` supos. 90deg de
       proposito: inclinado, o alfa zero anda 40px e invade o sujeito. */
    .bf-hero .bf-hero__veu {
        display: block;
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,
            rgba(9, 56, 93, 0.93) 0%,
            rgba(9, 56, 93, 0.86) 34%,
            rgba(9, 56, 93, 0.84) 54%,
            rgba(9, 56, 93, 0.76) 59%,
            rgba(9, 56, 93, 0.32) 61.5%,
            rgba(9, 56, 93, 0) 63.5%);
        pointer-events: none;
    }
}

/* ------------------------------------------------------------
   9. Faixa de confianca
   ------------------------------------------------------------ */
.bf-pledge {
    background: var(--bf-azul-claro);
    padding-block: clamp(2.75rem, 2rem + 3vw, 4rem);
    border-bottom: 1px solid var(--bf-borda);
}
.bf-pledge .bf-pledge__grid {
    display: grid;
    gap: 2rem;
}
.bf-pledge .bf-pledge__cell {
    padding-top: 1.25rem;
    border-top: 2px solid var(--bf-azul-brilho);
}
.bf-pledge .bf-pledge__cell:nth-child(2) { --bf-atraso: 1; }
.bf-pledge .bf-pledge__cell:nth-child(3) { --bf-atraso: 2; }

.bf-pledge .bf-pledge__mark {
    margin: 0 0 0.5rem;
    font-family: var(--bf-display);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bf-azul);
}
.bf-pledge .bf-pledge__head {
    font-size: var(--bf-t-media);
    margin-bottom: 0.55rem;
    color: var(--bf-azul-fundo);
}
.bf-pledge .bf-pledge__text {
    color: var(--bf-tinta-suave);
    font-size: 0.98rem;
}

@media (min-width: 820px) {
    .bf-pledge .bf-pledge__grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

/* ------------------------------------------------------------
   9b. Video institucional
   ------------------------------------------------------------ */
.bf-film { padding-block: var(--bf-espaco-secao) 0; }
.bf-film .bf-film__intro { max-width: 46rem; margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }
.bf-film .bf-film__title { font-size: var(--bf-t-grande); color: var(--bf-azul-fundo); }
.bf-film .bf-film__frame {
    --bf-atraso: 1;
    position: relative;
    margin: 0;
    border-radius: var(--bf-r-painel);
    overflow: hidden;
    background: var(--bf-azul-noite);
    box-shadow: 0 24px 60px -32px rgba(7, 43, 71, 0.55);
}
.bf-film .bf-film__player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
/* Capa: o script tira o hidden; [hidden] tem de vencer o grid. */
.bf-film .bf-film__cover { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; background: var(--bf-azul-noite); cursor: pointer; }
.bf-film .bf-film__cover[hidden] { display: none; }
.bf-film .bf-film__cover:focus-visible { outline-offset: -6px; }
.bf-film .bf-film__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bf-film .bf-film__play { position: relative; width: clamp(3.5rem, 2.9rem + 2.6vw, 5rem); aspect-ratio: 1; font-size: clamp(1.1rem, 0.95rem + 0.65vw, 1.5rem); border-radius: 50%; background: rgba(7, 43, 71, 0.78); box-shadow: 0 0 0 2px #fff; transition: background-color 0.2s; }
.bf-film .bf-film__play::before { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border: solid transparent; border-width: 0.6em 0 0.6em 1em; border-left-color: #fff; }
.bf-film .bf-film__cover:hover .bf-film__play, .bf-film .bf-film__cover:focus-visible .bf-film__play { background: var(--bf-azul-brilho); }

/* ------------------------------------------------------------
   10. Situacoes atendidas
   ------------------------------------------------------------ */
.bf-needs { padding-block: var(--bf-espaco-secao); }

.bf-needs .bf-needs__intro { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.bf-needs .bf-needs__title { font-size: var(--bf-t-grande); color: var(--bf-azul-fundo); margin-bottom: 1rem; }
.bf-needs .bf-needs__lead { font-size: var(--bf-t-lead); color: var(--bf-tinta-suave); }

.bf-needs .bf-needs__list {
    counter-reset: bfneeds;
    list-style: none;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
}
.bf-needs .bf-needs__entry {
    counter-increment: bfneeds;
    position: relative;
    padding: 1.75rem 0 1.75rem 3.5rem;
    border-top: 1px solid var(--bf-borda);
}
.bf-needs .bf-needs__entry:last-child { border-bottom: 1px solid var(--bf-borda); }
.bf-needs .bf-needs__entry:nth-child(2) { --bf-atraso: 1; }
.bf-needs .bf-needs__entry:nth-child(3) { --bf-atraso: 2; }
.bf-needs .bf-needs__entry:nth-child(4) { --bf-atraso: 3; }
.bf-needs .bf-needs__entry::before {
    content: counter(bfneeds, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1.75rem;
    font-family: var(--bf-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bf-azul-nitido);
    letter-spacing: 0.04em;
}
.bf-needs .bf-needs__head {
    font-size: var(--bf-t-media);
    color: var(--bf-azul-fundo);
    margin-bottom: 0.55rem;
    max-width: 30ch;
}
.bf-needs .bf-needs__text { color: var(--bf-tinta-suave); max-width: 62ch; }

@media (min-width: 900px) {
    .bf-needs .bf-needs__entry {
        display: grid;
        grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
        padding-left: 4rem;
    }
    .bf-needs .bf-needs__head { margin-bottom: 0; }
}

/* ------------------------------------------------------------
   11. Servicos
   ------------------------------------------------------------ */
.bf-services {
    position: relative;
    overflow: clip;
    background: var(--bf-papel-frio);
    border-block: 1px solid var(--bf-borda);
}

.bf-services .bf-services__media { position: relative; }
.bf-services .bf-services__media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center 26%;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.45) 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.45) 72%, transparent 100%);
}

.bf-services .bf-services__body {
    position: relative;
    z-index: 2;
    padding-block: clamp(2rem, 1rem + 4vw, 4rem) var(--bf-espaco-secao);
}
.bf-services .bf-services__intro { max-width: 42rem; margin-bottom: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); }
.bf-services .bf-services__title { font-size: var(--bf-t-grande); color: var(--bf-azul-fundo); margin-bottom: 1rem; }
.bf-services .bf-services__lead { color: var(--bf-tinta-suave); font-size: 1.03rem; max-width: 56ch; }

.bf-services .bf-services__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem 2.5rem;
}
.bf-services .bf-services__entry {
    padding-top: 1.1rem;
    border-top: 1px solid var(--bf-borda);
}
.bf-services .bf-services__entry:nth-child(2) { --bf-atraso: 1; }
.bf-services .bf-services__entry:nth-child(3) { --bf-atraso: 2; }
.bf-services .bf-services__entry:nth-child(4) { --bf-atraso: 1; }
.bf-services .bf-services__entry:nth-child(5) { --bf-atraso: 2; }
.bf-services .bf-services__entry:nth-child(6) { --bf-atraso: 3; }
.bf-services .bf-services__entry:nth-child(7) { --bf-atraso: 2; }
.bf-services .bf-services__head {
    font-size: 1.18rem;
    color: var(--bf-azul-fundo);
    margin-bottom: 0.4rem;
}
.bf-services .bf-services__text { color: var(--bf-tinta-suave); font-size: 0.98rem; }

@media (min-width: 700px) {
    .bf-services .bf-services__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .bf-services .bf-services__media {
        position: absolute;
        inset: 0 0 0 54%;
    }
    .bf-services .bf-services__media picture,
    .bf-services .bf-services__media img { width: 100%; height: 100%; }
    .bf-services .bf-services__media img {
        aspect-ratio: auto;
        object-position: 96% 50%;
        -webkit-mask-image: linear-gradient(95deg, transparent 0%, rgba(0, 0, 0, 0.4) 22%, #000 52%);
        mask-image: linear-gradient(95deg, transparent 0%, rgba(0, 0, 0, 0.4) 22%, #000 52%);
    }
    .bf-services .bf-services__body { padding-block: var(--bf-espaco-secao); }
    .bf-services .bf-services__intro,
    .bf-services .bf-services__list { max-width: 50%; }
    .bf-services .bf-services__list { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

/* ------------------------------------------------------------
   12. Historia
   ------------------------------------------------------------ */
.bf-story { padding-block: var(--bf-espaco-secao); }
.bf-story .bf-story__grid { display: grid; gap: 2rem; }
.bf-story .bf-story__title { font-size: var(--bf-t-grande); color: var(--bf-azul-fundo); max-width: 16ch; }
.bf-story .bf-story__text { --bf-atraso: 1; max-width: 62ch; color: var(--bf-tinta-suave); }
.bf-story .bf-story__text p { margin-bottom: 1.15rem; }
.bf-story .bf-story__text p:first-child {
    font-size: var(--bf-t-lead);
    color: var(--bf-tinta);
}
.bf-story .bf-story__text strong { color: var(--bf-azul); font-weight: 600; }

@media (min-width: 950px) {
    .bf-story .bf-story__grid {
        grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
        gap: 4rem;
        align-items: start;
    }
    .bf-story .bf-story__aside { position: sticky; top: 120px; }
}

/* ------------------------------------------------------------
   13. Como funciona
   ------------------------------------------------------------ */
.bf-path {
    background: var(--bf-azul-fundo);
    color: #fff;
    padding-block: var(--bf-espaco-secao);
}
.bf-path .bf-kicker { color: var(--bf-azul-aceso); }
.bf-path .bf-path__intro { max-width: 34rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.bf-path .bf-path__title { font-size: var(--bf-t-grande); color: #fff; }

.bf-path .bf-path__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2.25rem;
}
.bf-path .bf-path__entry {
    padding-top: 1.25rem;
    border-top: 2px solid rgba(255, 255, 255, 0.22);
}
.bf-path .bf-path__entry:nth-child(2) { --bf-atraso: 1; }
.bf-path .bf-path__entry:nth-child(3) { --bf-atraso: 2; }
.bf-path .bf-path__num {
    margin: 0 0 0.75rem;
    font-family: var(--bf-display);
    font-size: 2.4rem;
    font-weight: 300;
    line-height: 1;
    color: var(--bf-azul-aceso);
}
.bf-path .bf-path__head { font-size: var(--bf-t-media); color: #fff; margin-bottom: 0.55rem; }
.bf-path .bf-path__text { color: var(--bf-azul-tenue); }

@media (min-width: 820px) {
    .bf-path .bf-path__list { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

/* ------------------------------------------------------------
   14. Formulario
   ------------------------------------------------------------ */
.bf-lead { padding-block: var(--bf-espaco-secao); background: var(--bf-azul-claro); }
.bf-lead .bf-lead__grid { display: grid; gap: 2.5rem; }
.bf-lead .bf-lead__aside { min-width: 0; }
.bf-lead .bf-lead__title { font-size: var(--bf-t-grande); color: var(--bf-azul-fundo); margin-bottom: 1rem; max-width: 18ch; }
.bf-lead .bf-lead__text { color: var(--bf-tinta-suave); max-width: 46ch; }
.bf-lead .bf-lead__facts {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    font-size: 0.98rem;
    color: var(--bf-tinta-suave);
}
.bf-lead .bf-lead__facts a { font-weight: 600; }

.bf-lead .bf-lead__panel {
    --bf-atraso: 1;
    background: #fff;
    border: 1px solid var(--bf-borda);
    border-radius: var(--bf-r-painel);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.bf-lead .bf-lead__noscript {
    margin-bottom: 1.5rem;
    padding: 1rem 1.15rem;
    border-left: 3px solid var(--bf-azul);
    background: var(--bf-azul-claro);
    font-size: 0.95rem;
}

.bf-lead .bf-lead__form { display: grid; gap: 1.15rem; }
.bf-lead .bf-lead__field { display: grid; gap: 0.4rem; }
.bf-lead .bf-lead__label {
    font-family: var(--bf-display);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--bf-azul-fundo);
}
.bf-lead .bf-lead__opt { font-weight: 400; color: var(--bf-tinta-suave); }

.bf-lead .bf-lead__input {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--bf-borda);
    border-radius: var(--bf-r-controle);
    background: var(--bf-papel-frio);
    color: var(--bf-tinta);
    font-family: var(--bf-corpo);
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color var(--bf-transicao), background-color var(--bf-transicao);
}
.bf-lead .bf-lead__input:hover { border-color: #b9cede; }
.bf-lead .bf-lead__input:focus { background: #fff; border-color: var(--bf-azul); }
.bf-lead .bf-lead__input.is-invalid { border-color: #a4262c; background: #fdf4f4; }

.bf-lead .bf-lead__select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--bf-azul) 50%), linear-gradient(135deg, var(--bf-azul) 50%, transparent 50%);
    background-position: right 1.15rem center, right 0.85rem center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.4rem;
}
.bf-lead .bf-lead__area { min-height: 96px; resize: vertical; }

.bf-lead .bf-lead__error {
    margin: 0;
    font-size: 0.87rem;
    font-weight: 500;
    color: #a4262c;
}
.bf-lead .bf-lead__error[hidden] { display: none; }

.bf-lead .bf-lead__trap {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.bf-lead .bf-lead__consent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.9rem 1rem;
    border: 1px solid var(--bf-borda);
    border-radius: var(--bf-r-controle);
    background: var(--bf-papel-frio);
}
.bf-lead .bf-lead__check {
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    accent-color: var(--bf-azul);
    flex: none;
    cursor: pointer;
}
.bf-lead .bf-lead__check.is-invalid {
    outline: 2px solid #a4262c;
    outline-offset: 3px;
}
.bf-lead .bf-lead__consent-text {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--bf-tinta-suave);
    cursor: pointer;
}

.bf-lead .bf-lead__submit { width: 100%; }
.bf-lead .bf-lead__status {
    margin: 0.75rem 0 0;
    min-height: 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bf-azul-fundo);
}

@media (min-width: 640px) {
    .bf-lead .bf-lead__form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1.25rem; }
    .bf-lead .bf-lead__field.bf-lead__field--wide { grid-column: 1 / -1; }
    .bf-lead .bf-lead__submit { width: auto; min-width: 20rem; }
}

@media (min-width: 980px) {
    .bf-lead .bf-lead__grid {
        grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
        gap: 4rem;
        align-items: start;
    }
}

/* ------------------------------------------------------------
   15. Atendimento local
   ------------------------------------------------------------ */
.bf-local { padding-block: var(--bf-espaco-secao); background: var(--bf-papel-frio); }
.bf-local .bf-local__intro { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: 46rem; }
.bf-local .bf-local__title { font-size: var(--bf-t-grande); color: var(--bf-azul-fundo); margin-bottom: 1rem; }
.bf-local .bf-local__lead { color: var(--bf-tinta-suave); font-size: 1.03rem; max-width: 58ch; }

.bf-local .bf-local__layout { display: grid; gap: 1.75rem; }

/* mapa: iframe do Google, carregado com a pagina em loading lazy */
.bf-local .bf-local__map {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 22rem;
    border: 1px solid var(--bf-borda);
    border-radius: var(--bf-r-painel);
    background: var(--bf-azul-claro);
    overflow: hidden;
}
.bf-local .bf-local__frame { flex: 1; display: block; width: 100%; min-height: 22rem; border: 0; }
.bf-local .bf-local__mapcaption { padding: 0.85rem 1.15rem; border-top: 1px solid var(--bf-borda); font-size: 0.92rem; }
.bf-local .bf-local__mapcaption a { font-weight: 600; }

.bf-local .bf-local__card {
    --bf-atraso: 1;
    padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    border: 1px solid var(--bf-borda);
    border-radius: var(--bf-r-painel);
    background: #fff;
    box-shadow: 0 22px 48px -32px rgba(9, 56, 93, 0.55);
}
.bf-local .bf-local__cardhead { font-size: var(--bf-t-media); color: var(--bf-azul-fundo); margin-bottom: 1.25rem; }
.bf-local .bf-local__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1.1rem; }
.bf-local .bf-local__item {
    display: grid;
    grid-template-columns: 1.9rem 1fr;
    gap: 0.85rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--bf-borda);
}
.bf-local .bf-local__item:first-child { padding-top: 0; border-top: 0; }
.bf-local .bf-local__glyph { width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; color: var(--bf-azul); }
.bf-local .bf-local__head {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bf-azul);
    margin-bottom: 0.35rem;
}
.bf-local .bf-local__text { color: var(--bf-tinta); line-height: 1.75; }
.bf-local .bf-local__text a { font-weight: 500; }
.bf-local .bf-local__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.bf-local .bf-local__cta { flex: 1 1 14rem; justify-content: center; }

.bf-local .bf-local__modes {
    list-style: none;
    margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
    padding: 0;
    display: grid;
    gap: 1.5rem 2.5rem;
}
.bf-local .bf-local__mode { padding-top: 1.1rem; border-top: 2px solid var(--bf-azul-brilho); }
.bf-local .bf-local__mode:nth-child(2) { --bf-atraso: 1; }
.bf-local .bf-local__mode:nth-child(3) { --bf-atraso: 2; }
.bf-local .bf-local__modehead { font-size: 1.18rem; color: var(--bf-azul-fundo); margin-bottom: 0.4rem; }
.bf-local .bf-local__mode .bf-local__text { color: var(--bf-tinta-suave); font-size: 0.98rem; line-height: 1.7; }

@media (min-width: 700px) {
    .bf-local .bf-local__modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
    .bf-local .bf-local__layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2.5rem; }
    .bf-local .bf-local__map { min-height: 30rem; }
    .bf-local .bf-local__frame { min-height: 26rem; }
}

/* ------------------------------------------------------------
   16. Perguntas frequentes, acordeao nativo, zero JavaScript
   ------------------------------------------------------------ */
.bf-faq {
    padding-block: var(--bf-espaco-secao);
    background: var(--bf-papel-frio);
    border-block: 1px solid var(--bf-borda);
}
.bf-faq .bf-faq__grid { display: grid; gap: 2.25rem; }
.bf-faq .bf-faq__aside { min-width: 0; }
.bf-faq .bf-faq__title { font-size: var(--bf-t-grande); color: var(--bf-azul-fundo); max-width: 16ch; }
.bf-faq .bf-faq__list { --bf-atraso: 1; }

.bf-faq .bf-faq__entry { border-top: 1px solid var(--bf-borda); }
.bf-faq .bf-faq__entry:last-child { border-bottom: 1px solid var(--bf-borda); }

.bf-faq .bf-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 56px;
    padding-block: 1.05rem;
    font-family: var(--bf-display);
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--bf-azul-fundo);
    cursor: pointer;
    list-style: none;
    transition: color var(--bf-transicao);
}
.bf-faq .bf-faq__q::-webkit-details-marker { display: none; }
.bf-faq .bf-faq__q:hover { color: var(--bf-azul); }
.bf-faq .bf-faq__q::after {
    content: '';
    flex: none;
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--bf-azul-brilho);
    border-bottom: 2px solid var(--bf-azul-brilho);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--bf-transicao);
}
.bf-faq .bf-faq__entry[open] .bf-faq__q::after {
    transform: rotate(-135deg) translate(-3px, -3px);
}
.bf-faq .bf-faq__a {
    padding-bottom: 1.35rem;
    max-width: 68ch;
    color: var(--bf-tinta-suave);
}

@media (min-width: 950px) {
    .bf-faq .bf-faq__grid {
        grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
        gap: 4rem;
        align-items: start;
    }
}

/* ------------------------------------------------------------
   17. Chamada final sobre imagem sangrada
   ------------------------------------------------------------ */
.bf-finale {
    position: relative;
    overflow: clip;
    background: var(--bf-azul-fundo);
    color: #fff;
    isolation: isolate;
}
.bf-finale .bf-finale__media { position: absolute; inset: 0; z-index: -1; }
.bf-finale .bf-finale__media picture,
.bf-finale .bf-finale__media img { width: 100%; height: 100%; }
.bf-finale .bf-finale__media img {
    object-fit: cover;
    object-position: center top;
}
.bf-finale .bf-finale__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(103deg, rgba(9, 56, 93, 0.97) 0%, rgba(9, 56, 93, 0.95) 46%, rgba(9, 56, 93, 0.72) 72%, rgba(9, 56, 93, 0.5) 100%);
}

/* Parallax: a foto fica presa na viewport e a secao vira uma janela.
   Nao e `background-attachment: fixed`, que o iOS ignora. O truque e o
   `clip-path`: ele recorta o descendente fixo sem virar bloco de
   contencao dele, e e isso que mantem a foto parada. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .bf-finale { clip-path: inset(0); }
    .bf-finale .bf-finale__media { position: fixed; }
}

.bf-finale .bf-finale__body {
    padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
    max-width: 40rem;
}
.bf-finale .bf-finale__title { font-size: var(--bf-t-grande); color: #fff; margin-bottom: 1rem; max-width: 18ch; }
.bf-finale .bf-finale__text { color: #e2eef7; font-size: var(--bf-t-lead); margin-bottom: 2rem; max-width: 44ch; }
.bf-finale .bf-finale__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2rem; }
.bf-finale .bf-finale__alt {
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}
.bf-finale .bf-finale__alt:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}
.bf-finale .bf-finale__note { font-size: 0.85rem; color: var(--bf-azul-tenue); max-width: 44ch; }

/* ------------------------------------------------------------
   18. Rodape
   ------------------------------------------------------------ */
.bf-sitefoot {
    background: var(--bf-azul-noite);
    color: var(--bf-azul-tenue);
    padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 1.5rem;
    font-size: 0.95rem;
}
.bf-sitefoot .bf-sitefoot__grid {
    display: grid;
    gap: 2.25rem;
    padding-bottom: 2.5rem;
}
.bf-sitefoot .bf-sitefoot__cell { min-width: 0; }
.bf-sitefoot .bf-sitefoot__logo { width: 160px; height: auto; margin-bottom: 1.15rem; }
.bf-sitefoot .bf-sitefoot__head {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0.85rem;
}
.bf-sitefoot .bf-sitefoot__text { margin-bottom: 0.9rem; line-height: 1.7; }
.bf-sitefoot .bf-sitefoot__text a { color: #fff; text-decoration: none; }
.bf-sitefoot .bf-sitefoot__text a:hover { color: var(--bf-azul-tenue); text-decoration: underline; }

.bf-sitefoot .bf-sitefoot__prefs {
    min-height: 44px;
    padding: 0.6rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--bf-r-controle);
    background: transparent;
    color: #fff;
    font-family: var(--bf-display);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--bf-transicao);
}
.bf-sitefoot .bf-sitefoot__prefs:hover { background: rgba(255, 255, 255, 0.12); }
.bf-sitefoot .bf-sitefoot__prefs[hidden] { display: none; }

.bf-sitefoot .bf-sitefoot__base {
    display: grid;
    gap: 0.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.bf-sitefoot .bf-sitefoot__fine { margin: 0; font-size: 0.82rem; line-height: 1.6; }

@media (min-width: 760px) {
    .bf-sitefoot .bf-sitefoot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
}
@media (min-width: 1040px) {
    .bf-sitefoot .bf-sitefoot__grid { grid-template-columns: 1.4fr 1fr 1.1fr 1fr; }
}

/* ------------------------------------------------------------
   19. Botao flutuante do WhatsApp
   ------------------------------------------------------------ */
.bf-float {
    position: fixed;
    right: clamp(0.9rem, 0.4rem + 1.6vw, 1.75rem);
    bottom: clamp(0.9rem, 0.4rem + 1.6vw, 1.75rem);
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 52px;
    padding: 0.8rem 1.25rem;
    border-radius: var(--bf-r-pilula);
    background: var(--bf-verde);
    color: #fff;
    font-family: var(--bf-display);
    font-size: 0.98rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 14px 30px -14px rgba(6, 60, 55, 0.85);
    transition: background-color var(--bf-transicao), transform var(--bf-transicao), opacity var(--bf-transicao);
}
.bf-float:hover { background: var(--bf-verde-forte); color: #fff; transform: translateY(-2px); }
.bf-float .bf-float__glyph { width: 22px; height: 22px; flex: none; }

@media (max-width: 520px) {
    .bf-float .bf-float__text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .bf-float { padding: 0.9rem; min-width: 56px; justify-content: center; }
}

/* ------------------------------------------------------------
   20. Banner de consentimento
   Guarda apenas a decisao essencial. Sem analytics, sem pixel,
   sem cookie de terceiro; aceitar e recusar tem o mesmo peso.
   ------------------------------------------------------------ */
.bf-consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 120;
    display: flex;
    justify-content: flex-start;
    padding: clamp(0.75rem, 0.4rem + 1.4vw, 1.5rem);
    pointer-events: none;
}
.bf-consent[hidden] { display: none; }

.bf-consent .bf-consent__panel {
    pointer-events: auto;
    width: 100%;
    max-width: 44rem;
    padding: 1.35rem 1.5rem;
    background: #fff;
    border: 1px solid var(--bf-borda);
    border-radius: var(--bf-r-painel);
    box-shadow: 0 22px 48px -24px rgba(9, 56, 93, 0.55);
}
.bf-consent .bf-consent__title {
    font-size: 1.12rem;
    color: var(--bf-azul-fundo);
    margin-bottom: 0.6rem;
}
.bf-consent .bf-consent__text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--bf-tinta-suave);
    margin-bottom: 1.15rem;
}
.bf-consent .bf-consent__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.bf-consent .bf-consent__btn {
    flex: 1 1 8.5rem;
    gap: 0.28em; /* o " tudo" e item flex: o gap faz o papel do espaco */
    min-height: 48px;
    padding-inline: 0.75rem;
    font-size: 0.95rem;
}

/* Recusar e Preferencias discretos (14/10/2026): fundo do painel, so borda e texto na cor. */
.bf-consent .bf-consent__curto { display: none; }
.bf-consent .bf-consent__btn--discreto, .bf-consent .bf-consent__btn--discreto:hover { background: #fff; border-color: var(--bf-azul); color: var(--bf-azul); }
.bf-consent .bf-consent__prefs {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--bf-borda);
}
.bf-consent .bf-consent__prefs[hidden] { display: none; }
.bf-consent .bf-consent__opt {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-height: 44px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--bf-tinta-suave);
    cursor: pointer;
}
.bf-consent .bf-consent__opt strong { color: var(--bf-tinta); }
.bf-consent .bf-consent__check {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--bf-azul);
}

@media (max-width: 719px) {
    body:has(#bf-consent:not([hidden])) .bf-float { opacity: 0; visibility: hidden; }
}

/* ------------------------------------------------------------
   21. Paginas legais
   ------------------------------------------------------------ */
.bf-legal { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--bf-espaco-secao); }

.bf-legal .bf-legal__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}
.bf-legal .bf-legal__tab {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.55rem 1.05rem;
    border: 1px solid var(--bf-borda);
    border-radius: var(--bf-r-pilula);
    color: var(--bf-azul);
    font-family: var(--bf-display);
    font-size: 0.94rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--bf-transicao), border-color var(--bf-transicao);
}
.bf-legal .bf-legal__tab:hover { background: var(--bf-azul-claro); border-color: var(--bf-azul); }
.bf-legal .bf-legal__tab.bf-legal__tab--current {
    background: var(--bf-azul-fundo);
    border-color: var(--bf-azul-fundo);
    color: #fff;
}

.bf-legal .bf-legal__title { font-size: var(--bf-t-grande); color: var(--bf-azul-fundo); margin-bottom: 1rem; max-width: 20ch; }
.bf-legal .bf-legal__intro { font-size: var(--bf-t-lead); color: var(--bf-tinta-suave); max-width: 62ch; margin-bottom: 1.5rem; }
.bf-legal .bf-legal__stamp {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: var(--bf-r-pilula);
    background: var(--bf-azul-claro);
    color: var(--bf-azul-fundo);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 2.5rem;
}

.bf-legal .bf-legal__body { max-width: 68ch; }
.bf-legal .bf-legal__head {
    font-size: var(--bf-t-media);
    color: var(--bf-azul-fundo);
    margin: 2.5rem 0 0.85rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bf-borda);
}
.bf-legal .bf-legal__body ul,
.bf-legal .bf-legal__body ol {
    margin: 0 0 1rem;
    padding-left: 1.2rem;
    color: var(--bf-tinta-suave);
}
.bf-legal .bf-legal__body li { margin-bottom: 0.5rem; }
.bf-legal .bf-legal__body p { color: var(--bf-tinta-suave); }

@media(min-width:1024px){
/* altura e padding do hero moram no bloco principal, com o teto de 720px que mantem o hero mais largo que 1,5:1 */
/* teto de 50%: a copy nao cruza o eixo, metade de la e do sujeito */
.bf-hero .bf-hero__title{max-width:60%;font-size:clamp(3.22rem,4.7vw,4.2rem)}
.bf-hero .bf-hero__lead{max-width:min(40ch,50%)}}
@media(min-width:1100px){.bf-services .bf-services__media{left:58%}.bf-services .bf-services__media img{object-position:96% 50%}}
@media(max-width:1023px){.bf-hero .bf-hero__media img{aspect-ratio:16/9;max-height:380px}.bf-hero .bf-hero__body{margin-top:-3rem;padding-top:2rem}}
@media(max-width:640px){
.bf-hero .bf-hero__media img{aspect-ratio:16/11;max-height:300px}
.bf-hero .bf-hero__title{font-size:clamp(2.1rem,10.3vw,2.85rem);line-height:1.08}
.bf-services .bf-services__media img{aspect-ratio:16/8.5;max-height:260px}
.bf-consent{padding:.5rem}.bf-consent .bf-consent__panel{padding:.75rem}.bf-consent .bf-consent__title,.bf-consent .bf-consent__longo,.bf-consent .bf-consent__extra{display:none}
.bf-consent .bf-consent__curto{display:inline}.bf-consent .bf-consent__text{font-size:.8rem;line-height:1.4;margin-bottom:.6rem}
.bf-consent .bf-consent__actions{flex-wrap:nowrap;gap:.4rem}.bf-consent .bf-consent__actions .bf-consent__btn{flex:1 1 0;min-width:0;min-height:42px;padding-inline:.3rem;font-size:.82rem;white-space:nowrap}}
.bf-legal .bf-legal__body strong { color: var(--bf-tinta); font-weight: 600; }

.bf-legal .bf-legal__body code {
    padding: 0.1em 0.4em;
    border-radius: 4px;
    background: var(--bf-azul-claro);
    color: var(--bf-azul-fundo);
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.9em;
}

.bf-legal .bf-legal__table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5rem;
    font-size: 0.94rem;
}
.bf-legal .bf-legal__table th,
.bf-legal .bf-legal__table td {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--bf-borda);
    text-align: left;
    vertical-align: top;
    color: var(--bf-tinta-suave);
}
.bf-legal .bf-legal__table th {
    background: var(--bf-azul-claro);
    color: var(--bf-azul-fundo);
    font-family: var(--bf-display);
    font-weight: 600;
}