/* ==========================================================================
   BMUP — Base
   Goweb Site Manager 8
   --------------------------------------------------------------------------
   1. Fontes
   2. Tokens
   3. Reset
   4. Tipografia
   5. Layout
   6. Botoes
   7. Formularios
   8. Utilitarios
   ========================================================================== */


/* ==========================================================================
   1. FONTES
   FONTES DO SISTEMA — nao se carrega nenhuma. Medido a 2026-09-10.

   O prototipo nao carrega fonte nenhuma: o src/styles/fonts.css tem 0 bytes.
   Escreve pilhas genericas, e o browser resolve-as com o que a maquina tem.

   Medi o titulo do banner e um paragrafo no prototipo a correr, comparando a
   largura real do texto com a de cada candidata ao mesmo tamanho e peso:

     titulo   890.06px  ->  Georgia   890.06   (Cambria 855.96, Times 807.77)
     corpo    393.89px  ->  Segoe UI  393.89   (Arial 420.20, Jost 370.49)

   E no Figma, num Mac, a designer ve "SF Pro" nos textos. Segoe UI e SF Pro
   sao a MESMA instrucao — system-ui — em sistemas diferentes. E essa diferenca
   que prova que sao fontes de sistema e nao uma escolha por nomear.

   CONSEQUENCIA, que e preciso saber: o site fica com aspecto diferente
   conforme a maquina. Georgia + Segoe UI no Windows, Times/New York + SF Pro
   no Mac, Noto + Roboto no Android. E o que o desenho faz — replicamo-lo.

   ATE 2026-09-10 tinhamos aqui a Junge nos titulos e a Jost no corpo, vindas
   de uma exportacao de 14 de agosto do desenho ANTIGO, em ingles. Nao eram as
   fontes deste desenho. Passou despercebido nas revisoes porque o comparador
   media a familia da fonte mas nunca a comparava — ja corrigido no
   ferramentas/resumo.py.

   Se um dia se quiser fixar as fontes (para o site ser igual em todo o lado),
   e preciso o designer escolher duas e voltar a por @font-face aqui. Mudar
   so as duas variaveis da seccao 2 chega — nenhuma regra do site nomeia
   fontes.
   ========================================================================== */



/* ==========================================================================
   2. TOKENS
   ========================================================================== */

:root {
    /* --- Marca --- */
    --bmup-cobre:            #ac7450;
    --bmup-cobre-escuro:     #8a5d40;
    --bmup-cobre-medio:      #925f3f;
    --bmup-cobre-claro:      #e6a87c;

    /* --- Tinta e superficies --- */
    --bmup-preto:            #0a0a0a;
    --bmup-preto-botao:      #161616;
    --bmup-branco:           #ffffff;
    --bmup-pedra:            #fafaf9;  /* stone-50  — seccoes claras do site publico */
    --bmup-pedra-100:        #f5f5f4;  /* stone-100 — bordas das seccoes claras */
    --bmup-pedra-200:        #e7e5e4;  /* stone-200 — bordas dos cartoes claros */
    --bmup-nevoa:            #f8f9fa;  /* fundo da area de membro */

    /* --- Escala de cinzas --- */
    --bmup-cinza-50:         #fafafa;
    --bmup-cinza-100:        #f4f4f5;
    --bmup-cinza-200:        #e4e4e7;
    --bmup-cinza-300:        #d4d4d8;
    --bmup-cinza-400:        #a1a1aa;
    --bmup-cinza-500:        #71717a;
    --bmup-cinza-600:        #52525b;
    --bmup-cinza-700:        #3f3f46;
    --bmup-cinza-800:        #27272a;
    --bmup-cinza-900:        #18181b;

    /* --- Estado --- */
    --bmup-verde:            #16a34a;
    --bmup-ambar:            #d97706;
    --bmup-vermelho:         #dc2626;

    /* --- Tipografia --- */
    /* IGUAIS AS DO PROTOTIPO, caracter a caracter. Ver a nota da seccao 1. */
    --bmup-font-titulo:      ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    --bmup-font-corpo:       ui-sans-serif, system-ui, sans-serif;

    /* Nada acima de 700. O prototipo nao passa dos 700 em lado nenhum, e as
       fontes de sistema tambem nao dao mais sem o browser falsificar. */
    --bmup-peso-light:       300;
    --bmup-peso-normal:      400;
    --bmup-peso-medio:       500;
    --bmup-peso-semi:        600;
    --bmup-peso-forte:       700;

    /* Escala de tamanhos — fluida, sem media queries */
    --bmup-t-xs:             0.75rem;
    --bmup-t-sm:             0.875rem;
    --bmup-t-base:           1rem;
    --bmup-t-lg:             1.125rem;
    --bmup-t-xl:             1.25rem;
    --bmup-t-2xl:            1.5rem;
    --bmup-t-3xl:            clamp(1.75rem, 3vw, 1.875rem);
    --bmup-t-4xl:            clamp(1.875rem, 4vw, 2.25rem);
    --bmup-t-5xl:            clamp(2.25rem, 6vw, 3rem);
    --bmup-t-hero:           clamp(2.75rem, 7vw, 5rem);

    /* Entrelinha de cada tamanho. O Tailwind do Figma da a cada tamanho a sua
       (12px lê-se a 16px, 14px a 20px), e nao uma entrelinha global. Eu tinha
       1.65 para tudo: o texto pequeno ficava solto e os titulos pequenos
       ficavam apertados. */
    --bmup-lh-xs:            1.3333;
    --bmup-lh-sm:            1.4286;
    --bmup-lh-base:          1.5;
    --bmup-lh-lg:            1.5556;
    --bmup-lh-xl:            1.4;
    --bmup-lh-2xl:           1.3333;
    --bmup-lh-3xl:           1.2;
    --bmup-lh-4xl:           1.1111;
    --bmup-lh-5xl:           1;
    --bmup-lh-hero:          1;

    /* --- Espacamento ---
       Os numeros sao os passos do Tailwind usado no Figma: e-6 e o "6" do
       design (1.5rem), e-8 e o "8" (2rem). Antes a escala era minha e saltava
       o 5 e o 7, por isso um "mb-5" do design virava 1rem e um "mb-7" virava
       2rem — arredondamentos silenciosos espalhados pelas paginas. */
    --bmup-e-0-5:            0.125rem;
    --bmup-e-1:              0.25rem;
    --bmup-e-2:              0.5rem;
    --bmup-e-2-5:            0.625rem;
    --bmup-e-3:              0.75rem;
    --bmup-e-4:              1rem;
    --bmup-e-5:              1.25rem;
    --bmup-e-6:              1.5rem;
    --bmup-e-7:              1.75rem;
    --bmup-e-8:              2rem;
    --bmup-e-10:             2.5rem;
    --bmup-e-12:             3rem;
    --bmup-e-16:             4rem;
    --bmup-e-24:             6rem;

    /* --- Raios --- */
    /* Site publico anguloso, area de membro arredondada. Contraste deliberado.
       Valores alinhados com a escala do Tailwind v4 usada no Figma:
       rounded-sm 4px | rounded-lg 8px | rounded-xl 12px | rounded-2xl 16px | rounded-3xl 24px */
    --bmup-raio-nulo:        4px;
    --bmup-raio-sm:          8px;
    --bmup-raio-md:          12px;
    --bmup-raio-lg:          16px;
    --bmup-raio-xl:          24px;
    --bmup-raio-total:       999px;

    /* --- Sombras --- */
    --bmup-sombra-sm:        0 1px 2px rgba(10, 10, 10, .06);
    --bmup-sombra-md:        0 4px 16px -6px rgba(10, 10, 10, .12);
    --bmup-sombra-lg:        0 16px 48px -16px rgba(10, 10, 10, .28);
    --bmup-sombra-cobre:     0 8px 24px -10px rgba(172, 116, 80, .45);

    /* --- Medidas --- */
    --bmup-largura-max:      1280px;
    --bmup-largura-texto:    65ch;
    --bmup-altura-header:    88px;

    /* --- Transicoes --- */
    --bmup-trans:            180ms cubic-bezier(.4, 0, .2, 1);
    --bmup-trans-lenta:      500ms cubic-bezier(.4, 0, .2, 1);
}


/* ==========================================================================
   3. RESET
   Escopado a .bmup para nao afectar o que o backoffice ja estiliza.
   ========================================================================== */

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

.bmup {
    margin: 0;
    background: var(--bmup-preto);
    color: var(--bmup-cinza-300);
    font-family: var(--bmup-font-corpo);
    font-size: var(--bmup-t-base);
    /* 400, nao 300: o design so aligeira onde escreve font-light, e eu tinha
       aligeirado tudo de uma vez. Fazia o site inteiro parecer mais fraco. */
    font-weight: var(--bmup-peso-normal);
    line-height: var(--bmup-lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.bmup img,
.bmup svg,
.bmup video { display: block; max-width: 100%; height: auto; }

.bmup ::selection { background: var(--bmup-cobre); color: var(--bmup-branco); }


/* ==========================================================================
   4. TIPOGRAFIA
   ========================================================================== */

/* O :where() zera a especificidade, pela mesma razao que esta explicada na
   regra dos links, mais abaixo — e que aqui tinha ficado por aplicar.
   ".bmup h2" e (0,1,1) e vencia ".bmup-plano__nome" (0,1,0) mesmo estando
   antes no ficheiro: um nome de plano ficava com o tamanho generico de h2.
   O mesmo com ".bmup p", que apagava o "margin: 0 auto" de todos os
   paragrafos centrados e os encostava a esquerda. Sao reposicoes: tem de
   perder para qualquer classe. */
:where(.bmup) :where(h1, h2, h3, h4) {
    font-family: var(--bmup-font-titulo);
    /* 500, nao 400: e o peso base dos titulos no desenho (theme.css do
       prototipo, --font-weight-medium). Esteve a 400 enquanto a serifada foi a
       Junge, que so tem um peso — ver a nota das fontes na seccao 1. */
    font-weight: var(--bmup-peso-medio);
    text-wrap: balance;
    margin: 0;
    color: var(--bmup-branco);
}

:where(.bmup) :where(h1) { font-size: var(--bmup-t-hero); line-height: var(--bmup-lh-hero); }
:where(.bmup) :where(h2) { font-size: var(--bmup-t-4xl); line-height: var(--bmup-lh-4xl); }
:where(.bmup) :where(h3) { font-size: var(--bmup-t-xl);  line-height: var(--bmup-lh-xl); }
:where(.bmup) :where(h4) { font-size: var(--bmup-t-lg);  line-height: var(--bmup-lh-lg); }

:where(.bmup) :where(p) { margin: 0; }

/* Texto que so os leitores de ecra veem. Serve para rotular campos que o
   desenho deixa sem etiqueta visivel — a pesquisa do cabecalho da area de
   membro, por exemplo. Um input sem rotulo nao se anuncia. */
.bmup-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* O reset achatava tambem o <b> e o <strong>. Sao 3 numeros nos indicadores da
   homepage — "15+", "300+", "98%" — que o desenho tem a 700. */
:where(.bmup) :where(b, strong) { font-weight: var(--bmup-peso-forte); }

/* O :where() zera a especificidade deste reset.
   Sem ele, ".bmup a" (0,1,1) vencia ".bmup-btn--branco" (0,1,0) e os botoes
   que sao <a> herdavam a cor do corpo em vez da sua. */
:where(.bmup) :where(a) {
    color: inherit;
    text-decoration: none;
    transition: color var(--bmup-trans);
}

/* Etiqueta pequena em maiusculas — badges e eyebrows */
.bmup-etiqueta {
    font-size: var(--bmup-t-xs);
    font-weight: var(--bmup-peso-semi);
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: var(--bmup-lh-xs);
}

.bmup-texto-suave { color: var(--bmup-cinza-400); }
.bmup-texto-cobre { color: var(--bmup-cobre); }
.bmup-medida      { max-width: var(--bmup-largura-texto); }


/* ==========================================================================
   5. LAYOUT
   ========================================================================== */

.bmup-wrap {
    width: 100%;
    max-width: var(--bmup-largura-max);
    margin-inline: auto;
    padding-inline: var(--bmup-e-6);
}

@media (min-width: 768px) {
    .bmup-wrap { padding-inline: var(--bmup-e-12); }
}

.bmup-seccao        { padding-block: var(--bmup-e-24); }
.bmup-seccao--curta { padding-block: var(--bmup-e-16); }

.bmup-seccao--clara { background: var(--bmup-pedra); color: var(--bmup-cinza-600); }
.bmup-seccao--clara h1,
.bmup-seccao--clara h2,
.bmup-seccao--clara h3,
.bmup-seccao--clara h4 { color: var(--bmup-cinza-900); }

.bmup-grelha { display: grid; gap: var(--bmup-e-6); }
.bmup-flex   { display: flex;  gap: var(--bmup-e-4); }


/* ==========================================================================
   6. BOTOES
   ========================================================================== */

.bmup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bmup-e-2);
    padding: 0.9rem 2.25rem;
    border: 1px solid transparent;
    border-radius: var(--bmup-raio-nulo);
    font-family: var(--bmup-font-corpo);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-medio);
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--bmup-trans), color var(--bmup-trans),
                border-color var(--bmup-trans);
}

/* O design nao poe todos os botoes em maiusculas: os do heroi sim, o
   "Falar Connosco" da homepage nao. */
.bmup-btn--natural      { text-transform: none; letter-spacing: normal; }

.bmup-btn--cobre        { background: var(--bmup-cobre); color: var(--bmup-branco); }
.bmup-btn--cobre:hover  { background: var(--bmup-cobre-escuro); }

.bmup-btn--branco       { background: var(--bmup-branco); color: #000000; }
.bmup-btn--branco:hover { background: var(--bmup-cinza-200); }

.bmup-btn--escuro       { background: var(--bmup-preto-botao); color: var(--bmup-branco); }
.bmup-btn--escuro:hover { background: var(--bmup-cobre); }

/* Contorno para fundos ESCUROS — o texto e branco. */
.bmup-btn--linha        { background: transparent; border-color: var(--bmup-cinza-700); color: var(--bmup-branco); }
.bmup-btn--linha:hover  { border-color: var(--bmup-cobre); color: var(--bmup-cobre); }

/* Contorno para fundos CLAROS.
   Existe porque o --linha, usado sobre branco, dava texto branco em fundo
   branco: o botao ficava invisivel. Aconteceu na caixa de sucesso do
   base.tpl. Ao escolher entre os dois, olhar para o fundo, nao para o botao. */
.bmup-btn--linha-escura       { background: transparent; border-color: var(--bmup-cinza-300); color: var(--bmup-cinza-900); }
.bmup-btn--linha-escura:hover { background: var(--bmup-preto); border-color: var(--bmup-preto); color: var(--bmup-branco); }

.bmup-btn--pilula {
    border-radius: var(--bmup-raio-total);
    text-transform: none;
    letter-spacing: 0;
    padding: 0.6rem 1.5rem;
}

.bmup-btn:focus-visible,
.bmup a:focus-visible,
.bmup button:focus-visible {
    outline: 2px solid var(--bmup-cobre);
    outline-offset: 3px;
}


/* ==========================================================================
   7. FORMULARIOS
   ========================================================================== */

.bmup-campo { display: flex; flex-direction: column; gap: var(--bmup-e-2); }

.bmup-campo > label {
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    font-weight: var(--bmup-peso-medio);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bmup-cinza-500);
}

.bmup-input,
.bmup-campo input[type="text"],
.bmup-campo input[type="email"],
.bmup-campo input[type="tel"],
.bmup-campo input[type="password"],
.bmup-campo textarea,
.bmup-campo select {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--bmup-cinza-50);
    border: 1px solid var(--bmup-cinza-200);
    border-radius: var(--bmup-raio-md);
    font-family: var(--bmup-font-corpo);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-normal);
    color: var(--bmup-cinza-900);
    transition: border-color var(--bmup-trans), box-shadow var(--bmup-trans),
                background-color var(--bmup-trans);
}

.bmup-input:focus,
.bmup-campo input:focus,
.bmup-campo textarea:focus,
.bmup-campo select:focus {
    outline: none;
    background: var(--bmup-branco);
    border-color: var(--bmup-cobre);
    box-shadow: 0 0 0 3px rgba(172, 116, 80, .15);
}

.bmup-campo textarea { resize: vertical; min-height: 7rem; }

.bmup-erro { font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs); color: var(--bmup-vermelho); }


/* ==========================================================================
   8. UTILITARIOS
   ========================================================================== */

.bmup-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--bmup-e-2);
    padding: 0.55rem 1rem;
    border: 1px solid rgba(172, 116, 80, .3);
    border-radius: var(--bmup-raio-total);
    background: rgba(172, 116, 80, .12);
    color: var(--bmup-cobre);
    font-size: var(--bmup-t-xs);
    font-weight: var(--bmup-peso-semi);   /* 600 no desenho, nao 700 — medido 2026-09-10 */
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: var(--bmup-lh-xs);
}

.bmup-cartao {
    background: var(--bmup-branco);
    border: 1px solid var(--bmup-cinza-200);
    border-radius: var(--bmup-raio-lg);
    padding: var(--bmup-e-6);
}

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

.bmup-sem-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.bmup-sem-scrollbar::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
    .bmup *,
    .bmup *::before,
    .bmup *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   9. PAGINAS INTERIORES
   Usadas pelo views/bmup-base.tpl
   ========================================================================== */

.bmup-pagina {
    padding-block: calc(var(--bmup-altura-header) + var(--bmup-e-16)) var(--bmup-e-24);
    min-height: 60vh;
}

.bmup-pagina__cabecalho {
    display: flex;
    flex-direction: column;
    gap: var(--bmup-e-3);
    padding-block-end: var(--bmup-e-8);
    margin-block-end: var(--bmup-e-12);
    border-bottom: 1px solid var(--bmup-cinza-800);
}

.bmup-pagina__subtitulo {
    font-size: var(--bmup-t-lg);
    line-height: var(--bmup-lh-lg);
    color: var(--bmup-cinza-400);
    font-weight: var(--bmup-peso-light);
}

.bmup-pagina__conteudo {
    font-size: var(--bmup-t-base);
    line-height: 1.625;
    color: var(--bmup-cinza-300);
}

.bmup-pagina__conteudo > * + * { margin-block-start: var(--bmup-e-4); }
.bmup-pagina__conteudo h2      { margin-block-start: var(--bmup-e-12); }
.bmup-pagina__conteudo h3      { margin-block-start: var(--bmup-e-8); }
.bmup-pagina__conteudo a       { color: var(--bmup-cobre); text-decoration: underline; text-underline-offset: 3px; }
.bmup-pagina__conteudo a:hover { color: var(--bmup-cobre-claro); }
.bmup-pagina__conteudo img     { border-radius: var(--bmup-raio-md); }
.bmup-pagina__conteudo ul,
.bmup-pagina__conteudo ol      { padding-inline-start: var(--bmup-e-6); }
.bmup-pagina__conteudo li + li { margin-block-start: var(--bmup-e-2); }

.bmup-aviso {
    padding: var(--bmup-e-4);
    margin-block-end: var(--bmup-e-6);
    border: 1px solid;
    border-radius: var(--bmup-raio-md);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
}

.bmup-aviso--erro { border-color: rgba(220, 38, 38, .4); background: rgba(220, 38, 38, .1); color: #fca5a5; }
.bmup-aviso--ok   { border-color: rgba(22, 163, 74, .4); background: rgba(22, 163, 74, .1); color: #86efac; }


/* ==========================================================================
   10. ANIMACOES DE ENTRADA
   Equivalente vanilla ao framer-motion do Figma.
   --------------------------------------------------------------------------
   O estado escondido so se aplica dentro de .bmup-js, classe posta no <html>
   por um script inline no <head>. Sem JavaScript nada se esconde e a pagina
   aparece normal — nunca fica conteudo invisivel por causa de um script que
   falhou.
   ========================================================================== */

/* easeOut do framer-motion = cubic-bezier(0, 0, 0.58, 1) */
.bmup-js .bmup-anim {
    opacity: 0;
    transition: opacity 650ms cubic-bezier(0, 0, .58, 1),
                transform 650ms cubic-bezier(0, 0, .58, 1);
    transition-delay: var(--bmup-atraso, 0ms);
    will-change: opacity, transform;
}

.bmup-js .bmup-anim--sobe     { transform: translateY(24px); }
.bmup-js .bmup-anim--sobe-sm  { transform: translateY(16px); }
.bmup-js .bmup-anim--desce    { transform: translateY(-20px); }
.bmup-js .bmup-anim--esquerda { transform: translateX(-30px); }
.bmup-js .bmup-anim--direita  { transform: translateX(30px); }

.bmup-js .bmup-anim.is-visivel {
    opacity: 1;
    /* "none" por omissao; quem tem posicao propria (o cartao destacado, um
       hover) poe-na em --bmup-pousado e ela sobrevive ao fim da animacao */
    transform: var(--bmup-pousado, none);
}

/* Quando a animacao termina, liberta o will-change */
.bmup-js .bmup-anim.is-feito { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
    .bmup-js .bmup-anim {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ==========================================================================
   ICONES DESENHADOS PELO CSS — para o HTML que vive no editor (2026-09-24)
   ==========================================================================
   As seccoes de texto da homepage passaram para o editor da pagina. O
   TinyMCE tira o <use href="#i-..."> dos icones (mesmo com svg autorizado),
   por isso ai' o icone e' uma classe no proprio botao:

     <a class="bmup-btn ... bmup-icone-seta">Fale Connosco</a>

   Desenha o mesmo icone do bmup-icones.tpl (i-seta, i-chevron: lucide,
   traco 2), depois do texto, como o <svg> fazia. Tamanho por omissao 16px;
   outro com style="--bmup-icone-tamanho:15px" no botao.
   ========================================================================== */

.bmup-icone-seta    { --bmup-icone-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }
.bmup-icone-chevron { --bmup-icone-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }

.bmup-icone-seta::after,
.bmup-icone-chevron::after {
    content: "";
    display: block;
    flex-shrink: 0;
    width: var(--bmup-icone-tamanho, 16px);
    height: var(--bmup-icone-tamanho, 16px);
    background: currentColor;
    -webkit-mask: var(--bmup-icone-mascara) center / contain no-repeat;
            mask: var(--bmup-icone-mascara) center / contain no-repeat;
}