/* =============================================================================
   BMUP — Páginas de conta
   Login, registo, recuperação de password, activação.

   Carregado pelo Cms/include_files_bmup.tpl e usado pelo canal views/conta.tpl.
   Depende dos tokens do bmup.css — não redeclara cores nem tipos.

   Estrutura: duas colunas. A escura é decorativa e desaparece abaixo dos 1024px,
   como no design (Login.tsx:27 — `hidden lg:flex lg:w-1/2`).
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Estrutura
   -------------------------------------------------------------------------- */

/* O header do site é position: fixed, por isso não ocupa espaço no fluxo — o
   conteúdo tem de lhe abrir lugar por cima, como o pt-[72px] do MainLayout faz
   no design.

   A altura é medida do próprio header, não copiada do design: padding-block
   1rem × 2 + logótipo + 1px de borda. O logótipo passa de 32px a 40px aos
   900px (bmup-home.css:148), por isso a altura muda com ele. */
.bmup.pagina-conta { --bmup-altura-header: 65px; }

@media (min-width: 900px) {
    .bmup.pagina-conta { --bmup-altura-header: 73px; }
}

.bmup .bmup-conta {
    display: flex;
    margin-top: var(--bmup-altura-header, 72px);
    min-height: calc(100vh - var(--bmup-altura-header, 72px));
    min-height: calc(100dvh - var(--bmup-altura-header, 72px));  /* desconta a barra do browser no telemóvel */
    background: var(--bmup-branco);
}

/* --- Coluna escura, decorativa --- */

/* O flex: 0 0 50% não é decoração. Tudo o que está dentro desta coluna é
   absoluto, por isso a sua largura mínima é zero: bastava o formulário do lado
   direito precisar de mais espaço para esta encolher até virar um rectângulo
   estreito. Assim fica presa a metade do ecrã. */
.bmup .bmup-conta__visual {
    display: none;
    position: relative;
    flex: 0 0 50%;
    overflow: hidden;
    background: var(--bmup-preto);
}

@media (min-width: 1024px) {
    .bmup .bmup-conta__visual { display: flex; }
}

.bmup .bmup-conta__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .6;
}

/* Os dois gradientes do design, por esta ordem (o "to right" fica por cima,
   como no Login.tsx, onde é o segundo div):
     bg-gradient-to-r from-[#0a0a0a]/80 to-transparent
     bg-gradient-to-t from-[#0a0a0a] via-[#0a0a0a]/40 to-transparent
   Tinha aqui um terceiro, cor de cobre, que inventei — não existe no design. */
.bmup .bmup-conta__veu {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(10, 10, 10, .8) 0%, transparent 100%),
        linear-gradient(to top,   #0a0a0a 0%, rgba(10, 10, 10, .4) 50%, transparent 100%);
}

.bmup .bmup-conta__visual-conteudo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: 4rem;                              /* p-16 */
}

.bmup .bmup-conta__marca {
    font-family: var(--bmup-font-titulo);
    font-size: var(--bmup-t-2xl);
    line-height: var(--bmup-lh-2xl);
    letter-spacing: .35em;
    color: var(--bmup-branco);
    text-decoration: none;
}

.bmup .bmup-conta__lema {
    max-width: 28rem;                           /* max-w-md */
    margin: 0 0 1.5rem;                         /* mb-6 */
    font-family: var(--bmup-font-titulo);
    font-size: 2.25rem;                         /* text-4xl */
    line-height: 1.25;                          /* leading-tight */
    color: var(--bmup-branco);
}

.bmup .bmup-conta__lema-texto {
    max-width: 28rem;
    margin: 0;
    font-size: var(--bmup-t-lg);                /* text-lg */
    line-height: 1.625;                         /* leading-relaxed */
    color: var(--bmup-cinza-400);               /* text-zinc-400 — 8,9:1 sobre preto */
}

/* --- Coluna do formulário --- */

.bmup .bmup-conta__painel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;          /* deixa o conteúdo encolher em vez de empurrar */
    width: 100%;
    padding: var(--bmup-e-8, 2rem) var(--bmup-e-6, 1.5rem);
}

@media (min-width: 1024px) {
    /* px-6 sm:px-16 md:px-24 lg:px-32 — 8rem a partir dos 1024 */
    .bmup .bmup-conta__painel { padding: 3rem 8rem; }
}

.bmup .bmup-conta__caixa {
    width: 100%;
    max-width: 27rem;
    margin-inline: auto;
}

/* Logótipo que só aparece quando a coluna escura desaparece — senão ficavam dois */
.bmup .bmup-conta__marca-movel {
    display: block;
    margin-bottom: var(--bmup-e-8, 2rem);
    font-family: var(--bmup-font-titulo);
    font-size: var(--bmup-t-xl);
    line-height: var(--bmup-lh-xl);
    letter-spacing: .35em;
    color: var(--bmup-preto);
    text-decoration: none;
}

@media (min-width: 1024px) {
    .bmup .bmup-conta__marca-movel { display: none; }
}

/* Medidas tiradas uma a uma do Login.tsx, não a olho:
   mb-12 = 3rem, mb-10 = 2.5rem, mb-3 = 0.75rem, space-y-5 = 1.25rem,
   space-y-2 = 0.5rem, py-3.5 = 0.875rem, py-4 = 1rem, mt-4 = 1rem. */

.bmup .bmup-conta__voltar {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 3rem;                     /* mb-12 */
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-medio);     /* font-medium */
    color: var(--bmup-cinza-500);            /* text-zinc-500 — 4,83:1, passa */
    text-decoration: none;
    transition: color .2s;
}

.bmup .bmup-conta__voltar:hover { color: var(--bmup-cinza-800); }   /* hover:text-zinc-800 */
.bmup .bmup-conta__voltar svg    { width: 1rem; height: 1rem; }

.bmup .bmup-conta__titulo {
    margin: 0 0 .75rem;                      /* mb-3 */
    font-family: var(--bmup-font-titulo);
    font-size: var(--bmup-t-3xl);
    line-height: var(--bmup-lh-3xl);
    letter-spacing: -.025em;                 /* tracking-tight */
    color: var(--bmup-cinza-900);
}

.bmup .bmup-conta__sub {
    margin: 0 0 2.5rem;                      /* mb-10 do bloco do título */
    color: var(--bmup-cinza-500);            /* text-zinc-500 */
}

/* -----------------------------------------------------------------------------
   2. Campos
   -------------------------------------------------------------------------- */

.bmup .bmup-conta__campo { margin-bottom: 1.25rem; }   /* space-y-5 do <form> */

.bmup .bmup-conta__campo-topo {
    display: flex;
    align-items: center;                        /* items-center, não baseline */
    justify-content: space-between;
    gap: 1rem;
}

/* As duas etiquetas são iguais no design — a da password vive dentro do
   __topo, mas o estilo é o mesmo. O espaço até ao campo vem daqui em ambos
   os casos, para as duas ficarem à mesma distância. */
.bmup .bmup-conta__campo label {
    display: block;
    margin-bottom: .5rem;                       /* space-y-2 */
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);                /* text-sm */
    font-weight: var(--bmup-peso-semi);         /* font-semibold */
    color: var(--bmup-cinza-700);               /* text-zinc-700 */
}

/* Dentro da linha flex a margem da etiqueta não serve de espaçador — passa
   para a própria linha, senão a password ficava mais colada ao campo. */
.bmup .bmup-conta__campo-topo label { margin-bottom: 0; }
.bmup .bmup-conta__campo-topo       { margin-bottom: .5rem; }

.bmup .bmup-conta__obrigatorio { color: var(--bmup-cobre); }

.bmup .bmup-conta__envolve { position: relative; }

/* O ícone à esquerda e o botão do olho à direita ficam por cima do input;
   o preenchimento do input abre espaço para eles. */
.bmup .bmup-conta__icone {
    position: absolute;
    top: 50%;
    left: .875rem;                  /* pl-3.5 */
    transform: translateY(-50%);
    width: 1.25rem;                 /* h-5 w-5 */
    height: 1.25rem;
    color: var(--bmup-cinza-400);
    pointer-events: none;
    transition: color .2s;
}

/* No design o ícone acende a cobre quando o campo tem foco
   (group-focus-within:text-[#ac7450]). Faltava. */
.bmup .bmup-conta__envolve:focus-within .bmup-conta__icone { color: var(--bmup-cobre); }

/* Na caixa de varias linhas (Morada) o icone fica na primeira linha, como o
   texto, e nao a meio da caixa. */
.bmup .bmup-conta__envolve:has(textarea) .bmup-conta__icone {
    top: 1.0625rem;
    transform: none;
}

.bmup .bmup-conta__campo input[type="text"],
.bmup .bmup-conta__campo input[type="email"],
.bmup .bmup-conta__campo input[type="password"],
.bmup .bmup-conta__campo input[type="date"],
.bmup .bmup-conta__campo input[type="tel"],
.bmup .bmup-conta__campo select,
.bmup .bmup-conta__campo textarea {
    width: 100%;
    padding: .875rem 1rem .875rem 2.75rem;   /* py-3.5 · pr-4 · pl-11 */
    font-family: var(--bmup-font-corpo);
    font-size: var(--bmup-t-base);
    line-height: var(--bmup-lh-base);
    color: var(--bmup-cinza-900);
    background: rgba(250, 250, 250, .5);     /* bg-zinc-50/50 */
    border: 1px solid var(--bmup-cinza-200);
    border-radius: 12px;                     /* rounded-xl */
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);/* shadow-sm */
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    -webkit-appearance: none;
            appearance: none;
}

/* Campo com o botão do olho: abre espaço à direita (pr-11 no design), senão
   o texto passa por baixo do botão. */
.bmup .bmup-conta__envolve--olho input { padding-right: 2.75rem; }

/* Sem ícone, o texto começa onde deve */
.bmup .bmup-conta__campo--liso input,
.bmup .bmup-conta__campo--liso select,
.bmup .bmup-conta__campo--liso textarea { padding-left: 1rem; }

/* O design usa text-zinc-400 (#a1a1aa) nos placeholders, que sobre este fundo
   dá 2,46:1 — abaixo de qualquer mínimo, mesmo o de texto grande. Subi um
   degrau, para 4,63:1. Não é cor de marca, é cinzento neutro, e o texto continua
   a ler-se como sugestão. Está anotado no PLANO.md para quem desenhou decidir se
   quer isto em todo o site. */
.bmup .bmup-conta__campo input::placeholder,
.bmup .bmup-conta__campo textarea::placeholder { color: var(--bmup-cinza-500); }

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

.bmup .bmup-conta__campo select {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
}

/* Botão de mostrar/esconder a password */
.bmup .bmup-conta__olho {
    position: absolute;
    top: 50%;
    right: .6rem;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    color: var(--bmup-cinza-500);
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: color .2s, background .2s;
}

/* O botão só existe com JavaScript — sem ele não faria nada, e um botão morto
   é pior do que botão nenhum. O .bmup-js é posto no <html> pelo canal.
   As duas regras não dependem da ordem: a segunda tem mais especificidade. */
.bmup    .bmup-conta__olho { display: none; }
.bmup-js .bmup .bmup-conta__olho { display: flex; }

.bmup .bmup-conta__olho:hover {
    color: var(--bmup-cinza-900);
    background: var(--bmup-cinza-100);
}

.bmup .bmup-conta__olho svg { width: 1.1rem; height: 1.1rem; }

.bmup .bmup-conta__ajuda {
    display: block;
    margin-top: .4rem;
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    color: var(--bmup-cinza-600);
}

.bmup .bmup-conta__erro {
    display: block;
    margin-top: .4rem;
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    color: #b91c1c;                 /* mais escuro que o --bmup-vermelho: 5,9:1 */
}

.bmup .bmup-conta__campo--mau input,
.bmup .bmup-conta__campo--mau select { border-color: #b91c1c; }

.bmup .bmup-conta__ligacao {
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-medio);
    color: var(--bmup-cobre);
    text-decoration: none;
}

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

/* -----------------------------------------------------------------------------
   3. Botão de submissão e rodapé da caixa
   -------------------------------------------------------------------------- */

.bmup .bmup-conta__submeter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    margin-top: 1rem;                        /* mt-4 */
    padding: 1rem 1.5rem;                    /* py-4 */
    font-family: var(--bmup-font-corpo);
    font-size: var(--bmup-t-base);
    line-height: var(--bmup-lh-base);
    font-weight: var(--bmup-peso-medio);     /* font-medium */
    color: var(--bmup-branco);
    background: var(--bmup-preto-botao);     /* bg-[#161616] */
    border: 0;
    border-radius: 12px;                     /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .05);  /* shadow-lg shadow-black/5 */
    cursor: pointer;
    transition: background .2s, transform .1s;
}

/* hover:bg-black — era cobre, e isso fui eu que inventei */
.bmup .bmup-conta__submeter:hover  { background: #000000; }
.bmup .bmup-conta__submeter:active { transform: translateY(1px); }
.bmup .bmup-conta__submeter svg    { width: 1.125rem; height: 1.125rem; }

/* mt-10 text-center space-y-3 — sem borda. A borda também era invenção minha. */
.bmup .bmup-conta__rodape {
    margin-top: 2.5rem;
    text-align: center;
}

.bmup .bmup-conta__rodape p {
    margin: 0 0 .75rem;                      /* space-y-3 */
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    color: var(--bmup-cinza-500);            /* text-zinc-500 */
}

.bmup .bmup-conta__rodape p:last-child { margin-bottom: 0; }

/* "Registar agora": text-zinc-900 font-semibold underline decoration-zinc-300
   underline-offset-4, e no hover cobre em texto e sublinhado. */
.bmup .bmup-conta__rodape a {
    font-weight: var(--bmup-peso-semi);      /* font-semibold */
    color: var(--bmup-cinza-900);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--bmup-cinza-300);
    transition: color .2s, text-decoration-color .2s;
}

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

/* "Ver Planos Disponíveis": cobre, sem sublinhado, nem no hover */
.bmup .bmup-conta__rodape a.e-cobre       { color: var(--bmup-cobre); text-decoration: none; }
.bmup .bmup-conta__rodape a.e-cobre:hover { color: var(--bmup-cobre-escuro); text-decoration: none; }

/* -----------------------------------------------------------------------------
   4. Avisos
   -------------------------------------------------------------------------- */

/* O bmup.js esconde a faixa de erro fora do passo dela, e a mensagem de um
   campo quando se escreve nele (2026-10-06): o display abaixo ganhava ao
   [hidden]. */
.bmup .bmup-aviso[hidden],
.bmup .bmup-conta__erro[hidden] { display: none; }

/* Login: o botão "Enviar o email de confirmação outra vez" ficava colado ao
   campo do email — o mesmo espaço que a faixa tem por baixo (2026-10-06). */
.bmup .bmup-conta__reenviar { margin-bottom: 1.5rem; }

.bmup .bmup-aviso {
    display: flex;
    gap: .7rem;
    margin-bottom: 1.5rem;
    padding: .9rem 1rem;
    font-size: var(--bmup-t-sm);
    line-height: 1.5;
    border: 1px solid;
    border-radius: 12px;
}

.bmup .bmup-aviso svg { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: .1rem; }

.bmup .bmup-aviso--mau {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}

.bmup .bmup-aviso--bom {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.bmup .bmup-aviso--nota {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a;
}


/* ==========================================================================
   REGISTO EM PASSOS
   Usa as mesmas pecas do login (campos, botoes, avisos) e acrescenta so o
   que e proprio: a barra dos passos, a escolha do plano e o pagamento.
   ========================================================================== */

/* A caixa do registo e mais larga que a do login: sao dez campos, e a dois
   por linha respiram melhor. */
.bmup .bmup-conta__caixa--larga { max-width: 34rem; }

@media (min-width: 1024px) {
    .bmup .bmup-conta--registo .bmup-conta__visual { flex: 0 0 40%; }
}

/* --- Barra dos passos do registo ---
 *
 * Chamava-se .bmup-passos e colidia com a grelha "Como Funciona" da homepage,
 * que usa o mesmo nome no bmup-home.css. Como aqui o selector e
 * `.bmup .bmup-passos` (0,2,0) e la e `.bmup-passos` (0,1,0), esta regra
 * ganhava EM TODAS AS PAGINAS: a grelha da homepage deixava de ser grid e os
 * tres cartoes saiam com larguras diferentes.
 *
 * E a segunda vez que o mesmo par de nomes faz isto — o .bmup-passo singular
 * ja tinha sido renomeado para .bmup-registo__passo a 2026-09-09, e o plural
 * ficou por corrigir. Prefixar com bmup-registo__ e o que evita a terceira. */

/* As seccoes de cada passo do registo.
 *
 * SEM ESTILOS, e de proposito. A classe existe para NAO herdarem nada: antes
 * chamavam-se .bmup-passo e apanhavam o padding, a borda e o texto centrado do
 * cartao "Como Funciona" da homepage, que usa esse nome no bmup-home.css.
 *
 * Mostrar e esconder e' feito pelo atributo [data-passo] e pela propriedade
 * hidden, no bmup.js — nao por classe. Nao acrescentar aqui regras de caixa
 * sem uma razao: o formulario ja e' desenhado pelo .bmup-conta__*. */
.bmup .bmup-registo__passo { /* intencionalmente vazio */ }

.bmup .bmup-registo__barra {
    display: flex;
    align-items: center;
    gap: var(--bmup-e-2, .5rem);
    list-style: none;
    margin: 0 0 var(--bmup-e-8, 2rem);
    padding: 0;
}

.bmup .bmup-registo__barra-item {
    display: flex;
    align-items: center;
    gap: var(--bmup-e-2, .5rem);
    flex: 1 1 0;
    min-width: 0;
}

.bmup .bmup-registo__barra-item + .bmup-registo__barra-item::before {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--bmup-pedra-200);
}

.bmup .bmup-registo__barra-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--bmup-raio-total);
    background: var(--bmup-cinza-100);
    color: var(--bmup-cinza-500);
    font-size: var(--bmup-t-xs);
    line-height: 1;
    font-weight: var(--bmup-peso-semi);
}

.bmup .bmup-registo__barra-nome {
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    color: var(--bmup-cinza-500);
    white-space: nowrap;
}

/* Em ecra pequeno so se ve o numero do passo — os nomes nao cabem */
@media (max-width: 560px) {
    .bmup .bmup-registo__barra-nome { display: none; }
}

.bmup .bmup-registo__barra-item.is-actual .bmup-registo__barra-num {
    background: var(--bmup-cobre);
    color: var(--bmup-branco);
}

.bmup .bmup-registo__barra-item.is-actual .bmup-registo__barra-nome {
    color: var(--bmup-cinza-900);
    font-weight: var(--bmup-peso-semi);
}

.bmup .bmup-registo__barra-item.is-feito .bmup-registo__barra-num {
    background: var(--bmup-cinza-900);
    color: var(--bmup-branco);
}

/* --- Dois campos por linha --- */

.bmup .bmup-conta__par { display: grid; grid-template-columns: 1fr; gap: 0 var(--bmup-e-4, 1rem); }

@media (min-width: 560px) {
    .bmup .bmup-conta__par { grid-template-columns: 1fr 1fr; }
}

/* --- Erro e ajuda por baixo do campo --- */

.bmup .bmup-conta__erro {
    margin: var(--bmup-e-1, .25rem) 0 0;
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    color: #b91c1c;
}

.bmup .bmup-conta__ajuda {
    margin: var(--bmup-e-1, .25rem) 0 0;
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    color: var(--bmup-cinza-500);
}

.bmup .bmup-conta__ajuda--centro { text-align: center; margin-top: var(--bmup-e-4, 1rem); }
.bmup .bmup-conta__ajuda a { color: var(--bmup-cobre); font-weight: var(--bmup-peso-semi); }

.bmup .bmup-conta__campo.is-mau input,
.bmup .bmup-conta__campo.is-mau select,
.bmup .bmup-conta__campo.is-mau textarea { border-color: rgba(185, 28, 28, .5); }

/* --- Escolha do plano (passo 2) --- */

.bmup .bmup-escolha { display: flex; flex-direction: column; gap: var(--bmup-e-3, .75rem); }

.bmup .bmup-escolha__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--bmup-e-3, .75rem);
    padding: var(--bmup-e-4, 1rem);
    border: 1px solid var(--bmup-pedra-200);
    border-radius: var(--bmup-raio-md);
    cursor: pointer;
    transition: border-color var(--bmup-trans), background var(--bmup-trans);
}

.bmup .bmup-escolha__item:hover { border-color: var(--bmup-cinza-300); }

/* O radio verdadeiro fica escondido mas continua a ser ele a mandar: e o
   :has() que pinta o cartao, para o teclado funcionar como o rato. */
.bmup .bmup-escolha__item input { position: absolute; opacity: 0; pointer-events: none; }

.bmup .bmup-escolha__marca {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid var(--bmup-pedra-200);
    border-radius: var(--bmup-raio-total);
    transition: border-color var(--bmup-trans), box-shadow var(--bmup-trans);
}

.bmup .bmup-escolha__item:has(input:checked) {
    border-color: var(--p-acento, var(--bmup-cobre));
    background: var(--p-caixa-fundo, rgba(172, 116, 80, .05));
}

.bmup .bmup-escolha__item:has(input:checked) .bmup-escolha__marca {
    border-color: var(--p-acento, var(--bmup-cobre));
    box-shadow: inset 0 0 0 3px var(--bmup-branco), inset 0 0 0 1rem var(--p-acento, var(--bmup-cobre));
}

.bmup .bmup-escolha__item:has(input:focus-visible) { outline: 2px solid var(--bmup-cobre); outline-offset: 2px; }

.bmup .bmup-escolha__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--bmup-raio-md);
    background: var(--p-icone-fundo, var(--bmup-cinza-100));
    color: var(--p-acento, var(--bmup-cobre));
}

.bmup .bmup-escolha__texto { flex: 1 1 auto; min-width: 0; }

.bmup .bmup-escolha__nome {
    display: block;
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-semi);
    color: var(--bmup-cinza-900);
}

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

.bmup .bmup-escolha__preco {
    flex: 0 0 auto;
    text-align: right;
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-forte);
    color: var(--bmup-cinza-900);
}

.bmup .bmup-escolha__preco span {
    display: block;
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    font-weight: var(--bmup-peso-normal);
    color: var(--bmup-cinza-400);
}

/* --- Botoes lado a lado --- */

.bmup .bmup-conta__botoes {
    display: flex;
    align-items: center;
    gap: var(--bmup-e-3, .75rem);
    margin-top: var(--bmup-e-6, 1.5rem);
}

.bmup .bmup-conta__botoes .bmup-conta__submeter { flex: 1 1 auto; margin-top: 0; }

.bmup .bmup-conta__anterior {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bmup-e-2, .5rem);
    flex: 0 0 auto;
    padding: .875rem var(--bmup-e-5, 1.25rem);
    border: 1px solid var(--bmup-pedra-200);
    border-radius: var(--bmup-raio-md);
    background: transparent;
    color: var(--bmup-cinza-600);
    font-family: var(--bmup-font-corpo);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-medio);
    cursor: pointer;
    transition: background var(--bmup-trans);
}

.bmup .bmup-conta__anterior:hover { background: var(--bmup-cinza-50); }
.bmup .bmup-conta__anterior svg { width: 1rem; height: 1rem; }

.bmup .bmup-conta__submeter.is-travado,
.bmup .bmup-conta__submeter:disabled {
    background: var(--bmup-cinza-100);
    color: var(--bmup-cinza-400);
    cursor: not-allowed;
}

/* --- Passo 3: resumo, metodos e pagamento --- */

.bmup .bmup-resumo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bmup-e-4, 1rem);
    padding: var(--bmup-e-4, 1rem);
    border: 1px solid var(--bmup-pedra-200);
    border-radius: var(--bmup-raio-md);
    background: var(--bmup-cinza-50);
    margin-bottom: var(--bmup-e-6, 1.5rem);
}

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

.bmup .bmup-resumo__valor {
    margin: 0;
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-semi);
    color: var(--bmup-cinza-900);
}

.bmup .bmup-resumo__preco {
    margin: 0;
    font-size: var(--bmup-t-lg);
    line-height: var(--bmup-lh-lg);
    font-weight: var(--bmup-peso-forte);
    color: var(--bmup-cinza-900);
    white-space: nowrap;
}

.bmup .bmup-resumo__preco span {
    font-size: var(--bmup-t-xs);
    font-weight: var(--bmup-peso-normal);
    color: var(--bmup-cinza-400);
}

.bmup .bmup-metodos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bmup-e-3, .75rem);
    margin-bottom: var(--bmup-e-5, 1.25rem);
}

.bmup .bmup-metodos__opcao {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bmup-e-2, .5rem);
    padding: var(--bmup-e-3, .75rem);
    border: 1px solid var(--bmup-pedra-200);
    border-radius: var(--bmup-raio-md);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-medio);
    color: var(--bmup-cinza-600);
    cursor: pointer;
    transition: border-color var(--bmup-trans), background var(--bmup-trans);
}

.bmup .bmup-metodos__opcao input { position: absolute; opacity: 0; pointer-events: none; }
.bmup .bmup-metodos__opcao svg { width: 1.1rem; height: 1.1rem; }

.bmup .bmup-metodos__opcao:has(input:checked) {
    border-color: var(--bmup-cinza-900);
    background: var(--bmup-cinza-50);
    color: var(--bmup-cinza-900);
}

/* Depois de escolher o meio, o site volta a esta página com #pagamento: o
   browser encostava o cartão ao topo e o cabeçalho fixo tapava-lhe a parte
   de cima (2026-10-06). Desconta-se a altura do cabeçalho — o do site no
   registo, a barra da área de membro no O Meu Plano — mais uma folga. */
.bmup .bmup-pagamento {
    scroll-margin-top: calc(max(var(--bmup-altura-header, 4.5rem), var(--membro-topo, 4.5rem)) + 1.5rem);
}

/* No O Meu Plano o cartão está dentro de uma caixa com título por cima
   ("Pagamento por concluir"): desce-se o suficiente para o título se ver. */
.bmup .bmup-pagamento--no-plano {
    scroll-margin-top: calc(var(--membro-topo, 5rem) + 5rem);
}

.bmup .bmup-pagamento {
    padding: var(--bmup-e-5, 1.25rem);
    border: 1px solid var(--bmup-cinza-800);
    border-radius: var(--bmup-raio-lg);
    background: var(--bmup-preto);
}

.bmup .bmup-pagamento__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bmup-e-3, .75rem);
    margin-bottom: var(--bmup-e-4, 1rem);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-semi);
    color: var(--bmup-branco);
}

.bmup .bmup-pagamento__nota {
    font-size: var(--bmup-t-xs);
    font-weight: var(--bmup-peso-normal);
    color: var(--bmup-cinza-400);
}

.bmup .bmup-pagamento__linhas { margin: 0; }

.bmup .bmup-pagamento__linhas > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bmup-e-4, 1rem);
    padding-block: var(--bmup-e-2, .5rem);
    border-bottom: 1px solid var(--bmup-cinza-800);
}

.bmup .bmup-pagamento__linhas > div:last-child { border-bottom: 0; }

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

.bmup .bmup-pagamento__linhas dd {
    margin: 0;
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-semi);
    color: var(--bmup-branco);
    font-variant-numeric: tabular-nums;
}

.bmup .bmup-pagamento__falta {
    font-weight: var(--bmup-peso-normal);
    font-style: italic;
    color: var(--bmup-ambar);
}

.bmup .bmup-aviso--espera {
    border-color: rgba(217, 119, 6, .35);
    background: rgba(217, 119, 6, .08);
    color: #b45309;
}


/* --- Passo 3 enquanto nao ha pagamentos pelo portal: uma mensagem so' --- */

.bmup .bmup-proximo {
    padding: var(--bmup-e-6, 1.5rem) var(--bmup-e-5, 1.25rem);
    margin-bottom: var(--bmup-e-6, 1.5rem);
    text-align: center;
    border: 1px solid var(--bmup-pedra-200);
    border-radius: var(--bmup-raio-lg);
    background: var(--bmup-branco);
}

.bmup .bmup-proximo__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--bmup-e-3, .75rem);
    border-radius: 50%;
    background: rgba(172, 116, 80, .1);
    color: var(--bmup-cobre);
}

.bmup .bmup-proximo__icone svg { width: 1.35rem; height: 1.35rem; }

.bmup .bmup-proximo__titulo {
    margin: 0 0 var(--bmup-e-2, .5rem);
    font-size: var(--bmup-t-base);
    line-height: var(--bmup-lh-base);
    font-weight: var(--bmup-peso-semi);
    color: var(--bmup-cinza-900);
}

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

.bmup .bmup-proximo__ref {
    margin: var(--bmup-e-4, 1rem) 0 0;
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    color: var(--bmup-cinza-500);
}

.bmup .bmup-proximo__ref strong {
    margin-left: .35rem;
    font-weight: var(--bmup-peso-semi);
    color: var(--bmup-cinza-900);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}


/* --- Caixa de notas ("não chegou nada?", "porque é que isto acontece") --- */

.bmup .bmup-conta__nota {
    padding: var(--bmup-e-4, 1rem);
    border: 1px solid var(--bmup-pedra-200);
    border-radius: var(--bmup-raio-md);
    background: var(--bmup-cinza-50);
    margin-bottom: var(--bmup-e-6, 1.5rem);
}

.bmup .bmup-conta__nota p {
    margin: 0 0 var(--bmup-e-2, .5rem);
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
    font-weight: var(--bmup-peso-semi);
    color: var(--bmup-cinza-900);
}

.bmup .bmup-conta__nota ul {
    margin: 0;
    padding-inline-start: var(--bmup-e-4, 1rem);
    display: flex;
    flex-direction: column;
    gap: var(--bmup-e-2, .5rem);
}

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

.bmup .bmup-conta__nota li::marker { color: var(--bmup-cinza-300); }
.bmup .bmup-conta__nota b { font-weight: var(--bmup-peso-semi); color: var(--bmup-cinza-900); }

/* Um <a> com cara de botão precisa de dizer que é uma linha só e centrada —
   o <button> já o fazia sozinho */
.bmup a.bmup-conta__submeter { text-decoration: none; }


/* ==========================================================================
   PESOS — medido a 2026-09-10 contra o protótipo
   ========================================================================== */

.bmup .bmup-conta__lema            { font-weight: var(--bmup-peso-forte); }
.bmup .bmup-conta__titulo          { font-weight: var(--bmup-peso-forte); }
.bmup .bmup-registo__barra-nome    { font-weight: var(--bmup-peso-medio); }
.bmup .bmup-conta--registo .bmup-conta__submeter { font-weight: var(--bmup-peso-semi); }


/* Tamanhos medidos a 2026-09-10.
 *
 * ATENCAO: as classes .bmup-conta__* servem O LOGIN E O REGISTO, e o desenho
 * usa tamanhos DIFERENTES em cada um:
 *
 *              titulo              botao
 *   login      30px / -0.75px      16px / 500
 *   registo    24px / normal       14px / 600
 *
 * Cheguei a pôr os valores do registo na regra base e desacertei o login —
 * apanhado pela medição na ronda seguinte. Por isso o registo vai pelo
 * .bmup-conta--registo, que é o modificador do contentor. */

.bmup .bmup-conta--registo .bmup-conta__titulo {
    font-size: var(--bmup-t-2xl);
    line-height: var(--bmup-lh-2xl);
    letter-spacing: normal;
}

.bmup .bmup-conta--registo .bmup-conta__sub {
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
}

.bmup .bmup-registo__barra-nome { color: var(--bmup-cinza-400); }

.bmup .bmup-conta--registo .bmup-conta__submeter {
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
}

/* Os campos do registo sao text-sm no desenho (os do login nao). Sem isto a
   data e o Pais — os unicos com texto antes de se escrever — pareciam maiores
   que o resto. */
.bmup .bmup-conta--registo .bmup-conta__campo input,
.bmup .bmup-conta--registo .bmup-conta__campo select,
.bmup .bmup-conta--registo .bmup-conta__campo textarea {
    font-size: var(--bmup-t-sm);
    line-height: var(--bmup-lh-sm);
}

/* Morada: no desenho e' um campo de uma linha. Fica textarea (o modelo e'
   Text, ate 800 caracteres) mas com a altura dos outros campos (rows="1" no
   form-registo.tpl) e cresce enquanto se escreve, onde o browser o suporta. */
.bmup .bmup-conta--registo .bmup-conta__campo textarea {
    min-height: 0;
    resize: vertical;
    field-sizing: content;
}

/* A etiqueta obrigatoria dos formularios: 500 e cinza claro, nao 600 escuro. */
.bmup label.required {
    font-weight: var(--bmup-peso-medio);
    color: var(--bmup-cinza-400);
}

/* --- Código de parceiro, no passo 2 (2026-10-06) --- */

.bmup .bmup-registo__codigo {
    margin: var(--bmup-e-5, 1.25rem) 0 var(--bmup-e-2, .5rem);
}

/* A linha que abre o campo: sem o triângulo do browser (2026-10-06, "a
   setinha estava feia") — etiqueta à esquerda, "+" à direita que passa a
   "−" quando abre. Tracejada enquanto fechada: é um extra, não um campo. */
.bmup .bmup-registo__codigo summary {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .75rem 1rem;
    border: 1px dashed var(--bmup-cinza-300);
    border-radius: 12px;
    font-size: var(--bmup-t-sm, .875rem);
    font-weight: var(--bmup-peso-medio);
    color: var(--bmup-cinza-700);
    cursor: pointer;
    list-style: none;
    transition: border-color .2s, background-color .2s, color .2s;
}

.bmup .bmup-registo__codigo summary::-webkit-details-marker { display: none; }
.bmup .bmup-registo__codigo summary::marker { content: ''; }

.bmup .bmup-registo__codigo summary:hover {
    border-color: var(--bmup-cobre);
    color: var(--bmup-cinza-900);
}

.bmup .bmup-registo__codigo summary > span:first-of-type { flex: 1; }

.bmup .bmup-registo__codigo .bmup-registo__codigo-icone {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--bmup-cobre);
}

.bmup .bmup-registo__codigo-mais::before {
    content: '+';
    display: block;
    width: 1rem;
    text-align: center;
    font-size: 1.125rem;
    line-height: 1;
    font-weight: var(--bmup-peso-medio);
    color: var(--bmup-cobre);
}

.bmup .bmup-registo__codigo[open] .bmup-registo__codigo-mais::before { content: '\2212'; }

.bmup .bmup-registo__codigo[open] summary {
    margin-bottom: var(--bmup-e-3, .75rem);
    border-style: solid;
    border-color: var(--bmup-cinza-200);
}
.bmup .bmup-registo__codigo .bmup-conta__campo { margin-bottom: 0; }
.bmup .bmup-registo__codigo input { text-transform: uppercase; }

/* --- "Ao registar, aceita os Termos e a Privacidade" (2026-10-06) ---
   text-xs text-zinc-400 do desenho, links a cobre. */
.bmup .bmup-conta__legal {
    margin: var(--bmup-e-4, 1rem) 0;
    font-size: var(--bmup-t-xs);
    line-height: var(--bmup-lh-xs);
    color: var(--bmup-cinza-400);
}

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

/* --- A Política de Privacidade lida até ao fim (2026-10-16) ---
   "Como nas apps dos bancos": um cartão que abre a Política numa janela; o
   "Li e aceito" só se liga no fim do texto (bmup.js). Sem JavaScript fica a
   caixa para marcar, com o link. */

.bmup .bmup-registo__privacidade { margin: var(--bmup-e-5, 1.25rem) 0 var(--bmup-e-2, .5rem); }

/* a caixa (sem JavaScript) */
.bmup .bmup-registo__aceitar {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin: 0;
    font-size: var(--bmup-t-sm, .875rem);
    font-weight: var(--bmup-peso-normal, 400);
    line-height: 1.5;
    color: var(--bmup-cinza-700);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}
.bmup .bmup-registo__aceitar[hidden] { display: none; }
.bmup .bmup-registo__aceitar input {
    width: 1.125rem;
    height: 1.125rem;
    margin: .125rem 0 0;
    flex-shrink: 0;
    accent-color: var(--bmup-cobre);
}
.bmup .bmup-registo__aceitar a { color: var(--bmup-cobre); }

/* o cartão (com JavaScript) */
.bmup .bmup-registo__privacidade-cartao {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    border: 1px solid var(--bmup-cinza-200);
    border-radius: 12px;
    background: var(--bmup-branco);
    transition: border-color .2s, background-color .2s;
}
.bmup .bmup-registo__privacidade-cartao[hidden] { display: none; }
.bmup .bmup-registo__privacidade-icone { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--bmup-cobre); }
.bmup .bmup-registo__privacidade-texto {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
    font-size: var(--bmup-t-sm, .875rem);
    line-height: 1.4;
    color: var(--bmup-cinza-500);
}
.bmup .bmup-registo__privacidade-texto b { font-weight: var(--bmup-peso-semi); color: var(--bmup-cinza-900); }
.bmup .bmup-registo__privacidade-botao {
    flex-shrink: 0;
    padding: .5rem .875rem;
    border: 1px solid var(--bmup-cobre);
    border-radius: 10px;
    background: var(--bmup-branco);
    font: inherit;
    font-size: var(--bmup-t-xs, .75rem);
    font-weight: var(--bmup-peso-semi);
    color: var(--bmup-cobre);
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}
.bmup .bmup-registo__privacidade-botao:hover { background: var(--bmup-cobre); color: var(--bmup-branco); }

/* por ler / lida e aceite */
.bmup .bmup-registo__privacidade [data-privacidade-feito] { display: none; }
.bmup .bmup-registo__privacidade.is-aceite [data-privacidade-feito] { display: inline; }
.bmup .bmup-registo__privacidade.is-aceite [data-privacidade-falta] { display: none; }
.bmup .bmup-registo__privacidade.is-aceite .bmup-registo__privacidade-cartao { border-color: #bbf7d0; background: #f0fdf4; }
.bmup .bmup-registo__privacidade.is-aceite .bmup-registo__privacidade-icone { color: #16a34a; }
.bmup .bmup-registo__privacidade.is-aceite .bmup-registo__privacidade-botao { border-color: var(--bmup-cinza-200); color: var(--bmup-cinza-600); }
.bmup .bmup-registo__privacidade.is-aceite .bmup-registo__privacidade-botao:hover { background: var(--bmup-cinza-50); }

/* num telemóvel estreito o botão passa para baixo, a toda a largura */
@media (max-width: 420px) {
    .bmup .bmup-registo__privacidade-cartao { flex-wrap: wrap; }
    .bmup .bmup-registo__privacidade-botao { width: 100%; padding-block: .625rem; }
}

/* a janela de leitura: mais larga que as outras, e o texto do CMS sem a
   moldura de cartão da página (já está dentro de uma) */
/* dialog. a frente: o bmup-membro.css carrega depois e ganhava no empate */
dialog.bmup-janela--leitura { max-width: 44rem; height: min(88vh, 52rem); }
.bmup-janela--leitura .bmup-janela__fechar { border: 0; background: none; cursor: pointer; }
.bmup-janela__lido { flex-shrink: 0; height: 3px; background: var(--bmup-cinza-100); }
.bmup-janela__lido span { display: block; width: 0; height: 100%; background: var(--bmup-cobre); transition: width .15s linear; }
.bmup-janela__corpo--leitura { padding: 1.5rem; outline: none; overscroll-behavior: contain; }
.bmup-janela__corpo--leitura:focus-visible { box-shadow: inset 0 0 0 2px rgba(172, 116, 80, .35); }
.bmup-janela--leitura .bmup-legal__cartao { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.bmup-janela--leitura .bmup-legal__cartao + .bmup-legal__cartao { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--bmup-cinza-100); }
.bmup-janela--leitura .bmup-legal__cartao h2 { margin-bottom: 1rem; font-size: 1.25rem; line-height: 1.3; }
.bmup-janela--leitura .bmup-janela__principal svg { width: 15px; height: 15px; }
@media (max-width: 480px) {
    dialog.bmup-janela--leitura { height: 92vh; max-height: 92vh; }
    .bmup-janela__corpo--leitura { padding: 1.25rem 1rem; }
    .bmup-janela--leitura .bmup-janela__topo { padding: 1.25rem 1rem .875rem; }
    .bmup-janela--leitura .bmup-janela__rodape { padding: .875rem 1rem 1rem; }
}