/* ==========================================================================
   BMUP — Paginas do site publico (Planos e Contactos)
   Fase 1. Depende do bmup.css (tokens, botoes, animacoes).
   --------------------------------------------------------------------------
   1.  Tokens proprios das paginas
   2.  Hero interior (partilhado pelas duas paginas)
   3.  Banner de parceiro
   4.  Grelha de planos
   5.  Servicos incluidos
   6.  Solucao personalizada
   7.  Contactos — coluna de informacao
   8.  Contactos — formulario (reveste o modulo Form do SM8)
   ========================================================================== */


/* ==========================================================================
   1. TOKENS PROPRIOS DAS PAGINAS
   Os tres niveis tem paletas metalicas distintas. Cada cartao declara as
   suas nas variaveis --p-*, e o resto do CSS le sempre essas variaveis.
   Assim a folha nao repete cores por nivel.
   ========================================================================== */

.bmup-tons,
.bmup-tons--prata {
    /* Valores por omissao = Prata. Os outros niveis substituem-nos.
       Esta classe so declara cores. Nao pinta nada por si: e usada tanto
       pelos cartoes como pelas pilulas do hero, que nao partilham visual. */
    --p-acento:       #a1a1aa;              /* zinc-400  */
    --p-tira:         linear-gradient(90deg, #52525b, #a1a1aa, #52525b);
    --p-pilula-fundo: rgba(63, 63, 70, .40);
    --p-pilula-linha: rgba(82, 82, 91, .40);
    --p-caixa-fundo:  rgba(63, 63, 70, .20);
    --p-caixa-linha:  rgba(63, 63, 70, .30);
    --p-check-fundo:  rgba(63, 63, 70, .30);
    --p-icone-fundo:  #27272a;              /* zinc-800  */
    --p-btn-fundo:    #27272a;
    --p-btn-hover:    #3f3f46;
    --p-btn-linha:    rgba(63, 63, 70, .60);
    --p-btn-texto:    #ffffff;
}

.bmup-tons--gold {
    --p-acento:       #c9a84c;
    --p-tira:         linear-gradient(90deg, #6b4f1a, #c9a84c, #6b4f1a);
    --p-pilula-fundo: rgba(201, 168, 76, .10);
    --p-pilula-linha: rgba(201, 168, 76, .25);
    --p-caixa-fundo:  rgba(201, 168, 76, .08);
    --p-caixa-linha:  rgba(201, 168, 76, .15);
    --p-check-fundo:  rgba(201, 168, 76, .12);
    --p-icone-fundo:  rgba(201, 168, 76, .10);
    --p-btn-fundo:    #8b6914;
    --p-btn-hover:    #7a5c10;
    --p-btn-linha:    transparent;
}

.bmup-tons--platina {
    --p-acento:       #cbd5e1;              /* slate-300 */
    --p-tira:         linear-gradient(90deg, #475569, #cbd5e1, #475569);
    --p-pilula-fundo: rgba(148, 163, 184, .10);
    --p-pilula-linha: rgba(148, 163, 184, .20);
    --p-caixa-fundo:  rgba(148, 163, 184, .08);
    --p-caixa-linha:  rgba(148, 163, 184, .15);
    --p-check-fundo:  rgba(148, 163, 184, .12);
    --p-icone-fundo:  rgba(30, 41, 59, .80);
    --p-btn-fundo:    #0f172a;
    --p-btn-hover:    #1e293b;
    --p-btn-linha:    rgba(100, 116, 139, .30);
}


/* ==========================================================================
   2. HERO INTERIOR
   Fundo escuro com fotografia esbatida por tras. A fotografia ja vem a
   preto e branco do ficheiro — nao se gasta um filtro no browser.
   O padding de cima acomoda o header, que e fixo e assenta por cima.
   ========================================================================== */

.bmup-heroi {
    position: relative;
    overflow: hidden;
    background: var(--bmup-preto);
    padding-block: calc(var(--bmup-altura-header) + var(--bmup-e-8)) var(--bmup-e-24);
}

/* O design nao poe a fotografia por baixo do texto e pronto: poe-a a 20%, a
   cinzento e em mix-blend-overlay. Sobre um fundo #0a0a0a isso quase a apaga —
   fica uma textura, nao uma imagem. Faltavam-me o cinzento e a mistura, e por
   isso a fotografia lia-se muito mais do que devia. */
.bmup-heroi__fundo {
    position: absolute;
    inset: 0;
    opacity: .2;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.bmup-heroi__fundo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
}

/* Esbate a fotografia contra o preto em cima e em baixo */
.bmup-heroi__fundo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                var(--bmup-preto), transparent 50%, var(--bmup-preto));
}

.bmup-heroi__interior {
    position: relative;
    z-index: 1;
}

.bmup-heroi--centro .bmup-heroi__interior { text-align: center; }

.bmup-heroi h1 {
    font-family: var(--bmup-font-titulo);
    font-weight: var(--bmup-peso-normal);
    color: var(--bmup-branco);
    letter-spacing: -.025em;
    line-height: var(--bmup-lh-hero);
    margin-block: 0 var(--bmup-e-6);
}

.bmup-heroi--centro h1 { font-size: clamp(2.25rem, 6vw, 4.5rem); }
/* O h1 de Contactos nao leva tracking-tight (so o de Planos leva) e usa
   leading-tight — por isso desfaz aqui o aperto herdado. */
.bmup-heroi--lado h1   { font-size: clamp(1.875rem, 5vw, 3.75rem);
                         line-height: 1.25; letter-spacing: normal; }

.bmup-heroi__texto {
    color: var(--bmup-cinza-400);
    font-weight: var(--bmup-peso-light);
    line-height: 1.625;
    margin: 0;
}

.bmup-heroi--centro .bmup-heroi__texto {
    font-size: clamp(1rem, 2vw, 1.25rem);
    max-width: 42rem;
    margin-inline: auto;
}

.bmup-heroi--lado .bmup-heroi__interior { max-width: 42rem; }

/* --- Distintivo de topo --- */

.bmup-distintivo {
    display: inline-flex;
    align-items: center;
    gap: var(--bmup-e-2);
    padding: .5rem 1rem;
    border: 1px solid rgba(172, 116, 80, .2);
    border-radius: var(--bmup-raio-total);
    background: rgba(172, 116, 80, .1);
    color: var(--bmup-cobre);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-block-end: var(--bmup-e-8);
}

.bmup-heroi--lado .bmup-distintivo {
    padding-block: .375rem;
    /* 600 no desenho. Esta regra (0,2,0) ganhava a .bmup-distintivo (0,1,0),
       por isso o peso corrige-se aqui e nao la. */
    font-weight: var(--bmup-peso-semi);
    margin-block-end: var(--bmup-e-6);
}

/* --- Pilulas dos niveis (so na pagina de planos) --- */

.bmup-niveis {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--bmup-e-3);
    margin-block-start: var(--bmup-e-12);
}

.bmup-nivel {
    padding: .375rem 1.25rem;
    border: 1px solid var(--p-pilula-linha);
    border-radius: var(--bmup-raio-total);
    background: var(--p-pilula-fundo);
    color: var(--p-acento);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    font-weight: var(--bmup-peso-forte);   /* era 900: o prototipo nao passa dos 700 */
    letter-spacing: .2em;
    text-transform: uppercase;
}

/* --- Numeros do hero de contactos --- */

.bmup-heroi__numeros {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--bmup-e-6);
    margin-block-start: var(--bmup-e-16);
    padding-block-start: var(--bmup-e-8);
    border-block-start: 1px solid var(--bmup-cinza-800);
}

.bmup-heroi__numero {
    font-family: var(--bmup-font-titulo);
    font-size: var(--bmup-t-3xl);
    line-height: var(--bmup-lh-3xl);
    font-weight: var(--bmup-peso-normal);
    color: var(--bmup-branco);
    margin: 0 0 var(--bmup-e-1);
}

.bmup-heroi__rotulo {
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    color: var(--bmup-cinza-500);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0;
}

@media (min-width: 768px) {
    .bmup-heroi__numeros { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   3. BANNER DE PARCEIRO
   ========================================================================== */

.bmup-parceiro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: var(--bmup-e-4);
    padding: 1.25rem;
    border: 1px solid rgba(172, 116, 80, .2);
    border-radius: var(--bmup-raio-lg);
    background: #111111;
    margin-block-start: var(--bmup-e-8);
}

.bmup-parceiro__esquerda {
    display: flex;
    align-items: center;
    gap: var(--bmup-e-3);
}

.bmup-parceiro__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--bmup-raio-md);
    background: rgba(172, 116, 80, .15);
    color: var(--bmup-cobre);
}

.bmup-parceiro__titulo {
    color: var(--bmup-branco);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: 600;
    margin: 0;
}

.bmup-parceiro__nota {
    color: var(--bmup-cinza-500);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    margin: .125rem 0 0;
}

.bmup-parceiro__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--bmup-e-2);
    flex-shrink: 0;
    padding: .625rem 1.25rem;
    border-radius: var(--bmup-raio-md);
    background: var(--bmup-cobre);
    color: var(--bmup-branco);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--bmup-trans);
}

.bmup-parceiro__btn:hover { background: var(--bmup-cobre-escuro); }

@media (min-width: 640px) {
    .bmup-parceiro { flex-direction: row; }
}


/* ==========================================================================
   4. GRELHA DE PLANOS
   ========================================================================== */

.bmup-planos {
    background: var(--bmup-preto);
    padding-block-end: var(--bmup-e-24);
}

.bmup-planos__grelha {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--bmup-e-6);
    margin-block-start: var(--bmup-e-8);
}

@media (min-width: 768px) {
    .bmup-planos__grelha { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

.bmup-plano {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(39, 39, 42, .8);
    border-radius: var(--bmup-raio-xl);
    background: #111111;
    transition: transform 300ms cubic-bezier(.4, 0, .2, 1),
                border-color 300ms cubic-bezier(.4, 0, .2, 1);
    /* A posicao de repouso passa por uma variavel, e nao pelo transform.
       Razao: a animacao de entrada acaba em ".bmup-js .bmup-anim.is-visivel
       { transform: none }", que tem especificidade (0,3,0) e ganhava tanto ao
       cartao destacado como ao hover de qualquer cartao — o Gold nao subia e
       nenhum cartao reagia ao rato. Variaveis cascateiam sozinhas, por isso
       cada regra so precisa de dizer onde o cartao pousa. */
    transform: var(--bmup-pousado, none);
}

.bmup-plano:hover {
    border-color: var(--bmup-cinza-700);
    --bmup-pousado: translateY(-4px);
}

/* O cartao destacado sobe e cresce — mas so quando ha tres colunas.
   Em coluna unica ficaria a tapar os vizinhos. */
@media (min-width: 768px) {
    .bmup-plano--destaque {
        border-color: rgba(201, 168, 76, .25);
        --bmup-pousado: translateY(-1rem) scale(1.05);
        box-shadow: 0 25px 50px -12px rgba(201, 168, 76, .05);
    }
    .bmup-plano--destaque:hover { --bmup-pousado: translateY(-1.25rem) scale(1.05); }
}

.bmup-plano__tira {
    height: 4px;
    background: var(--p-tira);
}

.bmup-plano__corpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem;
}

@media (min-width: 640px) {
    .bmup-plano__corpo { padding: 2rem; }
}

.bmup-plano__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--bmup-e-6);
}

.bmup-plano__nivel {
    padding: .25rem .75rem;
    border: 1px solid var(--p-pilula-linha);
    border-radius: var(--bmup-raio-total);
    background: var(--p-pilula-fundo);
    color: var(--p-acento);
    font-size: .625rem;
    font-weight: var(--bmup-peso-forte);   /* era 900: o prototipo nao passa dos 700 */
    letter-spacing: .2em;
    text-transform: uppercase;
}

.bmup-plano__popular {
    padding: .25rem .625rem;
    border: 1px solid rgba(201, 168, 76, .25);
    border-radius: var(--bmup-raio-total);
    background: rgba(201, 168, 76, .1);
    color: #c9a84c;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.bmup-plano__cabecalho {
    display: flex;
    align-items: center;
    gap: var(--bmup-e-3);
    margin-block-end: var(--bmup-e-3);
}

.bmup-plano__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--bmup-raio-lg);
    background: var(--p-icone-fundo);
    color: var(--p-acento);
    transition: transform 300ms cubic-bezier(.4, 0, .2, 1);
}

.bmup-plano:hover .bmup-plano__icone { transform: scale(1.05); }

.bmup-plano__nome {
    font-family: var(--bmup-font-titulo);
    font-size: var(--bmup-t-xl);
    line-height: var(--bmup-lh-xl);
    font-weight: var(--bmup-peso-normal);
    color: var(--bmup-branco);
    margin: 0;
}

.bmup-plano__descricao {
    font-size: var(--bmup-t-sm);
    color: var(--bmup-cinza-500);
    line-height: 1.625;
    margin: 0 0 var(--bmup-e-5);
}

/* --- Caixa "Acesso a Negocios" --- */

.bmup-plano__acesso {
    padding: var(--bmup-e-4);
    border: 1px solid var(--p-caixa-linha);
    border-radius: var(--bmup-raio-md);
    background: var(--p-caixa-fundo);
    margin-block-end: var(--bmup-e-6);
}

.bmup-plano__acesso-rotulo {
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    color: var(--bmup-cinza-600);
    font-weight: var(--bmup-peso-semi);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 var(--bmup-e-1);
}

.bmup-plano__acesso-valor {
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: 700;
    color: var(--p-acento);
    margin: 0 0 var(--bmup-e-0-5);
}

.bmup-plano__acesso-nota {
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    color: var(--bmup-cinza-600);
    font-weight: var(--bmup-peso-light);
    margin: 0;
}

/* --- Preco --- */

.bmup-plano__preco {
    display: flex;
    align-items: flex-end;
    gap: var(--bmup-e-2);
    padding-block-end: var(--bmup-e-7);
    border-block-end: 1px solid rgba(39, 39, 42, .6);
    margin-block-end: var(--bmup-e-7);
}

.bmup-plano__valor {
    font-family: var(--bmup-font-titulo);
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: var(--bmup-peso-normal);
    color: var(--bmup-branco);
    line-height: 1;
}

.bmup-plano__periodo {
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-medio);
    color: var(--bmup-cinza-500);
    padding-block-end: .5rem;
}

/* --- Lista de beneficios --- */

.bmup-plano__lista {
    list-style: none;
    flex: 1;
    padding: 0;
    margin: 0 0 var(--bmup-e-8);
    display: flex;
    flex-direction: column;
    gap: var(--bmup-e-3);
}

.bmup-plano__lista li {
    display: flex;
    align-items: flex-start;
    gap: var(--bmup-e-3);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    color: var(--bmup-cinza-300);
}

.bmup-plano__marca {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-block-start: .125rem;
    border-radius: var(--bmup-raio-total);
    background: var(--p-check-fundo);
    color: var(--p-acento);
}

.bmup-plano__lista li.is-fora { color: var(--bmup-cinza-700); }

.bmup-plano__lista li.is-fora span:last-child {
    text-decoration: line-through;
    text-decoration-color: var(--bmup-cinza-800);
}

.bmup-plano__lista li.is-fora .bmup-plano__marca {
    background: transparent;
    color: var(--bmup-cinza-700);
}

/* --- Botao do cartao --- */

.bmup-plano__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bmup-e-2);
    width: 100%;
    padding-block: var(--bmup-e-4);
    border: 1px solid var(--p-btn-linha);
    border-radius: var(--bmup-raio-md);
    background: var(--p-btn-fundo);
    color: var(--p-btn-texto, #fff);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: 700;
    text-align: center;
    transition: background 300ms cubic-bezier(.4, 0, .2, 1);
}

.bmup-plano__btn:hover { background: var(--p-btn-hover); }

.bmup-tons--platina .bmup-plano__btn:hover { border-color: rgba(148, 163, 184, .5); }


/* ==========================================================================
   5. SERVICOS INCLUIDOS
   ========================================================================== */

.bmup-servicos { margin-block-start: var(--bmup-e-24); }

.bmup-servicos__cabecalho {
    text-align: center;
    margin-block-end: var(--bmup-e-12);
}

.bmup-servicos__cabecalho h2 {
    font-family: var(--bmup-font-titulo);
    font-size: var(--bmup-t-3xl);
    line-height: var(--bmup-lh-3xl);
    font-weight: var(--bmup-peso-normal);
    color: var(--bmup-branco);
    margin: 0 0 var(--bmup-e-4);
}

.bmup-servicos__intro {
    font-size: var(--bmup-t-sm);
    font-weight: var(--bmup-peso-light);
    color: var(--bmup-cinza-400);
    max-width: 36rem;
    margin: 0 auto var(--bmup-e-3);
}

.bmup-servicos__nota {
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    color: var(--bmup-cinza-600);
    max-width: 36rem;
    margin: 0 auto;
}

.bmup-servicos__nota em { font-style: italic; }

.bmup-servicos__grelha {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bmup-e-6);
}

@media (min-width: 640px) { .bmup-servicos__grelha { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bmup-servicos__grelha { grid-template-columns: repeat(3, 1fr); } }

.bmup-servico {
    padding: var(--bmup-e-6);
    border: 1px solid var(--bmup-cinza-800);
    border-radius: var(--bmup-raio-lg);
    background: #111111;
    transition: border-color var(--bmup-trans);
}

.bmup-servico:hover { border-color: var(--bmup-cinza-700); }

.bmup-servico__numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--bmup-raio-md);
    background: rgba(172, 116, 80, .1);
    color: var(--bmup-cobre);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: 700;
    margin-block-end: var(--bmup-e-4);
    transition: background var(--bmup-trans);
}

.bmup-servico:hover .bmup-servico__numero { background: rgba(172, 116, 80, .2); }

.bmup-servico h3 {
    font-family: var(--bmup-font-corpo);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: 600;
    color: var(--bmup-branco);
    margin: 0 0 var(--bmup-e-2);
}

:where(.bmup-servico) p {
    font-size: var(--bmup-t-xs);
    font-weight: var(--bmup-peso-light);
    color: var(--bmup-cinza-500);
    line-height: 1.625;
    margin: 0;
}


/* ==========================================================================
   6. SOLUCAO PERSONALIZADA
   ========================================================================== */

.bmup-personalizada {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bmup-e-8);
    padding: var(--bmup-e-6);
    border: 1px solid var(--bmup-cinza-800);
    border-radius: var(--bmup-raio-xl);
    background: var(--bmup-cinza-900);
    margin-block-start: var(--bmup-e-12);
}

.bmup-personalizada::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 16rem;
    background: rgba(172, 116, 80, .05);
    pointer-events: none;
}

.bmup-personalizada > * { position: relative; z-index: 1; }

.bmup-personalizada__texto { max-width: 42rem; }

.bmup-personalizada h2 {
    font-family: var(--bmup-font-titulo);
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    line-height: var(--bmup-lh-3xl);
    font-weight: var(--bmup-peso-normal);
    color: var(--bmup-branco);
    margin: 0 0 var(--bmup-e-3);
}

/* mb-3 no telemovel, mb-4 a partir de sm — como o design */
@media (min-width: 640px) {
    .bmup-personalizada h2 { margin-block-end: var(--bmup-e-4); }
}

:where(.bmup-personalizada) p {
    font-size: var(--bmup-t-sm);
    font-weight: var(--bmup-peso-light);
    color: var(--bmup-cinza-400);
    line-height: 1.625;
    margin: 0;
}

/* text-sm no telemovel, text-base a partir de sm — como o design */
@media (min-width: 640px) {
    :where(.bmup-personalizada) p { font-size: var(--bmup-t-base); }
}

.bmup-personalizada__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--bmup-e-2);
    flex-shrink: 0;
    padding: .875rem 1.5rem;
    border-radius: var(--bmup-raio-md);
    background: var(--bmup-branco);
    color: var(--bmup-preto);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--bmup-sombra-lg);
    transition: background var(--bmup-trans);
}

.bmup-personalizada__btn:hover { background: var(--bmup-cinza-200); }

@media (min-width: 640px) {
    .bmup-personalizada { padding: var(--bmup-e-12); }
    .bmup-personalizada__btn { padding: 1rem 2rem; font-size: var(--bmup-t-base);
    line-height: var(--bmup-lh-base); }
}

@media (min-width: 768px) {
    .bmup-personalizada { flex-direction: row; align-items: center; padding: var(--bmup-e-16); }
}


/* ==========================================================================
   7. CONTACTOS — COLUNA DE INFORMACAO
   ========================================================================== */

.bmup-contactos { background: var(--bmup-cinza-50); }

.bmup-contactos__grelha {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bmup-e-12);
    padding-block: var(--bmup-e-16);
}

@media (min-width: 1024px) {
    .bmup-contactos__grelha { grid-template-columns: 2fr 3fr; }
}

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

.bmup-contactos__info h2 {
    font-family: var(--bmup-font-titulo);
    font-size: var(--bmup-t-2xl);
    line-height: var(--bmup-lh-2xl);
    font-weight: var(--bmup-peso-normal);
    color: var(--bmup-cinza-900);
    margin: 0 0 var(--bmup-e-4);
}

/* :where() para nao tapar as classes de dentro: ".bmup-contactos__info p"
   tem especificidade (0,1,1) e vencia ".bmup-contacto__rotulo" (0,1,0) — os
   rotulos dos contactos ficavam a 14px cinza-500 em vez de 12px cinza-400,
   e o valor perdia o quase-preto que o destaca. */
:where(.bmup-contactos__info) p {
    font-size: var(--bmup-t-sm);
    color: var(--bmup-cinza-500);
    line-height: 1.625;
    margin: 0 0 var(--bmup-e-4);
}

:where(.bmup-contactos__info) p:last-child { margin-block-end: 0; }

/* --- Lista de contactos --- */

.bmup-contacto {
    display: flex;
    align-items: flex-start;
    gap: var(--bmup-e-4);
    margin-block-end: var(--bmup-e-4);
}

.bmup-contacto:last-child { margin-block-end: 0; }

.bmup-contacto__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    margin-block-start: .125rem;
    border-radius: var(--bmup-raio-md);
    background: rgba(172, 116, 80, .1);
    color: var(--bmup-cobre);
}

.bmup-contacto__rotulo {
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    font-weight: var(--bmup-peso-medio);
    color: var(--bmup-cinza-400);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 .125rem;
}

.bmup-contacto__valor {
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-medio);
    color: var(--bmup-cinza-800);
    margin: 0;
}

.bmup-contacto__valor a { color: inherit; }
.bmup-contacto__valor a:hover { color: var(--bmup-cobre); }

/* --- Caixa "O que esperar" --- */

.bmup-esperar {
    padding: var(--bmup-e-6);
    border: 1px solid var(--bmup-cinza-800);
    border-radius: var(--bmup-raio-lg);
    background: var(--bmup-preto);
}

.bmup-esperar h3 {
    font-family: var(--bmup-font-corpo);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: 600;
    color: var(--bmup-branco);
    margin: 0 0 var(--bmup-e-4);
}

.bmup-esperar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--bmup-e-3);
}

.bmup-esperar li {
    display: flex;
    align-items: flex-start;
    gap: var(--bmup-e-3);
    font-size: var(--bmup-t-xs);
    color: var(--bmup-cinza-400);
    line-height: var(--bmup-lh-xs);
}

.bmup-esperar li svg {
    flex-shrink: 0;
    margin-block-start: .125rem;
    color: var(--bmup-cobre);
}

/* Desde 2026-09-24 esta caixa vive no editor da pagina, e o TinyMCE tira o
   <svg><use> — o visto passa a ser desenhado aqui (i-check-circulo, 14px,
   traco 1,75). So' nas linhas sem <svg>, para nunca aparecerem dois. */
.bmup-esperar li:not(:has(svg))::before {
    content: "";
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-block-start: .125rem;
    background: var(--bmup-cobre);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ==========================================================================
   8. CONTACTOS — FORMULARIO
   O formulario e o do modulo Form do SM8, inserido por componente. O modulo
   traz um <style> proprio com as suas variaveis --fv-*; aqui so se
   substituem essas variaveis para o formulario ganhar o aspeto BMUP.
   Ha um detalhe de ordem: o <style> do modulo aparece no corpo da pagina,
   depois desta folha, por isso ganharia em caso de empate. Prefixar com
   ".bmup" sobe a especificidade de (1,0,0) para (1,1,0) e resolve.
   ========================================================================== */

.bmup-formulario {
    border: 1px solid var(--bmup-cinza-200);
    border-radius: var(--bmup-raio-xl);
    background: var(--bmup-branco);
    box-shadow: var(--bmup-sombra-sm);
    overflow: hidden;
}

.bmup .bmup-formulario #form_view {
    --fv-text:         #18181b;
    --fv-muted:        #a1a1aa;
    --fv-label:        #52525b;
    --fv-border:       #e4e4e7;
    --fv-border-hover: #d4d4d8;
    --fv-border-focus: #ac7450;
    --fv-focus-ring:   rgba(172, 116, 80, .18);
    --fv-primary:      #0a0a0a;
    --fv-primary-hover:#ac7450;
    --fv-primary-active:#8a5d40;
    --fv-error:        #dc2626;
    --fv-radius:       12px;
    --fv-radius-sm:    8px;
    --fv-font:         var(--bmup-font-corpo);
    --fv-disabled-bg:  #fafafa;

    max-width: none;
    margin: 0;
    padding: var(--bmup-e-8);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
}

/* O cabecalho do modulo fica escondido: o titulo do formulario tem de ser
   igual nas quatro linguas (e a chave por onde o template o encontra), por
   isso nao pode ser o que o visitante le. O cabecalho visivel e desenhado
   pelo bmup-contactos.tpl, com translate(). */
.bmup .bmup-formulario #form_view .form-header { display: none; }

.bmup-formulario__cabecalho {
    padding: var(--bmup-e-8) var(--bmup-e-8) 0;
}

.bmup-formulario__cabecalho h2 {
    font-family: var(--bmup-font-titulo);
    font-size: var(--bmup-t-xl);
    line-height: var(--bmup-lh-xl);
    font-weight: var(--bmup-peso-normal);
    color: var(--bmup-cinza-900);
    margin: 0 0 var(--bmup-e-1);
}

:where(.bmup-formulario__cabecalho) p {
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    color: var(--bmup-cinza-400);
    margin: 0;
}

/* O corpo do formulario ja nao precisa do espaco de cima: o cabecalho traz-lho */
.bmup .bmup-formulario #form_view { padding-block-start: var(--bmup-e-6); }

/* Etiquetas em maiusculas pequenas, como no desenho */
.bmup .bmup-formulario #form_view label {
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    font-weight: var(--bmup-peso-semi);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--fv-label);
}

/* As opcoes de escolha unica passam a pilulas — no desenho o campo
   "Assunto" e uma grelha de botoes, nao uma lista de radios. */
.bmup .bmup-formulario #form_view .input-container:has(input[type="radio"]) {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bmup-e-2);
}

@media (min-width: 640px) {
    .bmup .bmup-formulario #form_view .input-container:has(input[type="radio"]) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.bmup .bmup-formulario #form_view .input-container label:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: var(--bmup-e-2);
    margin: 0;
    padding: .625rem .75rem;
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius);
    background: #fafafa;
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    font-weight: var(--bmup-peso-medio);
    text-transform: none;
    letter-spacing: 0;
    color: var(--bmup-cinza-600);
    cursor: pointer;
    transition: border-color var(--bmup-trans), background var(--bmup-trans), color var(--bmup-trans);
}

.bmup .bmup-formulario #form_view .input-container label:has(> input[type="radio"]):hover {
    border-color: var(--fv-border-hover);
    background: var(--bmup-cinza-100);
}

.bmup .bmup-formulario #form_view .input-container label:has(> input[type="radio"]:checked) {
    border-color: rgba(172, 116, 80, .5);
    background: rgba(172, 116, 80, .1);
    color: var(--bmup-cobre);
}

/* Botao de submissao a toda a largura */
.bmup .bmup-formulario #form_view button[type="submit"],
.bmup .bmup-formulario #form_view input[type="submit"] {
    width: 100%;
    padding-block: var(--bmup-e-4);
    border-radius: var(--fv-radius);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: 600;
}

/* Nota de rodape do formulario, escrita no template da pagina */
.bmup-formulario__nota {
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    color: var(--bmup-cinza-400);
    text-align: center;
    padding: 0 var(--bmup-e-8) var(--bmup-e-8);
    margin: 0;
}

.bmup-formulario__nota a { color: var(--bmup-cobre); }
.bmup-formulario__nota a:hover { text-decoration: underline; }

/* Lugar do formulario enquanto ele nao existe no backoffice */
.bmup-formulario__em-falta {
    padding: var(--bmup-e-16) var(--bmup-e-8);
    color: var(--bmup-cinza-400);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    text-align: center;
    margin: 0;
}


/* ==========================================================================
   9. PAGINAS DE SISTEMA
   O layout dos modulos (base.tpl), a caixa de sucesso e as paginas de erro.
   Serve tudo o que nao e uma pagina desenhada a medida: sucesso de
   formulario, login, area de membro, 404 e 403.
   ========================================================================== */

/* --- Envolvente dos modulos --------------------------------------------- */

.bmup-modulo {
    background: var(--bmup-cinza-50);
    min-height: 60vh;
    padding-block: calc(var(--bmup-altura-header) + var(--bmup-e-12)) var(--bmup-e-24);
}

.bmup-modulo__cabecalho { margin-block-end: var(--bmup-e-8); }

.bmup-modulo__cabecalho h1 {
    font-family: var(--bmup-font-titulo);
    font-size: var(--bmup-t-4xl);
    line-height: var(--bmup-lh-4xl);
    font-weight: var(--bmup-peso-normal);
    color: var(--bmup-cinza-900);
    margin: 0;
}

.bmup-modulo__subtitulo {
    font-size: var(--bmup-t-lg);
    line-height: var(--bmup-lh-lg);
    font-weight: var(--bmup-peso-light);
    color: var(--bmup-cinza-500);
    margin: var(--bmup-e-2) 0 0;
}

.bmup-modulo__conteudo { color: var(--bmup-cinza-600); line-height: 1.625; }
.bmup-modulo__conteudo a { color: var(--bmup-cobre); text-decoration: underline; text-underline-offset: 3px; }

/* --- Notas de erro e de sucesso -----------------------------------------
   Ao contrario do .bmup-aviso do bmup.css, que foi feito para fundo escuro,
   estas assentam sobre o fundo claro dos modulos. */

.bmup-nota {
    display: flex;
    align-items: flex-start;
    gap: var(--bmup-e-3);
    padding: var(--bmup-e-4);
    border: 1px solid;
    border-radius: var(--bmup-raio-md);
    font-size: var(--bmup-t-sm);
    line-height: 1.6;
    margin-block-end: var(--bmup-e-6);
}

.bmup-nota svg { flex-shrink: 0; margin-block-start: .1rem; }

.bmup-nota--erro { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.bmup-nota--ok   { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }

/* --- Caixa de sucesso ---------------------------------------------------
   Quando a mensagem e tudo o que ha para mostrar: submeter o formulario,
   recuperar a palavra-passe, e por ai fora. */

.bmup-sucesso {
    max-width: 34rem;
    margin-inline: auto;
    padding: var(--bmup-e-16) var(--bmup-e-8);
    border: 1px solid var(--bmup-cinza-200);
    border-radius: var(--bmup-raio-xl);
    background: var(--bmup-branco);
    box-shadow: var(--bmup-sombra-sm);
    text-align: center;
}

.bmup-sucesso__marca {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin: 0 auto var(--bmup-e-6);
    border-radius: var(--bmup-raio-total);
    background: #dcfce7;
    color: var(--bmup-verde);
}

/* O texto vem do campo "mensagem de sucesso" do formulario, gravado no
   backoffice em HTML — dai o alcance a <strong> e <p> la dentro. */
.bmup-sucesso__texto {
    color: var(--bmup-cinza-500);
    font-size: var(--bmup-t-sm);
    line-height: 1.625;
}

.bmup-sucesso__texto strong {
    display: block;
    font-family: var(--bmup-font-titulo);
    font-size: var(--bmup-t-2xl);
    line-height: var(--bmup-lh-2xl);
    font-weight: var(--bmup-peso-normal);
    color: var(--bmup-cinza-900);
    margin-block-end: var(--bmup-e-3);
}

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

.bmup-sucesso__accoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--bmup-e-3);
    margin-block-start: var(--bmup-e-8);
}

/* --- Paginas de erro (404 e 403) ---------------------------------------- */

.bmup-erro {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 80vh;
    background: var(--bmup-preto);
    padding-block: calc(var(--bmup-altura-header) + var(--bmup-e-16)) var(--bmup-e-24);
    text-align: center;
}

.bmup-erro__fundo {
    position: absolute;
    inset: 0;
    opacity: .12;
    pointer-events: none;
}

.bmup-erro__fundo img { width: 100%; height: 100%; object-fit: cover; }

.bmup-erro__fundo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
                transparent 0%, var(--bmup-preto) 75%);
}

.bmup-erro__interior { position: relative; z-index: 1; }

/* O numero e o elemento grafico da pagina: grande, em serifa, cor de cobre
   esbatida. Nao e um titulo — o titulo e o <h1> por baixo. */
.bmup-erro__codigo {
    font-family: var(--bmup-font-titulo);
    font-size: clamp(5rem, 18vw, 11rem);
    font-weight: var(--bmup-peso-normal);
    line-height: 1;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(172, 116, 80, .5);
    margin: 0 0 var(--bmup-e-4);
    user-select: none;
}

.bmup-erro__titulo {
    font-family: var(--bmup-font-titulo);
    font-size: var(--bmup-t-4xl);
    line-height: var(--bmup-lh-4xl);
    font-weight: var(--bmup-peso-normal);
    color: var(--bmup-branco);
    margin: 0 0 var(--bmup-e-4);
}

.bmup-erro__texto {
    max-width: 34rem;
    margin: 0 auto;
    font-weight: var(--bmup-peso-light);
    color: var(--bmup-cinza-400);
    line-height: 1.625;
}

.bmup-erro__accoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--bmup-e-3);
    margin-block-start: var(--bmup-e-12);
}

/* O -webkit-text-stroke nao existe no Firefox antigo: sem ele o numero
   ficava invisivel, por isso repoe-se uma cor solida. */
@supports not (-webkit-text-stroke: 1px black) {
    .bmup-erro__codigo { color: rgba(172, 116, 80, .5); }
}

/* ==========================================================================
   PAGINAS LEGAIS  (canal bmup-legal.tpl)
   Moldura clara com cartoes brancos. O conteudo vem do CMS, por isso as
   regras apanham as etiquetas cruas do editor (h2, p, ul, a, strong) e nao
   uma marcacao que so exista aqui.
   ========================================================================== */

.bmup-heroi--legal { padding-block-end: var(--bmup-e-12); }

.bmup-legal {
    background: var(--bmup-cinza-50);
    padding-block: var(--bmup-e-16);
}

.bmup-legal__interior {
    max-width: 56rem;          /* max-w-4xl, como no design */
    margin-inline: auto;
    padding-inline: var(--bmup-e-6);
    display: flex;
    flex-direction: column;
    gap: var(--bmup-e-12);
}

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

.bmup-legal__cartao {
    padding: var(--bmup-e-8);
    border: 1px solid var(--bmup-pedra-200);
    border-radius: var(--bmup-raio-xl);
    background: var(--bmup-branco);
    box-shadow: var(--bmup-sombra-sm);
}

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

.bmup-legal__cartao h2 {
    font-family: var(--bmup-font-titulo);
    font-size: var(--bmup-t-2xl);
    line-height: var(--bmup-lh-2xl);
    color: var(--bmup-cinza-900);
    margin: 0 0 var(--bmup-e-8);
}

.bmup-legal__cartao h3 {
    font-family: var(--bmup-font-corpo);
    font-size: var(--bmup-t-base);
    line-height: var(--bmup-lh-base);
    font-weight: var(--bmup-peso-semi);
    color: var(--bmup-cinza-900);
    margin: var(--bmup-e-8) 0 var(--bmup-e-3);
}

.bmup-legal__cartao p,
.bmup-legal__cartao li {
    font-size: var(--bmup-t-sm);
    line-height: 1.625;
    color: var(--bmup-cinza-600);
}

.bmup-legal__cartao p { margin: 0 0 var(--bmup-e-5); }

/* Listas simples escritas no editor (Termos, Carreiras) — a dos centros de
   arbitragem tem o seu próprio aspecto, mais abaixo */
.bmup-legal__cartao ul:not(.bmup-legal__centros) {
    margin: 0 0 var(--bmup-e-5);
    padding-inline-start: 1.25rem;
    list-style: disc;
}
.bmup-legal__cartao ul:not(.bmup-legal__centros) li { margin-block-end: var(--bmup-e-2); }
.bmup-legal__cartao ul:not(.bmup-legal__centros) li::marker { color: var(--bmup-cobre); }
.bmup-legal__cartao h2 + h3 { margin-block-start: 0; }
.bmup-legal__cartao p:last-child { margin-block-end: 0; }

.bmup-legal__cartao strong { font-weight: var(--bmup-peso-semi); color: var(--bmup-cinza-900); }

.bmup-legal__cartao a {
    color: var(--bmup-cobre);
    font-weight: var(--bmup-peso-semi);
}

.bmup-legal__cartao a:hover { text-decoration: underline; }

/* Caixa de destaque dentro de um cartao */
.bmup-legal__destaque {
    padding: var(--bmup-e-5);
    border: 1px solid rgba(172, 116, 80, .2);
    border-radius: var(--bmup-raio-lg);
    background: rgba(172, 116, 80, .05);
    margin-block-end: var(--bmup-e-5);
}

.bmup-legal__destaque p { color: var(--bmup-cinza-700); }

/* Lista dos centros de arbitragem */
.bmup-legal__centros {
    list-style: none;
    margin: var(--bmup-e-6) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--bmup-e-3);
}

.bmup-legal__centros li {
    padding: var(--bmup-e-4);
    border: 1px solid var(--bmup-pedra-200);
    border-radius: var(--bmup-raio-md);
    background: var(--bmup-cinza-50);
}

.bmup-legal__centros strong { display: block; margin-block-end: var(--bmup-e-1); }

.bmup-legal__centros span {
    display: inline-block;
    margin-inline-end: var(--bmup-e-4);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    color: var(--bmup-cinza-500);
}

/* Selo do Livro de Reclamacoes, no rodape */
.bmup-footer__selo {
    display: block;
    height: 40px;
    width: auto;
    object-fit: contain;
    /* Afastado das ligações de texto por cima — colado a elas parecia apertado */
    margin-block-start: var(--bmup-e-3);
}


/* ==========================================================================
   PESOS DOS TITULOS — medido a 2026-09-10
   ==========================================================================
   Mesma lógica da homepage, mas aqui os dois heróis divergem e é intencional
   no desenho: o dos Planos é uma afirmação (700), o dos Contactos é um convite
   (300). Por isso vão pelas variantes --centro e --lado, e não por uma regra só.
   ========================================================================== */

.bmup-heroi--centro h1        { font-weight: var(--bmup-peso-forte); }   /* Planos */
.bmup-heroi--lado h1          { font-weight: var(--bmup-peso-light); }   /* Contactos */
.bmup-heroi__numero           { font-weight: var(--bmup-peso-light); }

.bmup-plano__nome             { font-weight: var(--bmup-peso-forte); }
.bmup-plano__valor            { font-weight: var(--bmup-peso-forte); }

.bmup-servicos__cabecalho h2  { font-weight: var(--bmup-peso-light); }   /* fundo escuro */
.bmup-personalizada h2        { font-weight: var(--bmup-peso-forte); }
.bmup-contactos h2            { font-weight: var(--bmup-peso-forte); }
.bmup-formulario__cabecalho h2 { font-weight: var(--bmup-peso-forte); }

.bmup-distintivo              { font-weight: var(--bmup-peso-semi); }
.bmup-marca--sans-black       { font-weight: 900; }

/* O .bmup-btn--natural sai a 500. Cheguei a pô-lo a 600 e estava ao contrário:
   o botão que tem este modificador ("Falar Connosco") é o mais leve dos dois. */
.bmup-btn--natural            { font-weight: var(--bmup-peso-medio); }


/* ==========================================================================
   NOTICIA — detalhe  (canal bmup-noticia.tpl + Noticias/bmup-detalhe.tpl)
   ==========================================================================
   Segue o desenho NewsDetail.tsx (BMUP APP (2).zip, 2026-09-24). Ate' ai
   era uma pagina provisoria feita com as pecas que ja existiam.

   As medidas sao as classes do Tailwind do desenho, uma a uma, e vao
   comentadas ao lado. O texto vem do editor do backoffice: as regras
   apanham as etiquetas cruas (h2, h3, p, ul, ol, strong, a, img, blockquote),
   como faz o renderContent() do desenho com o texto dele.
   ========================================================================== */

.bmup.pagina-noticia { background: var(--bmup-cinza-50); }          /* bg-zinc-50 */

/* max-w-7xl mx-auto px-6 md:px-12 — o mesmo contentor no topo e no corpo */
.bmup-artigo__wrap {
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: var(--bmup-e-6);
}

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

/* --- o topo --- */

/* bg-[#0a0a0a] pt-16 pb-0, por baixo do cabecalho fixo: o <main> do desenho
   comeca a 72px (pt-[72px] no MainLayout) */
.bmup-artigo-topo {
    position: relative;
    overflow: hidden;
    background: var(--bmup-preto);
    padding-block-start: calc(72px + var(--bmup-e-16));
}

.bmup-artigo-topo__fundo { position: absolute; inset: 0; }

/* object-cover opacity-20 */
.bmup .bmup-artigo-topo__fundo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .2;
}

/* bg-gradient-to-b from-[#0a0a0a]/40 via-[#0a0a0a]/60 to-[#0a0a0a] */
.bmup-artigo-topo__fundo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10, 10, 10, .4), rgba(10, 10, 10, .6), #0a0a0a);
}

.bmup-artigo-topo__interior { position: relative; z-index: 1; }

/* flex items-center gap-2 text-zinc-400 hover:text-white text-sm mb-8 */
.bmup-artigo-topo__voltar {
    display: inline-flex;
    align-items: center;
    gap: var(--bmup-e-2);
    margin-block-end: var(--bmup-e-8);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-medio);   /* o <button> do desenho sai a 500 */
    color: var(--bmup-cinza-400);
    transition: color var(--bmup-trans);
}

.bmup-artigo-topo__voltar:hover { color: var(--bmup-branco); }
.bmup-artigo-topo__voltar svg { transition: transform var(--bmup-trans); }
.bmup-artigo-topo__voltar:hover svg { transform: translateX(-2px); }  /* group-hover:-translate-x-0.5 */

/* flex flex-wrap items-center gap-3 mb-6 */
.bmup-artigo-topo__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bmup-e-3);
    margin-block-end: var(--bmup-e-6);
}

/* px-3 py-1 rounded-full bg-[#ac7450]/20 border border-[#ac7450]/30
   text-[#ac7450] text-xs font-semibold uppercase tracking-wider */
.bmup-artigo-topo__categoria {
    padding: var(--bmup-e-1) var(--bmup-e-3);
    border: 1px solid rgba(172, 116, 80, .3);
    border-radius: var(--bmup-raio-total);
    background: rgba(172, 116, 80, .2);
    color: var(--bmup-cobre);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    font-weight: var(--bmup-peso-semi);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* flex items-center gap-1.5 text-zinc-400 text-xs */
.bmup-artigo-topo__info {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--bmup-cinza-400);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
}

/* text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-white
   leading-snug mb-6 max-w-3xl */
.bmup .bmup-artigo-topo__titulo {
    max-width: 48rem;
    margin: 0 0 var(--bmup-e-6);
    font-family: var(--bmup-font-titulo);
    font-size: 1.5rem;
    line-height: 1.375;
    font-weight: var(--bmup-peso-forte);
    color: var(--bmup-branco);
}

@media (min-width: 640px) { .bmup .bmup-artigo-topo__titulo { font-size: 1.875rem; } }
@media (min-width: 768px) { .bmup .bmup-artigo-topo__titulo { font-size: 2.25rem; } }

/* text-zinc-300 font-light leading-relaxed max-w-2xl mb-10 text-sm sm:text-base */
.bmup .bmup-artigo-topo__resumo {
    max-width: 42rem;
    margin: 0 0 var(--bmup-e-10);
    color: var(--bmup-cinza-300);
    font-weight: var(--bmup-peso-light);
    font-size: var(--bmup-t-sm);
    line-height: 1.625;
}

@media (min-width: 640px) { .bmup .bmup-artigo-topo__resumo { font-size: var(--bmup-t-base); } }

/* flex items-center gap-4 pb-12 */
.bmup-artigo-topo__autor {
    display: flex;
    align-items: center;
    gap: var(--bmup-e-4);
    padding-block-end: var(--bmup-e-12);
}

/* w-10 h-10 rounded-full bg-[#ac7450]/20 border border-[#ac7450]/30
   text-[#ac7450] font-bold text-sm */
.bmup-artigo-topo__avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(172, 116, 80, .3);
    border-radius: var(--bmup-raio-total);
    background: rgba(172, 116, 80, .2);
    color: var(--bmup-cobre);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-forte);
}

/* text-white text-sm font-semibold */
.bmup-artigo-topo__nome {
    color: var(--bmup-branco);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-semi);
}

/* text-zinc-400 text-xs */
.bmup-artigo-topo__cargo {
    color: var(--bmup-cinza-400);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
}

/* Sem autor, o espaco de baixo (pb-12) passa para o que vier por ultimo */
.bmup-artigo-topo__interior > :last-child:not(.bmup-artigo-topo__autor) { margin-block-end: 0; padding-block-end: var(--bmup-e-12); }

/* --- o corpo --- */

/* max-w-7xl mx-auto px-6 md:px-12 py-12 */
.bmup-artigo { padding-block: var(--bmup-e-12); }

/* rounded-2xl overflow-hidden mb-12 shadow-lg */
.bmup-artigo__imagem {
    margin: 0 0 var(--bmup-e-12);
    border-radius: var(--bmup-raio-lg);
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}

/* w-full aspect-[21/9] object-cover */
.bmup .bmup-artigo__imagem img {
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

/* bg-white rounded-3xl border border-zinc-200 shadow-sm p-8 md:p-12 mb-10 */
.bmup-artigo__cartao {
    margin-block-end: var(--bmup-e-10);
    padding: var(--bmup-e-8);
    border: 1px solid var(--bmup-cinza-200);
    border-radius: var(--bmup-raio-xl);
    background: var(--bmup-branco);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

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

.bmup-artigo__texto > :first-child { margin-block-start: 0; }
.bmup-artigo__texto > :last-child  { margin-block-end: 0; }

/* ## -> text-xl font-serif font-bold text-zinc-900 mt-10 mb-4 */
.bmup .bmup-artigo__texto h2 {
    margin: var(--bmup-e-10) 0 var(--bmup-e-4);
    font-family: var(--bmup-font-titulo);
    font-size: var(--bmup-t-xl);
    line-height: 1.75rem;
    font-weight: var(--bmup-peso-forte);
    color: var(--bmup-cinza-900);
}

/* O desenho nao tem h3; fica um degrau abaixo do h2 */
.bmup .bmup-artigo__texto h3 {
    margin: var(--bmup-e-8) 0 var(--bmup-e-3);
    font-family: var(--bmup-font-titulo);
    font-size: var(--bmup-t-lg);
    line-height: 1.75rem;
    font-weight: var(--bmup-peso-forte);
    color: var(--bmup-cinza-900);
}

/* paragrafo -> text-zinc-600 text-sm leading-relaxed my-4 */
.bmup .bmup-artigo__texto p {
    margin: var(--bmup-e-4) 0;
    color: var(--bmup-cinza-600);
    font-size: var(--bmup-t-sm);
    line-height: 1.625;
}

/* **x** -> text-zinc-900 font-semibold */
.bmup-artigo__texto strong,
.bmup-artigo__texto b {
    font-weight: var(--bmup-peso-semi);
    color: var(--bmup-cinza-900);
}

.bmup-artigo__texto a {
    color: var(--bmup-cobre);
    font-weight: var(--bmup-peso-semi);
}

.bmup-artigo__texto a:hover { text-decoration: underline; }

/* - x -> ul space-y-2 my-4 pl-4; li flex gap-2 text-zinc-600 text-sm
   leading-relaxed, com um ponto cobre w-1.5 h-1.5 mt-2 */
.bmup-artigo__texto ul,
.bmup-artigo__texto ol {
    margin: var(--bmup-e-4) 0;
    padding-inline-start: var(--bmup-e-4);
    list-style: none;
}

.bmup-artigo__texto li {
    position: relative;
    padding-inline-start: 14px;
    color: var(--bmup-cinza-600);
    font-size: var(--bmup-t-sm);
    line-height: 1.625;
}

.bmup-artigo__texto li + li { margin-block-start: var(--bmup-e-2); }

.bmup-artigo__texto ul > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .5rem;
    width: .375rem;
    height: .375rem;
    border-radius: var(--bmup-raio-total);
    background: var(--bmup-cobre);
}

/* Listas numeradas (o editor deixa fazer; o desenho nao as tem) */
.bmup-artigo__texto ol { counter-reset: bmup-artigo; }
.bmup-artigo__texto ol > li { counter-increment: bmup-artigo; padding-inline-start: 1.25rem; }
.bmup-artigo__texto ol > li::before {
    content: counter(bmup-artigo) ".";
    position: absolute;
    inset-inline-start: 0;
    color: var(--bmup-cobre);
    font-weight: var(--bmup-peso-semi);
}

/* Citacoes (o desenho nao as tem): um filete cobre, no tom do resto */
.bmup-artigo__texto blockquote {
    margin: var(--bmup-e-6) 0;
    padding-inline-start: var(--bmup-e-5);
    border-inline-start: 2px solid var(--bmup-cobre);
}

.bmup .bmup-artigo__texto blockquote p {
    font-family: var(--bmup-font-titulo);
    font-size: var(--bmup-t-base);
    font-style: italic;
    color: var(--bmup-cinza-800);
}

/* Imagens postas no editor: a largura do cartao, nunca mais */
.bmup .bmup-artigo__texto img {
    max-width: 100%;
    height: auto;
    margin-block: var(--bmup-e-6);
    border-radius: var(--bmup-raio-lg);
}

/* flex flex-wrap gap-2 mb-14 */
.bmup-artigo__etiquetas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bmup-e-2);
    margin-block-end: 3.5rem;
}

/* flex items-center gap-1 text-xs text-zinc-400 mr-1 */
.bmup-artigo__etiquetas-rotulo {
    display: inline-flex;
    align-items: center;
    gap: var(--bmup-e-1);
    margin-inline-end: var(--bmup-e-1);
    color: var(--bmup-cinza-400);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
}

/* px-3 py-1 rounded-full bg-zinc-100 text-zinc-600 text-xs font-medium
   border border-zinc-200 */
.bmup-artigo__etiqueta {
    padding: var(--bmup-e-1) var(--bmup-e-3);
    border: 1px solid var(--bmup-cinza-200);
    border-radius: var(--bmup-raio-total);
    background: var(--bmup-cinza-100);
    color: var(--bmup-cinza-600);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    font-weight: var(--bmup-peso-medio);
}

/* --- artigos relacionados --- */

/* flex items-center justify-between mb-6 */
.bmup-artigo__relacionados-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bmup-e-4);
    margin-block-end: var(--bmup-e-6);
}

/* text-xl font-serif font-bold text-zinc-900 */
.bmup .bmup-artigo__relacionados-topo h3 {
    font-size: var(--bmup-t-xl);
    line-height: 1.75rem;
    font-weight: var(--bmup-peso-forte);
    color: var(--bmup-cinza-900);
}

/* text-sm text-[#ac7450] font-semibold flex items-center gap-1 hover:gap-2 */
.bmup-artigo__relacionados-topo a {
    display: inline-flex;
    align-items: center;
    gap: var(--bmup-e-1);
    color: var(--bmup-cobre);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-semi);
    transition: gap var(--bmup-trans);
}

.bmup-artigo__relacionados-topo a:hover { gap: var(--bmup-e-2); }

/* grid grid-cols-1 sm:grid-cols-3 gap-5 */
.bmup-artigo__grelha {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .bmup-artigo__grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* bg-white rounded-2xl border border-zinc-200 overflow-hidden hover:shadow-md */
.bmup-artigo-carta {
    display: block;
    overflow: hidden;
    border: 1px solid var(--bmup-cinza-200);
    border-radius: var(--bmup-raio-lg);
    background: var(--bmup-branco);
    transition: box-shadow var(--bmup-trans);
}

.bmup-artigo-carta:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); }

/* aspect-[16/9] overflow-hidden; a imagem cresce 5% em 700ms */
.bmup-artigo-carta__imagem {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.bmup .bmup-artigo-carta__imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(.4, 0, .2, 1);
}

.bmup-artigo-carta:hover .bmup-artigo-carta__imagem img { transform: scale(1.05); }

/* p-4. Os 16px/1.5 sao o corpo do texto no desenho: a categoria e' um
   <span> em linha la' dentro, e a linha dela fica com 24px de altura, nao
   com os 15 de uma letra de 10px (medido: sem isto o cartao saia 9px mais
   baixo). */
.bmup-artigo-carta__corpo {
    display: block;
    padding: var(--bmup-e-4);
    font-size: var(--bmup-t-base);
    line-height: 1.5;
}

/* text-[10px] font-semibold text-[#ac7450] uppercase tracking-wider */
.bmup-artigo-carta__categoria {
    color: var(--bmup-cobre);
    font-size: 10px;
    line-height: 1.5;
    font-weight: var(--bmup-peso-semi);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* font-serif font-bold text-zinc-900 text-sm leading-snug mt-1.5
   group-hover:text-[#ac7450] line-clamp-2 */
.bmup-artigo-carta__titulo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-block-start: .375rem;
    color: var(--bmup-cinza-900);
    font-family: var(--bmup-font-titulo);
    font-size: var(--bmup-t-sm);
    line-height: 1.375;
    font-weight: var(--bmup-peso-forte);
    transition: color var(--bmup-trans);
}

.bmup-artigo-carta:hover .bmup-artigo-carta__titulo { color: var(--bmup-cobre); }

/* text-xs text-zinc-400 mt-2 flex items-center gap-1 */
.bmup-artigo-carta__minutos {
    display: flex;
    align-items: center;
    gap: var(--bmup-e-1);
    margin-block-start: var(--bmup-e-2);
    color: var(--bmup-cinza-400);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
}


/* ==========================================================================
   NOTICIAS — lista  (canal bmup-noticias.tpl + Noticias/bmup-lista.tpl)
   ==========================================================================
   Segue o desenho News.tsx (2026-09-24). Partilha o contentor
   .bmup-artigo__wrap com o detalhe. Os filtros e a pesquisa correm no
   bmup.js ("LISTA DE NOTICIAS"), que so' mexe no atributo hidden.
   ========================================================================== */

.bmup.pagina-noticias { background: var(--bmup-cinza-50); }          /* bg-zinc-50 */

.bmup-noticia-carta[hidden],
.bmup-noticias__destaque[hidden],
.bmup-noticias__vazio[hidden] { display: none; }

/* --- o topo: bg-[#0a0a0a] pt-16 pb-20, por baixo do cabecalho (72px) --- */

.bmup-noticias-topo {
    background: var(--bmup-preto);
    padding-block: calc(72px + var(--bmup-e-16)) 5rem;
}

.bmup-noticias-topo__interior { max-width: 42rem; }                   /* max-w-2xl */

/* inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#ac7450]/15
   border border-[#ac7450]/25 text-[#ac7450] text-xs font-semibold uppercase
   tracking-widest mb-6 */
.bmup-noticias-topo__selo {
    display: inline-flex;
    align-items: center;
    gap: var(--bmup-e-2);
    margin-block-end: var(--bmup-e-6);
    padding: .375rem var(--bmup-e-4);
    border: 1px solid rgba(172, 116, 80, .25);
    border-radius: var(--bmup-raio-total);
    background: rgba(172, 116, 80, .15);
    color: var(--bmup-cobre);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    font-weight: var(--bmup-peso-semi);
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* text-3xl sm:text-4xl md:text-5xl font-serif font-light text-white mb-4
   leading-tight */
.bmup .bmup-noticias-topo__titulo {
    margin: 0 0 var(--bmup-e-4);
    font-family: var(--bmup-font-titulo);
    font-size: 1.875rem;
    line-height: 1.25;
    font-weight: var(--bmup-peso-light);
    color: var(--bmup-branco);
}

@media (min-width: 640px) { .bmup .bmup-noticias-topo__titulo { font-size: 2.25rem; } }
@media (min-width: 768px) { .bmup .bmup-noticias-topo__titulo { font-size: 3rem; } }

/* <br className="hidden sm:block" /> */
.bmup-noticias-topo__quebra { display: none; }
@media (min-width: 640px) { .bmup-noticias-topo__quebra { display: block; } }

/* text-zinc-400 font-light leading-relaxed */
.bmup .bmup-noticias-topo__texto {
    color: var(--bmup-cinza-400);
    font-size: var(--bmup-t-base);
    font-weight: var(--bmup-peso-light);
    line-height: 1.625;
}

/* --- o corpo: py-12 --- */

.bmup-noticias { padding-block: var(--bmup-e-12); }

/* flex flex-col sm:flex-row gap-4 mb-10 */
.bmup-noticias__filtros {
    display: flex;
    flex-direction: column;
    gap: var(--bmup-e-4);
    margin-block-end: var(--bmup-e-10);
}

@media (min-width: 640px) {
    .bmup-noticias__filtros { flex-direction: row; }
}

.bmup-noticias__categorias {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bmup-e-2);
}

/* px-4 py-2 rounded-full text-xs font-semibold border transition-all
   activo: bg-[#0a0a0a] text-white border-[#0a0a0a]
   resto:  bg-white text-zinc-500 border-zinc-200 hover:border-zinc-400 */
.bmup-noticias__categoria {
    padding: var(--bmup-e-2) var(--bmup-e-4);
    border: 1px solid var(--bmup-cinza-200);
    border-radius: var(--bmup-raio-total);
    background: var(--bmup-branco);
    color: var(--bmup-cinza-500);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    font-weight: var(--bmup-peso-semi);
    transition: all 150ms cubic-bezier(.4, 0, .2, 1);
}

.bmup-noticias__categoria:hover { border-color: var(--bmup-cinza-400); }

.bmup-noticias__categoria.is-activa {
    border-color: var(--bmup-preto);
    background: var(--bmup-preto);
    color: var(--bmup-branco);
}

/* relative sm:ml-auto */
.bmup-noticias__pesquisa {
    position: relative;
    display: block;
}

@media (min-width: 640px) {
    .bmup-noticias__pesquisa { margin-inline-start: auto; }
}

/* absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400 */
.bmup-noticias__pesquisa svg {
    position: absolute;
    inset-inline-start: var(--bmup-e-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--bmup-cinza-400);
    pointer-events: none;
}

/* pl-9 pr-4 py-2 text-sm bg-white border border-zinc-200 rounded-full
   outline-none focus:ring-2 focus:ring-[#ac7450]/20 focus:border-[#ac7450]
   w-full sm:w-64 */
.bmup-noticias__pesquisa input {
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--bmup-e-2) var(--bmup-e-4) var(--bmup-e-2) 2.25rem;
    border: 1px solid var(--bmup-cinza-200);
    border-radius: var(--bmup-raio-total);
    background: var(--bmup-branco);
    color: var(--bmup-cinza-900);
    font: inherit;
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    outline: none;
    transition: all 150ms cubic-bezier(.4, 0, .2, 1);
}

.bmup-noticias__pesquisa input::placeholder { color: var(--bmup-cinza-500); }

.bmup-noticias__pesquisa input:focus {
    border-color: var(--bmup-cobre);
    box-shadow: 0 0 0 2px rgba(172, 116, 80, .2);
}

@media (min-width: 640px) {
    .bmup-noticias__pesquisa input { width: 16rem; }
}

/* --- o destaque --- */

.bmup-noticias__destaque { margin-block-end: var(--bmup-e-10); }       /* mb-10 */

/* grid grid-cols-1 lg:grid-cols-2 bg-white rounded-3xl border border-zinc-200
   shadow-sm overflow-hidden hover:shadow-md */
.bmup-destaque {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border: 1px solid var(--bmup-cinza-200);
    border-radius: var(--bmup-raio-xl);
    background: var(--bmup-branco);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    transition: box-shadow 150ms cubic-bezier(.4, 0, .2, 1);
}

.bmup-destaque:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); }

@media (min-width: 1024px) {
    .bmup-destaque { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* relative aspect-[16/9] lg:aspect-auto lg:min-h-[380px] overflow-hidden */
.bmup-destaque__imagem {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .bmup-destaque__imagem { aspect-ratio: auto; min-height: 380px; }
}

.bmup .bmup-destaque__imagem img,
.bmup .bmup-noticia-carta__imagem img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(.4, 0, .2, 1);
}

/* No destaque a fotografia fica no fluxo, como no desenho: no computador a
   caixa so' tem altura minima (380px), o height:100% nao se resolve e a
   fotografia sai na proporcao dela — e' ela que decide a altura do cartao
   quando e' mais alta do que o texto (uma 3:2 da' 394px; medido). */
.bmup .bmup-destaque__imagem img { position: static; display: block; }

.bmup-destaque:hover .bmup-destaque__imagem img,
.bmup-noticia-carta:hover .bmup-noticia-carta__imagem img { transform: scale(1.05); }

/* absolute top-4 left-4 px-3 py-1 rounded-full bg-[#ac7450] text-white
   text-xs font-semibold */
.bmup-destaque__selo {
    position: absolute;
    top: var(--bmup-e-4);
    inset-inline-start: var(--bmup-e-4);
    padding: var(--bmup-e-1) var(--bmup-e-3);
    border-radius: var(--bmup-raio-total);
    background: var(--bmup-cobre);
    color: var(--bmup-branco);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    font-weight: var(--bmup-peso-semi);
}

/* p-8 md:p-10 flex flex-col justify-center */
.bmup-destaque__corpo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--bmup-e-8);
}

@media (min-width: 768px) {
    .bmup-destaque__corpo { padding: var(--bmup-e-10); }
}

/* flex items-center gap-3 mb-4. O "·" nao tem tamanho no desenho: fica com
   o do texto (16px/1.5) e e' ele que da' a altura a' linha (medido: 3px). */
.bmup-destaque__meta {
    display: flex;
    align-items: center;
    gap: var(--bmup-e-3);
    margin-block-end: var(--bmup-e-4);
    font-size: var(--bmup-t-base);
    line-height: 1.5;
}

/* text-xs font-semibold text-[#ac7450] uppercase tracking-wider */
.bmup-destaque__categoria {
    color: var(--bmup-cobre);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    font-weight: var(--bmup-peso-semi);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.bmup-destaque__ponto { color: var(--bmup-cinza-300); }               /* text-zinc-300 */

/* text-xs text-zinc-400 flex items-center gap-1 */
.bmup-destaque__minutos {
    display: flex;
    align-items: center;
    gap: var(--bmup-e-1);
    color: var(--bmup-cinza-400);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
}

/* text-2xl sm:text-3xl font-serif font-bold text-zinc-900 leading-snug mb-4
   group-hover:text-[#ac7450] */
.bmup-destaque__titulo {
    display: block;
    margin-block-end: var(--bmup-e-4);
    color: var(--bmup-cinza-900);
    font-family: var(--bmup-font-titulo);
    font-size: 1.5rem;
    line-height: 1.375;
    font-weight: var(--bmup-peso-forte);
    transition: color 150ms cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 640px) { .bmup-destaque__titulo { font-size: 1.875rem; } }

.bmup-destaque:hover .bmup-destaque__titulo { color: var(--bmup-cobre); }

/* text-zinc-500 text-sm leading-relaxed mb-6 line-clamp-3 */
.bmup-destaque__resumo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin-block-end: var(--bmup-e-6);
    color: var(--bmup-cinza-500);
    font-size: var(--bmup-t-sm);
    line-height: 1.625;
}

/* flex items-center justify-between */
.bmup-destaque__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bmup-e-4);
}

/* text-sm font-semibold text-zinc-800 / text-xs text-zinc-400 */
.bmup-destaque__autor {
    display: block;
    color: var(--bmup-cinza-800);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-semi);
}

.bmup-destaque__data {
    display: block;
    color: var(--bmup-cinza-400);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
}

/* flex items-center gap-1.5 text-sm font-semibold text-[#ac7450]
   group-hover:gap-3 */
.bmup-destaque__ler {
    display: flex;
    align-items: center;
    gap: .375rem;
    color: var(--bmup-cobre);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-semi);
    transition: gap 150ms cubic-bezier(.4, 0, .2, 1);
}

.bmup-destaque:hover .bmup-destaque__ler { gap: var(--bmup-e-3); }

/* --- a grelha: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 --- */

.bmup-noticias__grelha {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bmup-e-6);
}

@media (min-width: 640px)  { .bmup-noticias__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bmup-noticias__grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* bg-white rounded-2xl border border-zinc-200 overflow-hidden hover:shadow-md
   h-full flex flex-col */
.bmup-noticia-carta {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--bmup-cinza-200);
    border-radius: var(--bmup-raio-lg);
    background: var(--bmup-branco);
    transition: box-shadow 150ms cubic-bezier(.4, 0, .2, 1);
}

.bmup-noticia-carta:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); }

/* relative aspect-[16/9] overflow-hidden */
.bmup-noticia-carta__imagem {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* absolute top-3 left-3 — uma caixa com o texto normal (16px/1.5), e la'
   dentro a pilula, em linha: px-2.5 py-1 rounded-full bg-[#0a0a0a]/80
   backdrop-blur-sm text-white text-[10px] font-semibold. Em linha, e nao em
   bloco, porque e' assim que assenta 3px mais abaixo, como no desenho. */
.bmup-noticia-carta__categoria-caixa {
    position: absolute;
    top: var(--bmup-e-3);
    inset-inline-start: var(--bmup-e-3);
    font-size: var(--bmup-t-base);
    line-height: 1.5;
}

.bmup-noticia-carta__categoria {
    padding: var(--bmup-e-1) .625rem;
    border-radius: var(--bmup-raio-total);
    background: rgba(10, 10, 10, .8);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    color: var(--bmup-branco);
    font-size: 10px;
    line-height: 1.5;
    font-weight: var(--bmup-peso-semi);
}

/* p-5 flex flex-col flex-1 */
.bmup-noticia-carta__corpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--bmup-e-5);
}

/* flex items-center gap-2 text-xs text-zinc-400 mb-3 */
.bmup-noticia-carta__meta {
    display: flex;
    align-items: center;
    gap: var(--bmup-e-2);
    margin-block-end: var(--bmup-e-3);
    color: var(--bmup-cinza-400);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
}

/* font-serif font-bold text-zinc-900 leading-snug mb-3 line-clamp-2
   group-hover:text-[#ac7450] */
.bmup-noticia-carta__titulo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-block-end: var(--bmup-e-3);
    color: var(--bmup-cinza-900);
    font-family: var(--bmup-font-titulo);
    font-size: var(--bmup-t-lg);            /* o h3 do desenho sai a 18px */
    line-height: 1.375;
    font-weight: var(--bmup-peso-forte);
    transition: color 150ms cubic-bezier(.4, 0, .2, 1);
}

.bmup-noticia-carta:hover .bmup-noticia-carta__titulo { color: var(--bmup-cobre); }

/* text-sm text-zinc-500 leading-relaxed line-clamp-3 flex-1 */
.bmup-noticia-carta__resumo {
    display: -webkit-box;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: var(--bmup-cinza-500);
    font-size: var(--bmup-t-sm);
    line-height: 1.625;
}

/* mt-4 pt-4 border-t border-zinc-100 flex items-center justify-between */
.bmup-noticia-carta__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-start: var(--bmup-e-4);
    padding-block-start: var(--bmup-e-4);
    border-top: 1px solid var(--bmup-cinza-100);
}

/* text-xs text-zinc-400 */
.bmup-noticia-carta__autor {
    color: var(--bmup-cinza-400);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
}

/* text-xs font-semibold text-[#ac7450] flex items-center gap-1
   group-hover:gap-2 */
.bmup-noticia-carta__ler {
    display: flex;
    align-items: center;
    gap: var(--bmup-e-1);
    color: var(--bmup-cobre);
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    font-weight: var(--bmup-peso-semi);
    transition: gap 150ms cubic-bezier(.4, 0, .2, 1);
}

.bmup-noticia-carta:hover .bmup-noticia-carta__ler { gap: var(--bmup-e-2); }

/* text-center py-20 text-zinc-400; text-lg font-serif mb-2 / text-sm */
.bmup-noticias__vazio {
    padding-block: 5rem;
    text-align: center;
    color: var(--bmup-cinza-400);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
}

.bmup .bmup-noticias__vazio-titulo {
    margin-block-end: var(--bmup-e-2);
    font-family: var(--bmup-font-titulo);
    font-size: var(--bmup-t-lg);
    line-height: 1.75rem;
}

/* ==========================================================================
   SERVIÇOS — a página pública (Services.tsx, design reference 2026-09-25)
   ========================================================================== */

.bmup-servicos-pagina { background: var(--bmup-cinza-50); }

/* o topo: como o dos Contactos, com o h1 font-light (3xl/4xl/5xl) e os dois
   botões por baixo */
.bmup-heroi--servicos { padding-block-end: var(--bmup-e-24); }
.bmup-heroi--servicos h1 { font-weight: var(--bmup-peso-light); font-size: clamp(1.875rem, 4.5vw, 3rem); line-height: 1.25; margin-block-end: var(--bmup-e-4); }
.bmup-heroi--servicos .bmup-distintivo { margin-block-end: var(--bmup-e-6); letter-spacing: .1em; }
.bmup-heroi--servicos .bmup-heroi__texto { margin-block-end: var(--bmup-e-8); }
.bmup-servicos-pagina__botoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.bmup-servicos-pagina__botao {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .75rem 1.5rem; border-radius: .75rem;
    font-size: .875rem; font-weight: var(--bmup-peso-semi); text-decoration: none;
}
.bmup-servicos-pagina__botao--cobre { background: var(--bmup-cobre); color: var(--bmup-branco); transition: background-color .2s; }
.bmup-servicos-pagina__botao--cobre:hover { background: #8a5d40; }
.bmup-servicos-pagina__botao--vidro {
    border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .1); color: var(--bmup-branco);
    transition: background-color .2s;
}
.bmup-servicos-pagina__botao--vidro:hover { background: rgba(255, 255, 255, .2); }

/* todos os serviços (py-20, grelha 1/2/3 colunas gap-4) */
.bmup-servicos-pagina__lista { padding-block: 5rem; scroll-margin-top: var(--bmup-altura-header); }
.bmup-servicos-pagina__cabecalho { margin-block-end: 3rem; }
.bmup-servicos-pagina__cabecalho h2,
.bmup-servicos-pagina__pedido h2 {
    margin: 0 0 .75rem;
    font-family: var(--bmup-font-titulo); font-weight: var(--bmup-peso-forte);
    font-size: clamp(1.5rem, 3vw, 1.875rem); line-height: 1.25; color: var(--bmup-cinza-900);
}
.bmup-servicos-pagina__cabecalho p { max-width: 36rem; margin: 0; font-size: .875rem; line-height: 1.625; color: var(--bmup-cinza-500); }
.bmup-servicos-pagina__grelha { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 640px)  { .bmup-servicos-pagina__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bmup-servicos-pagina__grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* o cartão que abre (bg-white rounded-2xl border; aberto: border cobre/40 shadow-md) */
.bmup-svc {
    border: 1px solid var(--bmup-cinza-200); border-radius: 1rem; background: var(--bmup-branco);
    transition: border-color .2s, box-shadow .2s;
}
.bmup-svc:hover { border-color: var(--bmup-cinza-300); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.bmup-svc[open] { border-color: rgba(172, 116, 80, .4); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .06); }
.bmup-svc summary { display: block; padding: 1.25rem; cursor: pointer; list-style: none; }
.bmup-svc summary::-webkit-details-marker { display: none; }
.bmup-svc__cimo { display: flex; align-items: flex-start; gap: .75rem; }
.bmup-svc__icone {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 2.5rem; height: 2.5rem; border-radius: .75rem;
}
.bmup-svc__icone svg { width: 18px; height: 18px; }
.bmup-svc__nome { flex: 1; min-width: 0; }
.bmup-svc__nome b { display: block; font-size: .875rem; font-weight: var(--bmup-peso-semi); line-height: 1.375; color: var(--bmup-cinza-900); }
.bmup-svc__nome small { display: block; margin-top: .125rem; font-size: .625rem; font-weight: var(--bmup-peso-semi); text-transform: uppercase; letter-spacing: .05em; background: none !important; }
/* o i-chevron do sprite aponta para a direita: 90 graus = para baixo */
.bmup-svc__seta { flex-shrink: 0; width: 16px; height: 16px; margin-top: .25rem; color: var(--bmup-cinza-400); transform: rotate(90deg); transition: transform .2s; }
.bmup-svc[open] .bmup-svc__seta { transform: rotate(-90deg); }
.bmup-svc__resumo { display: block; margin-top: .75rem; font-size: .75rem; line-height: 1.625; color: var(--bmup-cinza-500); }
.bmup-svc__detalhe { margin: 0 1.25rem; padding: 1rem 0 1.25rem; border-top: 1px solid var(--bmup-cinza-100); animation: bmup-svc-abre .3s ease-out; }
@keyframes bmup-svc-abre { from { opacity: 0; transform: translateY(-4px); } }
.bmup-svc__detalhe p { margin: 0 0 1rem; font-size: .75rem; line-height: 1.625; color: var(--bmup-cinza-600); }
.bmup-svc__pedir { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: var(--bmup-peso-semi); color: var(--bmup-cobre); text-decoration: none; transition: gap .2s; }
.bmup-svc__pedir:hover { gap: .5rem; }

/* as cores dos serviços (text-X / bg-X do servicesData.ts) */
.bmup-svc--cobre   { color: var(--bmup-cobre); background: rgba(172, 116, 80, .1); }
.bmup-svc--azul    { color: #2563eb; background: #eff6ff; }
.bmup-svc--roxo    { color: #9333ea; background: #faf5ff; }
.bmup-svc--verde   { color: #059669; background: #ecfdf5; }
.bmup-svc--laranja { color: #ea580c; background: #fff7ed; }
.bmup-svc--cinza   { color: var(--bmup-cinza-600); background: var(--bmup-cinza-100); }
.bmup-svc--rosa    { color: #db2777; background: #fdf2f8; }

/* o destaque (bg-[#0a0a0a] py-20, duas colunas) */
.bmup-servicos-pagina__gestao { padding-block: 5rem; background: var(--bmup-preto); }
.bmup-servicos-pagina__gestao-grelha { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .bmup-servicos-pagina__gestao-grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bmup-servicos-pagina__gestao .bmup-distintivo { margin-block-end: var(--bmup-e-6); }
.bmup-servicos-pagina__gestao h2 {
    margin: 0 0 1rem; font-family: var(--bmup-font-titulo); font-weight: var(--bmup-peso-light);
    font-size: clamp(1.5rem, 3.5vw, 2.25rem); line-height: 1.375; color: var(--bmup-branco);
}
.bmup-servicos-pagina__gestao-texto { margin: 0 0 2rem; font-size: .875rem; line-height: 1.625; color: var(--bmup-cinza-400); }
.bmup-servicos-pagina__subservicos { display: grid; gap: .75rem; margin: 0 0 2rem; padding: 0; list-style: none; }
@media (min-width: 640px) { .bmup-servicos-pagina__subservicos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bmup-servicos-pagina__subservicos li {
    display: flex; align-items: center; gap: .75rem; padding: .875rem;
    border: 1px solid var(--bmup-cinza-800); border-radius: .75rem; background: rgba(24, 24, 27, .6);
}
.bmup-servicos-pagina__subservicos span {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 1.25rem; height: 1.25rem; border-radius: 50%;
    border: 1px solid rgba(172, 116, 80, .25); background: rgba(172, 116, 80, .15);
    font-size: 9px; font-weight: var(--bmup-peso-forte); color: var(--bmup-cobre);
}
.bmup-servicos-pagina__subservicos p { margin: 0; font-size: .75rem; font-weight: var(--bmup-peso-light); line-height: 1.375; color: var(--bmup-cinza-300); }
.bmup-servicos-pagina__figura { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 1rem; }
.bmup-servicos-pagina__figura img { width: 100%; height: 100%; object-fit: cover; }
.bmup-servicos-pagina__figura::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 10, .6), transparent 60%); pointer-events: none; }
.bmup-servicos-pagina__numeros {
    position: absolute; right: 1rem; bottom: 1rem; left: 1rem; z-index: 1;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
    padding: 1rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: .75rem;
    background: rgba(0, 0, 0, .6); backdrop-filter: blur(12px); text-align: center;
}
.bmup-servicos-pagina__numeros b { display: block; font-family: var(--bmup-font-titulo); font-size: 1.125rem; font-weight: var(--bmup-peso-forte); color: var(--bmup-branco); }
.bmup-servicos-pagina__numeros span { display: block; margin-top: .125rem; font-size: .625rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bmup-cinza-400); }

/* pedir informação (py-20; 5 colunas: 2 + 3) */
.bmup-servicos-pagina__pedido { padding-block: 5rem; scroll-margin-top: var(--bmup-altura-header); }
.bmup-servicos-pagina__pedido-grelha { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
    .bmup-servicos-pagina__pedido-grelha { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .bmup-servicos-pagina__pedido-lado { grid-column: span 2; }
    .bmup-servicos-pagina__pedido-forma { grid-column: span 3; }
}
.bmup-servicos-pagina__pedido-lado { display: grid; gap: 1.5rem; align-content: start; }
.bmup-servicos-pagina__pedido-lado p { margin: 0; font-size: .875rem; line-height: 1.625; color: var(--bmup-cinza-500); }
.bmup-servicos-pagina__esperar { display: grid; gap: 1rem; padding: 1.5rem; border: 1px solid var(--bmup-cinza-800); border-radius: 1rem; background: var(--bmup-preto); }
.bmup-servicos-pagina__esperar h3 { margin: 0; font-family: var(--bmup-font-corpo); font-size: .875rem; font-weight: var(--bmup-peso-semi); color: var(--bmup-branco); }
.bmup-servicos-pagina__esperar p { display: flex; align-items: flex-start; gap: .75rem; font-size: .75rem; color: var(--bmup-cinza-400); }
.bmup-servicos-pagina__esperar svg { width: 13px; height: 13px; margin-top: .125rem; flex-shrink: 0; color: var(--bmup-cobre); }
.bmup-servicos-pagina__directo a { font-weight: var(--bmup-peso-semi); color: var(--bmup-cobre); text-decoration: none; }
.bmup-servicos-pagina__directo a:hover { text-decoration: underline; }

/* o formulário (bg-white rounded-3xl border p-8 space-y-5) */
.bmup-servicos-pagina__forma {
    display: grid; gap: 1.25rem; padding: 2rem;
    border: 1px solid var(--bmup-cinza-200); border-radius: 1.5rem; background: var(--bmup-branco);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.bmup-servicos-pagina__forma[hidden] { display: none; }
.bmup-servicos-pagina__campos { display: grid; gap: 1rem; }
@media (min-width: 640px) {
    .bmup-servicos-pagina__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bmup-servicos-pagina__campo--largo { grid-column: span 2; }
}
.bmup-servicos-pagina__campo { display: grid; gap: .375rem; }
.bmup-servicos-pagina__campo label { font-size: .75rem; font-weight: var(--bmup-peso-semi); text-transform: uppercase; letter-spacing: .05em; color: var(--bmup-cinza-600); }
.bmup-servicos-pagina__campo input,
.bmup-servicos-pagina__campo select,
.bmup-servicos-pagina__campo textarea {
    width: 100%; padding: .75rem 1rem;
    border: 1px solid var(--bmup-cinza-200); border-radius: .75rem; background: var(--bmup-cinza-50);
    font: inherit; font-size: .875rem; color: var(--bmup-cinza-900);
    outline: none; transition: border-color .2s, box-shadow .2s;
}
.bmup-servicos-pagina__campo textarea { resize: none; }
.bmup-servicos-pagina__campo input:focus,
.bmup-servicos-pagina__campo select:focus,
.bmup-servicos-pagina__campo textarea:focus { border-color: var(--bmup-cobre); box-shadow: 0 0 0 2px rgba(172, 116, 80, .2); }
.bmup-servicos-pagina__lista-caixa { position: relative; display: block; }
.bmup-servicos-pagina__lista-caixa select { appearance: none; padding-right: 2.5rem; cursor: pointer; }
.bmup-servicos-pagina__lista-caixa svg { position: absolute; top: 50%; right: 1rem; width: 14px; height: 14px; transform: translateY(-50%) rotate(90deg); color: var(--bmup-cinza-400); pointer-events: none; }
.bmup-servicos-pagina__erro { font-size: .75rem; font-style: normal; font-weight: var(--bmup-peso-medio); color: #b91c1c; }
.bmup-servicos-pagina__aviso { margin: 0; padding: .75rem 1rem; border: 1px solid #fecaca; border-radius: .75rem; background: #fef2f2; font-size: .875rem; color: #b91c1c; }
.bmup-servicos-pagina__armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.bmup-servicos-pagina__enviar {
    display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
    padding: 1rem; border: 0; border-radius: .75rem; background: #0a0a0a;
    font: inherit; font-size: .875rem; font-weight: var(--bmup-peso-semi); color: var(--bmup-branco);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1); cursor: pointer; transition: background-color .2s;
}
.bmup-servicos-pagina__enviar:hover { background: var(--bmup-cobre); }
/* só acende com o nome, o email e o serviço, como no desenho */
.bmup-servicos-pagina__enviar:disabled { background: var(--bmup-cinza-100); color: var(--bmup-cinza-400); box-shadow: none; cursor: not-allowed; }
.bmup-servicos-pagina__enviar svg { width: 16px; height: 16px; }

/* "Pedido enviado!" (py-20 bg-white rounded-3xl) */
.bmup-servicos-pagina__enviado {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    padding: 5rem 2rem; border: 1px solid var(--bmup-cinza-200); border-radius: 1.5rem; background: var(--bmup-branco);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05); animation: bmup-svc-abre .3s ease-out;
}
.bmup-servicos-pagina__enviado-icone { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin-bottom: 1rem; border-radius: 50%; background: #dcfce7; color: #22c55e; }
.bmup-servicos-pagina__enviado-icone svg { width: 30px; height: 30px; }
.bmup-servicos-pagina__enviado h3 { margin: 0 0 .5rem; font-family: var(--bmup-font-titulo); font-size: 1.5rem; font-weight: var(--bmup-peso-forte); color: var(--bmup-cinza-900); }
.bmup-servicos-pagina__enviado p { max-width: 24rem; margin: 0 0 1.5rem; font-size: .875rem; line-height: 1.625; color: var(--bmup-cinza-500); }
.bmup-servicos-pagina__novo { padding: .75rem 1.5rem; border-radius: .75rem; background: #0a0a0a; font-size: .875rem; font-weight: var(--bmup-peso-semi); color: var(--bmup-branco); text-decoration: none; transition: background-color .2s; }
.bmup-servicos-pagina__novo:hover { background: var(--bmup-cobre); }