/* ============================================================================ GestorPRO Angola — ÁREA PÚBLICA ============================================================================ A identidade das páginas públicas novas (home.html e blog.html), num ficheiro só. O index.html tem os estilos dentro de si — são 277 KB de página e não se mexe nisso por causa de duas páginas novas — mas a paleta aqui é a MESMA, tirada do logótipo: vermelho #EC1C24 a bandeira do 5, o acento celeste #3BB2F6 a tigela, a massa olho #4482C8 o círculo do meio A regra que o logótipo estabelece e que estas páginas seguem: o azul é a massa, o vermelho é o que se destaca por cima. Fundos azuis, acções a vermelho — nunca ao contrário. ============================================================================ */ :root{ --marca-vermelho:#EC1C24; --marca-celeste:#3BB2F6; --marca-azul:#4482C8; /* Azul-noite: a mesma família do index.html e do painel */ --bg:#071120; --s1:#0B1A2D; --s2:#12263D; --s3:#1A3350; --b1:#1E3A57; --b2:#2B4E70; --txt:#E8F0F8; --muted:#93A7BE; --dim:#5D738C; --azul:#3BB2F6; --azul2:#5FC4F8; --azul3:#1B6FC9; --red:#EC1C24; --red2:#F04C52; --verde:#10B981; --gold:#F4B942; /* O campo azul cheio: percorre os dois azuis do logótipo. Os dois extremos passam AA com texto branco. */ --campo-azul:linear-gradient(155deg,#0A79B8 0%,#146DB9 45%,#1D62AF 100%); --r:12px; --r-sm:9px; --sombra:0 18px 40px rgba(0,0,0,.45); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg); color:var(--txt);line-height:1.65;overflow-x:hidden;min-height:100vh} a{text-decoration:none;color:inherit} img{max-width:100%} :focus-visible{outline:3px solid var(--azul);outline-offset:2px} /* ── BARRA ────────────────────────────────────────────────────────── */ .pb-nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:18px; /* Opaca, pelo mesmo motivo do nav do index.html: a 92% ainda deixava passar a cor da seccao que lhe estava por baixo. E com o mesmo degrade de tres degraus, para nao ser uma laje chapada. */ height:66px;padding:0 5%; /* Os tres degraus sao do azul da marca, e nao do azul-noite do fundo: o cabecalho passa a fazer parte do mesmo campo azul do heroi em vez de o cortar com uma faixa escura. Continuam opacos, logo a barra continua firme. */ background:linear-gradient(180deg,#123B66 0%,#0E2E52 55%,#0A2340 100%); border-bottom:none; box-shadow:0 6px 22px rgba(0,0,0,.30)} .pb-nav::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg, rgba(59,178,246,.60) 0%, rgba(59,178,246,.16) 42%, rgba(236,28,36,.20) 72%, rgba(236,28,36,.55) 100%)} .pb-marca{display:flex;align-items:center;gap:11px;flex-shrink:0} .pb-marca-ic{width:36px;height:36px;display:flex;align-items:center;justify-content:center} .pb-marca strong{font-size:16px;font-weight:800;letter-spacing:-.3px;display:block;line-height:1.1} .pb-marca-tx{display:flex;flex-direction:column} .pb-marca-tx span{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.9px} .pb-links{display:flex;gap:2px;margin:0 auto} .pb-a{padding:7px 13px;color:rgba(255,255,255,.80);font-size:13px;font-weight:500; border-radius:8px;transition:.2s} .pb-a:hover{color:var(--txt);background:rgba(255,255,255,.06)} .pb-a.on{color:var(--txt);background:rgba(59,178,246,.14)} .pb-nav-acc{display:flex;gap:8px;align-items:center;flex-shrink:0} .pb-burger{display:none;background:none;border:1.5px solid var(--b1);border-radius:9px; width:40px;height:38px;cursor:pointer;flex-direction:column;gap:4px; align-items:center;justify-content:center} .pb-burger span{width:17px;height:2px;background:var(--txt);border-radius:2px} /* ── BOTÕES ───────────────────────────────────────────────────────── */ .pb-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px; border-radius:10px;font-size:13.5px;font-weight:700;cursor:pointer; font-family:inherit;border:1.5px solid transparent; transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s,background .2s,border-color .2s} .pb-btn-red{background:linear-gradient(135deg,#EC1C24,#CA1118);color:#fff; border-color:rgba(255,255,255,.22);box-shadow:0 4px 14px rgba(160,12,18,.38)} .pb-btn-red:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(160,12,18,.52); border-color:rgba(255,255,255,.45)} .pb-btn-linha{background:transparent;color:var(--txt);border-color:var(--b2)} .pb-btn-linha:hover{border-color:var(--azul);color:var(--azul)} /* INSTALAR NO WINDOWS (11-Set-2026). O instalador só serve num computador, por isso o botão só existe onde há espaço de computador: perde o texto abaixo dos 1280px e sai da barra abaixo dos 1024px — num telemóvel ou num tablet seria um botão para um ficheiro que não se consegue abrir. */ .pb-btn-inst{padding:11px 16px} .pb-btn-inst i{font-size:15px} @media (max-width:1280px){.pb-btn-inst span{display:none}.pb-btn-inst{padding:11px 13px}} @media (max-width:1024px){.pb-btn-inst{display:none}} @media (prefers-reduced-motion:reduce){.pb-btn,.pb-btn:hover{transform:none}} /* ── SUBMENUS DA BARRA ──────────────────────────────────────────── Os mesmos dois painéis que o index.html já tinha — Módulos e Preços. Estavam só lá, e nestas páginas "Preços" era um link simples: quem viesse do blog não encontrava a separação entre preço público e preço de parceiro, que é precisamente a distinção que interessa a quem está a decidir. Um menu que muda de página para página não é um menu. No rato basta passar por cima; no telemóvel e no teclado é preciso clicar, e daí o .aberto e o aria-expanded geridos pelo publico-nav.js. */ .pb-drop{position:relative;display:flex;align-items:center} .pb-drop-btn{display:inline-flex;align-items:center;gap:6px; background:none;border:none;cursor:pointer;font-family:inherit;line-height:1} .pb-drop-chev{font-size:9px;opacity:.7;transition:transform .2s} .pb-drop:hover .pb-drop-chev,.pb-drop.aberto .pb-drop-chev{transform:rotate(180deg)} .pb-drop-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-6px); min-width:288px;padding:7px;border-radius:14px; background:rgba(11,15,24,.98);backdrop-filter:blur(20px) saturate(160%); border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 48px rgba(0,0,0,.55); display:flex;flex-direction:column;gap:2px; opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:60} .pb-drop:hover .pb-drop-menu,.pb-drop.aberto .pb-drop-menu, .pb-drop:focus-within .pb-drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} /* Ponte invisível entre o botão e o painel: sem ela, o menu fecha-se quando o rato atravessa os 8px de intervalo. */ .pb-drop-menu::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px} .pb-drop-menu a{display:flex;align-items:center;gap:11px;padding:10px 11px; border-radius:10px;text-decoration:none;transition:.18s} .pb-drop-menu a:hover,.pb-drop-menu a:focus-visible{background:rgba(255,255,255,.07);outline:none} .pb-drop-menu a:focus-visible{box-shadow:inset 0 0 0 2px var(--azul)} .pb-nd-ic{width:34px;height:34px;border-radius:10px;flex-shrink:0; display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff} .pb-nd-rh{background:linear-gradient(135deg,#EC1C24,#A0161B)} .pb-nd-com{background:linear-gradient(135deg,#2563EB,#1a3eaa)} /* Os tres que entraram depois — CRM, Escolar e Arrendamento. As cores sao as MESMAS do submenu do index.html (.nd-crm/.nd-esc/.nd-arr): o mesmo modulo com duas cores conforme a pagina lia-se como dois produtos diferentes. */ .pb-nd-crm{background:linear-gradient(135deg,#34D399,#0E9F6E)} .pb-nd-esc{background:linear-gradient(135deg,#A78BFA,#7C3AED)} .pb-nd-arr{background:linear-gradient(135deg,#F59E0B,#B45309)} /* O selo «Novo» existia so' no index.html, no