/* Painel Comercial BSSP. A base da marca (tinta, dourado, Montserrat, a assinatura em máscara) é a mesma do Pergunte ao Madruga: dois produtos internos que precisam parecer da mesma casa. Daqui para baixo vem o que é só deste painel. */ :root { --tinta: #031d31; --dourado: #f6cd82; --dourado-forte: #e0ac4d; --ground-1: #f1f1f1; --ground-2: #e9e9e9; --marca: var(--tinta); --texto: #031d31; --texto-fraco: #5b6b7c; --borda: rgba(3, 29, 49, 0.12); --borda-forte: rgba(3, 29, 49, 0.22); --vidro: rgba(255, 255, 255, 0.72); --vidro-fino: rgba(255, 255, 255, 0.5); --sombra: 0 18px 40px rgba(3, 29, 49, 0.12); --bolha-eu: rgba(3, 29, 49, 0.94); --bolha-eu-texto: #ffffff; --bolha-ele: rgba(255, 255, 255, 0.86); --erro: #b3261e; --ok: #0f7b52; --realce: rgba(3, 29, 49, 0.055); --realce-forte: rgba(3, 29, 49, 0.10); --solido: #031d31; --solido-texto: #ffffff; --superficie: #fbfbfc; --raio: 18px; --fonte: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } [data-tema='escuro'] { --ground-1: #02121f; --ground-2: #031d31; --marca: #ffffff; --texto: #eaf1f8; --texto-fraco: #93a7ba; --borda: rgba(255, 255, 255, 0.12); --borda-forte: rgba(255, 255, 255, 0.22); --vidro: rgba(255, 255, 255, 0.07); --vidro-fino: rgba(255, 255, 255, 0.045); --sombra: 0 18px 40px rgba(0, 0, 0, 0.45); --bolha-eu: rgba(246, 205, 130, 0.16); --bolha-eu-texto: #f7e6c4; --bolha-ele: rgba(255, 255, 255, 0.07); --erro: #ff8a80; --ok: #6ee7b7; --realce: rgba(255, 255, 255, 0.07); --realce-forte: rgba(255, 255, 255, 0.12); --solido: #f0f5fa; --solido-texto: #031d31; --superficie: #0a2033; } * { box-sizing: border-box; } html, body { height: 100%; } /* A tela do chat é um app, não um documento: nada de rolar a página inteira nem de "bounce" quando o dedo passa do fim. Só a lista de mensagens rola. É isso que segura o layout no lugar quando o teclado do celular sobe. O "position: fixed" fica só no body. Colocar no também é o que fazia o Safari do iPhone se perder: ele passa a medir a página contra um elemento que não é mais a raiz de rolagem, e o resultado é tela pulando e conversa que não desce. */ html.app { height: 100%; overflow: hidden; overscroll-behavior: none; } body.app { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; } body { margin: 0; font-family: var(--fonte); color: var(--texto); background: var(--ground-1); background-image: radial-gradient(56rem 40rem at 6% -14%, rgba(246, 205, 130, 0.55), transparent 60%), radial-gradient(50rem 40rem at 98% 4%, rgba(3, 29, 49, 0.10), transparent 62%), radial-gradient(44rem 34rem at 54% 114%, rgba(3, 29, 49, 0.07), transparent 58%); background-attachment: fixed; -webkit-font-smoothing: antialiased; } [data-tema='escuro'] body { background-image: radial-gradient(58rem 40rem at 10% -12%, rgba(246, 205, 130, 0.16), transparent 62%), radial-gradient(52rem 38rem at 94% 6%, rgba(11, 58, 94, 0.55), transparent 64%), radial-gradient(46rem 34rem at 52% 112%, rgba(3, 29, 49, 0.9), transparent 60%); } a { color: inherit; } .vidro { background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); } .vidro-fino { background: var(--vidro-fino); border: 1px solid var(--borda); border-radius: 14px; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); } /* ---------- tipografia ---------- */ h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; } h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 10px; } .sub { color: var(--texto-fraco); font-size: 0.9rem; margin: 0; } .mono { font-variant-numeric: tabular-nums; } /* ---------- controles ---------- */ label { display: block; font-size: 0.8rem; font-weight: 600; margin: 14px 0 6px; color: var(--texto-fraco); } input[type='text'], input[type='email'], input[type='password'], input[type='number'], select, textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: 0.95rem; color: var(--texto); background: var(--vidro-fino); border: 1px solid var(--borda-forte); border-radius: 12px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } input:focus, select:focus, textarea:focus { border-color: var(--dourado-forte); box-shadow: 0 0 0 3px rgba(246, 205, 130, 0.28); } textarea { resize: vertical; line-height: 1.5; } .botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; font: inherit; font-weight: 700; font-size: 0.92rem; color: var(--tinta); background: linear-gradient(180deg, var(--dourado), var(--dourado-forte)); border: none; border-radius: 12px; cursor: pointer; transition: transform 0.12s, filter 0.15s; } .botao:hover { filter: brightness(1.05); } .botao:active { transform: translateY(1px); } .botao[disabled] { opacity: 0.55; cursor: not-allowed; } .botao.largo { width: 100%; } .botao-fantasma { background: transparent; color: var(--texto); border: 1px solid var(--borda-forte); } .botao-fantasma:hover { background: var(--vidro-fino); filter: none; } /* ---------- ícones ---------- Um traçado só para todos: 1.7px, ponta e junta redondas, cor herdada do texto. É o que dá a cara discreta e uniforme, no lugar do emoji e da seta em texto. */ .ic { width: 20px; height: 20px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .botao-icone { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: none; border-radius: 10px; cursor: pointer; background: transparent; color: var(--texto-fraco); transition: background 0.12s, color 0.12s; -webkit-tap-highlight-color: transparent; } .botao-icone:hover { background: var(--realce); color: var(--texto); } .botao-icone:active { background: var(--realce-forte); } .botao-mini { padding: 6px 10px; font-size: 0.78rem; border-radius: 9px; background: transparent; color: var(--texto-fraco); border: 1px solid var(--borda); cursor: pointer; font-family: inherit; font-weight: 600; } .botao-mini:hover { color: var(--texto); border-color: var(--borda-forte); } .botao-mini.perigo:hover { color: var(--erro); border-color: var(--erro); } /* abas sublinhadas (padrao escolhido pelo Roque) */ .abas { display: flex; gap: 18px; border-bottom: 1px solid var(--borda); margin-bottom: 18px; } .aba { background: none; border: none; padding: 10px 2px; margin-bottom: -1px; font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--texto-fraco); cursor: pointer; border-bottom: 2px solid transparent; } .aba.ativa { color: var(--texto); border-bottom-color: var(--dourado-forte); } .aviso { padding: 11px 14px; border-radius: 12px; font-size: 0.86rem; margin: 14px 0 0; line-height: 1.45; } .aviso.erro { background: rgba(179, 38, 30, 0.12); color: var(--erro); border: 1px solid rgba(179, 38, 30, 0.25); } .aviso.ok { background: rgba(15, 123, 82, 0.12); color: var(--ok); border: 1px solid rgba(15, 123, 82, 0.25); } .escondido { display: none !important; } /* Assinatura BSSP PÓS-GRADUAÇÃO (manual de marca 2026). O PNG oficial entra como máscara, então a cor vem do tema: tinta no claro, branco no escuro, sem versão recolorida à mão e sem deformar a marca. */ /* O PNG é a assinatura oficial já recortada (sem moldura transparente em volta), e as caixas abaixo respeitam a proporção dela: 2.127. Se um dia trocar o arquivo, refaça as alturas, senão o "contain" deixa folga de um lado só e a marca volta a parecer encostada na borda. */ .marca { display: flex; align-items: center; gap: 14px; } .marca-logo { display: block; flex: none; width: 132px; height: 62px; background-color: var(--marca); -webkit-mask: url('/img/logo-bssp-pos.png') no-repeat center / contain; mask: url('/img/logo-bssp-pos.png') no-repeat center / contain; } .marca-logo.media { width: 118px; height: 55px; } .marca-logo.grande { width: 200px; height: 94px; } .marca-logo.negativa { background-color: #ffffff; } .marca-logo.pequena { width: 118px; height: 55px; } .marca-fio { width: 1px; align-self: stretch; background: var(--borda); } /* Cabeçalho da lateral: a marca centrada no espaço, não grudada na borda esquerda, com um fio embaixo para separar do resto da coluna. */ .marca-bloco { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px 14px; margin-bottom: 2px; border-bottom: 1px solid var(--borda); } .marca-bloco .marca-logo { margin: 0 auto; } .marca-bloco .marca-sub { text-transform: none; letter-spacing: 0; font-size: 0.78rem; font-weight: 600; text-align: center; } .marca-nome { font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; font-size: 0.95rem; } .marca-sub { font-size: 0.72rem; color: var(--texto-fraco); letter-spacing: 0.06em; text-transform: uppercase; } /* fio dourado da base, do jeito que o manual fecha as páginas */ .fio-dourado { height: 4px; background: var(--dourado); } body > .fio-dourado { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; } /* ---------- tela de entrada ---------- */ .entrada { min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; } /* coluna da marca: tinta cheia, logo em negativo, fio dourado embaixo */ .painel-marca { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 54px 52px 50px; background: var(--tinta); background-image: radial-gradient(46rem 34rem at 4% -8%, rgba(246, 205, 130, 0.20), transparent 58%), radial-gradient(38rem 30rem at 96% 104%, rgba(255, 255, 255, 0.07), transparent 60%); color: #fff; overflow: hidden; } .painel-marca::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--dourado); } .painel-meio { max-width: 30rem; } .painel-titulo { font-size: clamp(1.6rem, 2.4vw, 2.15rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.03em; margin: 0 0 16px; color: #fff; } .painel-texto { font-size: 0.98rem; line-height: 1.65; color: rgba(255, 255, 255, 0.78); margin: 0; } .painel-lista { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } .painel-lista li { position: relative; padding-left: 26px; font-size: 0.9rem; line-height: 1.5; color: rgba(255, 255, 255, 0.86); } .painel-lista li::before { content: ''; position: absolute; left: 0; top: 0.52em; width: 12px; height: 2px; background: var(--dourado); } .painel-pe { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); } .painel-form { display: grid; place-items: center; padding: 40px 24px; } .cartao-entrada { width: 100%; max-width: 420px; padding: 30px 28px; overflow: hidden; position: relative; } .cartao-entrada .fio-dourado { position: absolute; left: 0; right: 0; bottom: 0; } .cartao-titulo { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 3px; } .so-mobile { display: none; } @media (max-width: 900px) { .entrada { grid-template-columns: 1fr; } .painel-marca { padding: 26px 22px 24px; gap: 18px; flex-direction: row; align-items: center; justify-content: flex-start; } .painel-meio, .painel-pe { display: none; } .painel-marca .marca-logo.grande { width: 132px; height: 62px; } .painel-form { padding: 26px 18px 40px; align-items: start; } } @media (max-width: 420px) { .cartao-entrada { padding: 24px 20px; } } /* Caixinha de marcar. O