/* --------------------------------------------------------------------------- blog.css - visual da secao /blog (hub, posts e materiais imprimiveis). Os tokens (--bg, --accent, --border...) sao os MESMOS de index.html e estao redeclarados aqui porque cada pagina do blog e um HTML independente, sem build. Se um token mudar no index, mude aqui tambem - sao dois lugares, e a alternativa (um terceiro arquivo so de tokens carregado por todo mundo) custa uma requisicao bloqueante em toda pagina do site para economizar uma edicao por ano. O tema escuro segue o mesmo contrato do resto do site: o atributo data-theme no , gravado em localStorage sob 'ativaMaps_theme'. --------------------------------------------------------------------------- */ :root{ --bg:#FBFAF8;--surface:#FFFFFF;--surface-2:#F3F1EC; --border:#E7E4DE;--border-strong:#D8D4CC; --text:#181512;--text-muted:#6E6862;--text-faint:#9A938B; --accent:#C2410C;--accent-hover:#9A3412;--accent-soft:#FBEFE5; --ok:#15803D;--ok-soft:#E9F6EE; --dark:#1B1815;--dark-text:#F2EDE6; --r-sm:8px;--r-md:12px;--r-lg:16px; --shadow-sm:0 1px 2px rgba(28,25,23,.05),0 1px 3px rgba(28,25,23,.04); --shadow-md:0 2px 4px rgba(28,25,23,.04),0 8px 20px rgba(28,25,23,.07); --shadow-lg:0 4px 8px rgba(28,25,23,.04),0 24px 48px rgba(28,25,23,.10); /* Cores das etiquetas de situacao. Cada uma tem um par (tinta / fundo) para nao depender de opacidade - fundo translucido sobre card branco e sobre card escuro dao contrastes diferentes, e a etiqueta some no escuro. */ --tag-azul:#1D4ED8; --tag-azul-bg:#EAF0FE; --tag-roxo:#6D28D9; --tag-roxo-bg:#F1ECFE; --tag-laranja:#C2410C; --tag-laranja-bg:#FBEFE5; --tag-verde:#15803D; --tag-verde-bg:#E9F6EE; --tag-cinza:#57534E; --tag-cinza-bg:#F1EFEB; --aviso:#92400E; --aviso-bg:#FEF6E7; --aviso-borda:#F0D9AE; } :root[data-theme="dark"]{ --bg:#111013;--surface:#1A191C;--surface-2:#232226; --border:#2C2B30;--border-strong:#3C3B42; --text:#EDECEE;--text-muted:#A2A1A8;--text-faint:#77767E; --accent:#FB923C;--accent-hover:#FDBA74;--accent-soft:rgba(251,146,60,.12); --ok:#4ADE80;--ok-soft:rgba(74,222,128,.14); --dark:#0B0A0C;--dark-text:#F2EDE6; --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 2px 6px rgba(0,0,0,.4),0 10px 24px rgba(0,0,0,.32); --shadow-lg:0 6px 14px rgba(0,0,0,.4),0 24px 48px rgba(0,0,0,.4); --tag-azul:#93B4FD; --tag-azul-bg:rgba(59,130,246,.16); --tag-roxo:#C4B5FD; --tag-roxo-bg:rgba(139,92,246,.16); --tag-laranja:#FDBA74; --tag-laranja-bg:rgba(251,146,60,.16); --tag-verde:#86EFAC; --tag-verde-bg:rgba(74,222,128,.16); --tag-cinza:#B4B1AC; --tag-cinza-bg:rgba(168,162,158,.16); --aviso:#FCD9A0; --aviso-bg:rgba(245,158,11,.12); --aviso-borda:rgba(245,158,11,.3); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} /* Barra de rolagem fina e discreta, igual à do painel /admin: um traço, não a barra grossa e opaca do sistema. A regra vale para qualquer elemento, e não para uma lista de seletores - área de rolagem nova já nasce certa. color-scheme importa aqui: sem ele o navegador desenha a barra da PÁGINA com o tema do sistema operacional, e quem usa Windows no modo escuro vê uma barra preta sobre a página clara. */ :root{color-scheme:light} :root[data-theme="dark"]{color-scheme:dark} *{ scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; } *::-webkit-scrollbar{width:7px;height:7px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px} *::-webkit-scrollbar-thumb:hover{background:var(--text-faint)} html{scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--text); font-family:'Inter',system-ui,-apple-system,sans-serif; font-feature-settings:'cv11' 1,'ss01' 1; line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden; } a{color:inherit;text-decoration:none} /* height:auto e obrigatorio junto do max-width: sem ele, o atributo height="..." do HTML continua valendo e a imagem estica na vertical quando a largura cai. */ img{max-width:100%;height:auto;display:block} button{font:inherit;cursor:pointer} .wrap{max-width:1200px;margin:0 auto;padding:0 64px} .wrap-texto{max-width:720px;margin:0 auto;padding:0 28px} /* ------------------------------- cabecalho ------------------------------- */ .topo{ position:sticky;top:0;z-index:40; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--border); } .topo-in{display:flex;align-items:center;gap:14px;height:68px;max-width:1200px;margin:0 auto;padding:0 64px} .marca{display:flex;align-items:center;gap:10px} /* nowrap: a 390px o nome quebrava em "Ativa / Maps" e empurrava o cabecalho */ .marca b{font-size:16px;font-weight:700;letter-spacing:-.02em;white-space:nowrap} .topo-nav{display:flex;gap:24px;margin-left:36px} .topo-nav a{font-size:14px;font-weight:500;color:var(--text-muted);transition:color .15s} .topo-nav a:hover,.topo-nav a[aria-current="page"]{color:var(--text)} .topo-dir{margin-left:auto;display:flex;align-items:center;gap:10px} .btn-tema{ width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center; background:transparent;border:none;color:var(--text-muted);transition:background .15s,color .15s; } .btn-tema:hover{background:var(--surface-2);color:var(--text)} .btn-tema svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .link-entrar{font-size:14px;font-weight:550;color:var(--text-muted);padding:8px 12px} .link-entrar:hover{color:var(--text)} .btn-cta{ display:inline-flex;align-items:center;font-size:14px;font-weight:600; border-radius:999px;padding:10px 20px;background:var(--accent);color:#fff; transition:background .15s,transform .15s; } .btn-cta:hover{background:var(--accent-hover);transform:translateY(-1px)} :root[data-theme="dark"] .btn-cta{color:#17130F} /* ---------------------------------- hero --------------------------------- */ .hero{padding:56px 0 8px} .hero h1{ margin:0 0 14px;font-family:'Nunito',system-ui,sans-serif;font-weight:900; font-size:clamp(30px,4.6vw,46px);line-height:1.1;letter-spacing:-.03em; } .hero p{margin:0;max-width:620px;font-size:17px;color:var(--text-muted)} /* Atalhos para as duas secoes da pagina. Sao pilulas grandes, nao links de texto: no celular precisam de area de toque, e sao a primeira coisa clicavel depois do titulo. */ .atalhos{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px} .atalho{ display:inline-flex;align-items:center; padding:9px 20px;border-radius:999px; border:1px solid var(--border-strong);background:var(--surface); font-size:14.5px;font-weight:600;color:var(--text); box-shadow:var(--shadow-sm); transition:border-color .15s,color .15s,transform .15s; } .atalho:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)} /* A pagina em que a pessoa esta fica preenchida - sao dois destinos so, e sem isso o par de pilulas nao diz em qual dos dois voce esta. */ .atalho[aria-current="page"]{ background:var(--accent);border-color:var(--accent);color:#fff; } .atalho[aria-current="page"]:hover{color:#fff;transform:none;cursor:default} :root[data-theme="dark"] .atalho[aria-current="page"], :root[data-theme="dark"] .atalho[aria-current="page"]:hover{color:#17130F} /* ------------------------------- secoes ---------------------------------- */ .secao{padding:44px 0} .secao-cab{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px} .secao-cab h2{ margin:0;font-family:'Nunito',system-ui,sans-serif;font-weight:800; font-size:clamp(22px,2.6vw,28px);letter-spacing:-.02em; } .secao-cab p{margin:6px 0 0;font-size:14.5px;color:var(--text-muted);max-width:560px} .secao-cab .direita{margin-left:auto;font-size:14px;font-weight:600;color:var(--accent)} .secao-cab .direita:hover{text-decoration:underline} /* Faixa de introducao de uma secao. Diferente de .secao-cab: o texto usa a largura inteira e o link secundario desce para a linha de baixo, alinhado a direita. E o que evita a frase quebrar na metade da tela deixando um vao. */ .intro{margin-bottom:22px} /* Com o blog numa pagina so (ago/2026), cada secao precisa se apresentar: o h1 agora e "Blog", generico, e sem estes titulos o leitor nao sabe onde acaba o radar e comecam os textos. Mesma tipografia do .secao-cab h2 para as duas secoes pesarem igual. */ .intro h2{ margin:0 0 6px;font-family:'Nunito',system-ui,sans-serif;font-weight:800; font-size:clamp(22px,2.6vw,28px);letter-spacing:-.02em; } .intro p{ margin:0;font-size:16px;line-height:1.6;color:var(--text-muted); max-width:none; } .intro-rss{ display:block;margin-top:10px;text-align:right; font-size:14px;font-weight:600;color:var(--accent); } .intro-rss:hover{text-decoration:underline} @media (max-width:640px){ .intro-rss{text-align:left} } /* ================================ filtros ================================ Tres menus e uma busca numa barra so. Cada menu abre um painel com busca rapida e caixas de marcar - varias opcoes ao mesmo tempo. ========================================================================= */ .filtros{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); padding:16px 18px;box-shadow:var(--shadow-sm); } .filtro-barra{display:flex;flex-wrap:wrap;gap:10px;align-items:center} /* position:relative ancora o painel no botao. O z-index vai no MENU ABERTO, nao em todos: position+z-index cria contexto de empilhamento, e um valor baixo aqui aprisiona o painel dentro dele - o z-index:50 do painel passaria a valer so entre irmaos e ele acabaria por baixo do veu do celular. So o aberto sobe, e sobe acima do veu. */ .dd{position:relative} .dd.aberto{z-index:60} .dd-btn{ display:inline-flex;align-items:center;gap:8px; padding:10px 14px;border-radius:var(--r-md); border:1px solid var(--border-strong);background:var(--surface); font-size:14px;font-weight:550;color:var(--text); transition:border-color .12s,background .12s; } .dd-btn:hover{border-color:var(--accent)} .dd-btn.ativo{border-color:var(--accent);background:var(--accent-soft)} .dd-btn[aria-expanded="true"]{border-color:var(--accent)} .dd-seta{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:transform .15s} .dd-btn[aria-expanded="true"] .dd-seta{transform:rotate(180deg)} .dd-conta{ min-width:19px;height:19px;padding:0 5px;border-radius:999px; display:inline-flex;align-items:center;justify-content:center; background:var(--accent);color:#fff; font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums; } :root[data-theme="dark"] .dd-conta{color:#17130F} .dd-conta[hidden]{display:none} .dd-painel{ position:absolute;top:calc(100% + 6px);left:0;z-index:50; width:270px;max-width:calc(100vw - 32px); background:var(--surface);border:1px solid var(--border-strong); border-radius:var(--r-lg);box-shadow:var(--shadow-lg); overflow:hidden; } .dd-painel[hidden]{display:none} .dd-busca{ display:flex;align-items:center;gap:8px; padding:11px 14px;border-bottom:1px solid var(--border); } .dd-busca svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--text-faint);stroke-width:2;stroke-linecap:round} .dd-busca input{ flex:1;min-width:0;border:none;background:none;outline:none; font-size:14px;color:var(--text); } .dd-busca input::placeholder{color:var(--text-faint)} /* 44vh cabe umas 9 opcoes: o bastante para a lista parecer rolavel sem tomar a tela inteira e esconder o radar que ela esta filtrando. */ .dd-lista{max-height:44vh;overflow-y:auto;padding:6px} .dd-op{ display:flex;align-items:center;gap:10px; padding:9px 10px;border-radius:var(--r-sm); font-size:14px;cursor:pointer; transition:background .1s; } .dd-op:hover{background:var(--surface-2)} .dd-op[hidden]{display:none} .dd-op input{ width:17px;height:17px;flex:none;margin:0; accent-color:var(--accent);cursor:pointer; } .dd-txt{flex:1;min-width:0} .dd-n{font-size:12px;font-weight:700;color:var(--text-faint);font-variant-numeric:tabular-nums} /* Opcao sem nenhum concurso continua na lista - some-la faria o menu "dancar" a cada clique -, mas apagada e sem reagir ao toque. */ .dd-op.sem-nada{opacity:.4} .dd-op.sem-nada,.dd-op.sem-nada input{cursor:default} .dd-op.sem-nada:hover{background:none} .dd-vazio{margin:0;padding:16px 10px;text-align:center;font-size:13.5px;color:var(--text-faint)} .dd-vazio[hidden]{display:none} .dd-pe{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border);background:var(--bg)} .dd-limpar,.dd-pronto{ flex:1;padding:9px 12px;border-radius:var(--r-sm); font-size:13.5px;font-weight:600;border:1px solid transparent; } .dd-limpar{background:none;color:var(--text-muted)} .dd-limpar:hover{color:var(--text);background:var(--surface-2)} .dd-pronto{background:var(--accent);color:#fff} .dd-pronto:hover{background:var(--accent-hover)} :root[data-theme="dark"] .dd-pronto{color:#17130F} /* Fileira do que esta marcado, com todos os menus fechados. */ .selecionados{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px} .selecionados[hidden]{display:none} .sel{ display:inline-flex;align-items:center;gap:6px; padding:5px 8px 5px 12px;border-radius:999px; background:var(--accent-soft);border:1px solid var(--accent); color:var(--accent);font-size:13px;font-weight:600; } .sel svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;opacity:.7} .sel:hover svg{opacity:1} .filtros-rodape{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding-top:12px;margin-top:12px;border-top:1px solid var(--border); } .contagem{font-size:13.5px;color:var(--text-muted)} .contagem b{color:var(--text);font-variant-numeric:tabular-nums} .btn-limpar{ margin-left:auto;background:none;border:none;padding:6px 2px; font-size:13px;font-weight:600;color:var(--accent); } .btn-limpar:hover{text-decoration:underline} .btn-limpar[hidden]{display:none} .busca{ flex:1;min-width:200px;max-width:320px; display:flex;align-items:center;gap:8px; padding:8px 12px;border:1px solid var(--border-strong);border-radius:999px; background:var(--bg); } .busca input{ flex:1;min-width:0;border:none;background:none;outline:none; font-size:13.5px;color:var(--text); } .busca svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--text-faint);stroke-width:2;stroke-linecap:round} .busca:focus-within{border-color:var(--accent)} /* --------------------------- tarja de demonstracao ----------------------- */ .tarja{ display:flex;gap:12px;align-items:flex-start; margin:0 0 18px;padding:13px 16px;border-radius:var(--r-md); background:var(--aviso-bg);border:1px solid var(--aviso-borda);color:var(--aviso); font-size:13.5px;line-height:1.5; } .tarja svg{width:17px;height:17px;flex:none;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .tarja b{font-weight:700} .tarja[hidden]{display:none} /* ------------------------------ radar (cards) ---------------------------- */ .radar{display:grid;gap:12px;margin-top:20px} .cc{ display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:start; padding:18px 20px;border:1px solid var(--border);border-radius:var(--r-lg); background:var(--surface);box-shadow:var(--shadow-sm); transition:border-color .15s,box-shadow .15s,transform .15s; } .cc:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-1px)} .cc-topo{grid-column:1;display:flex;align-items:center;gap:9px;flex-wrap:wrap} .cc-orgao{font-size:17px;font-weight:700;letter-spacing:-.015em} .cc-desc{grid-column:1;font-size:14px;color:var(--text-muted);margin:0} .cc-meta{ grid-column:1;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px; font-size:13px;color:var(--text-muted); } .cc-meta span{display:inline-flex;align-items:center;gap:6px} .cc-meta b{color:var(--text);font-weight:650;font-variant-numeric:tabular-nums} .cc-lado{ grid-column:2;grid-row:1 / span 3; display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right; } .cc-prazo{font-size:13px;font-weight:650;color:var(--text-muted);white-space:nowrap} .cc-prazo.urgente{color:var(--accent)} .cc-links{display:flex;gap:14px;font-size:13px;font-weight:600} .cc-links a{color:var(--accent)} .cc-links a:hover{text-decoration:underline} .cc-docs{display:inline-flex;align-items:center;gap:6px;color:var(--accent);white-space:nowrap} .cc-carimbo{font-size:12px;color:var(--text-faint);white-space:nowrap} /* O card e um : sem isto, o titulo do orgao herdaria o sublinhado do link */ .cc:hover .cc-orgao{color:var(--accent)} .etq{ display:inline-flex;align-items:center;gap:6px; padding:3px 10px;border-radius:999px; font-size:12px;font-weight:650;letter-spacing:.01em;white-space:nowrap; } .etq .pt{width:6px;height:6px;border-radius:999px;background:currentColor} .etq-azul{color:var(--tag-azul);background:var(--tag-azul-bg)} .etq-roxo{color:var(--tag-roxo);background:var(--tag-roxo-bg)} .etq-laranja{color:var(--tag-laranja);background:var(--tag-laranja-bg)} .etq-verde{color:var(--tag-verde);background:var(--tag-verde-bg)} .etq-cinza{color:var(--tag-cinza);background:var(--tag-cinza-bg)} .etq-banca{ color:var(--text-muted);background:var(--surface-2); border:1px solid var(--border);font-weight:600; } .etq-demo{color:var(--aviso);background:var(--aviso-bg);border:1px solid var(--aviso-borda)} .vazio{ padding:44px 20px;text-align:center;border:1px dashed var(--border-strong); border-radius:var(--r-lg);color:var(--text-muted); } .vazio img{width:92px;margin:0 auto 14px;opacity:.9} .vazio b{display:block;color:var(--text);font-size:16px;margin-bottom:5px} .vazio button{ margin-top:14px;background:none;border:none;color:var(--accent); font-size:14px;font-weight:600; } .vazio button:hover{text-decoration:underline} /* ================================= posts ================================= Duas colunas fixas, e nao auto-fill. Com auto-fill a grade abria 3 ou 4 colunas conforme a largura, e como os cards normais quase nunca fecham a linha sobrava um buraco branco no fim. Com duas colunas o destaque ocupa a linha inteira e os normais entram de dois em dois - o vao so aparece se o total de normais for impar, e ai e um so, no fim da lista. Quem e destaque vem do banco (blog_posts.destaque, editavel em /admin/blog), e a troca e imediata: o post marcado ganha .grande e os outros se reorganizam sozinhos, sem nada para mexer aqui. ========================================================================= */ .posts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:32px} .pc{ display:flex;flex-direction:column;gap:9px; padding:22px;border:1px solid var(--border);border-radius:var(--r-lg); background:var(--surface);box-shadow:var(--shadow-sm); transition:border-color .15s,box-shadow .15s,transform .15s; } .pc:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)} .pc h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.28} .pc p{margin:0;font-size:14px;color:var(--text-muted);flex:1} .pc-pe{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-faint);margin-top:2px} .pc-pe .sep{opacity:.5} .pc.grande{ grid-column:1 / -1;flex-direction:row;align-items:center;gap:28px; padding:30px;background:var(--surface-2);border-color:var(--border-strong); } .pc.grande .txt{flex:1;display:flex;flex-direction:column;gap:11px} .pc.grande h3{font-size:clamp(21px,2.7vw,29px);font-family:'Nunito',system-ui,sans-serif;font-weight:800} .pc.grande p{font-size:15.5px;max-width:60ch} .pc.grande img{width:150px;flex:none} /* ------------------------------ materiais -------------------------------- */ .materiais{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px} .mc{ display:flex;flex-direction:column;gap:10px; padding:24px;border:1px solid var(--border);border-radius:var(--r-lg); background:var(--surface);box-shadow:var(--shadow-sm); transition:border-color .15s,box-shadow .15s,transform .15s; } .mc:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)} .mc-icone{ width:42px;height:42px;border-radius:var(--r-md); display:flex;align-items:center;justify-content:center; background:var(--accent-soft);color:var(--accent); } .mc-icone svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .mc h3{margin:0;font-size:16.5px;font-weight:700;letter-spacing:-.015em} .mc p{margin:0;font-size:14px;color:var(--text-muted);flex:1} .mc-pe{ display:flex;align-items:center;gap:8px;margin-top:4px; font-size:13.5px;font-weight:650;color:var(--accent); } .mc-pe svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s} .mc:hover .mc-pe svg{transform:translateX(3px)} .mc-formato{ align-self:flex-start;padding:2px 9px;border-radius:999px; background:var(--surface-2);border:1px solid var(--border); font-size:11.5px;font-weight:650;color:var(--text-muted);letter-spacing:.02em; } /* ------------------------------ newsletter ------------------------------- */ /* O Otto fica na coluna da DIREITA, centrado na altura do bloco: assim ele emoldura o canto sem disputar o comeco da linha, e a leitura vai do titulo direto para o campo de e-mail. O texto e a primeira coluna do grid, mas vem depois no HTML - por isso as ordens explicitas. */ /* 75% da largura da secao e centrado: em tela larga o quadro inteiro virava uma faixa de ponta a ponta e o formulario, que tem tres campos curtos, ficava perdido dentro dela. */ .news{ display:grid;grid-template-columns:1fr 200px;gap:24px;align-items:center; width:75%;margin:0 auto; padding:30px 34px;border-radius:22px; background:var(--surface);border:1px solid var(--border-strong); box-shadow:var(--shadow-md); } .news > div:not(.news-otto){grid-column:1;grid-row:1;min-width:0} .news-otto{grid-column:2;grid-row:1;position:relative;align-self:center} /* Otto parado. Nao ha animacao aqui de proposito: o movimento competia com o campo de e-mail, que e o unico motivo de a secao existir. */ .news-otto img{width:100%;filter:drop-shadow(0 12px 22px rgba(194,65,12,.18))} /* Sem max-width: a frase corre ate a borda do Otto em vez de quebrar cedo e deixar um vao no meio do bloco. */ .news h2{ margin:0 0 16px;font-family:'Nunito',system-ui,sans-serif;font-weight:800; font-size:clamp(19px,2.3vw,24px);letter-spacing:-.02em;line-height:1.3; } .news > div > p{margin:0 0 18px;font-size:15px;color:var(--text-muted)} .news-form{display:flex;flex-wrap:wrap;gap:10px} .news-form input[type=text],.news-form input[type=email]{ flex:1;min-width:160px;padding:12px 15px; border:1px solid var(--border-strong);border-radius:var(--r-md); background:var(--bg);color:var(--text);font-size:14.5px;outline:none; transition:border-color .15s,box-shadow .15s; } .news-form input::placeholder{color:var(--text-faint)} .news-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .news-form input[aria-invalid="true"]{border-color:#DC2626} .news-form button{ padding:12px 26px;border:none;border-radius:var(--r-md); background:var(--accent);color:#fff;font-size:14.5px;font-weight:650; transition:background .15s,transform .15s; } .news-form button:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px)} .news-form button:disabled{opacity:.6;cursor:progress;transform:none} :root[data-theme="dark"] .news-form button{color:#17130F} /* Desce a linha do aceite para a altura do pe do Otto - colada nos campos ela parecia parte do formulario, e o texto legal quer respiro proprio. */ .news-aceite{ display:flex;gap:9px;align-items:flex-start;flex-basis:100%; margin-top:18px; font-size:12.5px;color:var(--text-faint);line-height:1.5; } .news-aceite input{margin:2px 0 0;accent-color:var(--accent);width:15px;height:15px;flex:none} .news-aceite a{color:var(--text-muted);font-weight:600;text-decoration:underline} .news-recado{flex-basis:100%;margin:2px 0 0;font-size:13.5px;font-weight:600;min-height:1px} .news-recado.erro{color:#DC2626} .news-recado.ok{color:var(--ok)} :root[data-theme="dark"] .news-recado.erro{color:#FCA5A5} /* ----------------------- chamada para o combo ---------------------------- Aparece na ficha de concurso e no post de edital, quando existe uma pagina /combos/ para aquele orgao (a lista mora em api/_combos.js, e quem injeta o bloco sao api/blog-concurso.js e api/blog-post.js). Entrou em 02/09/2026 por dois motivos. O de venda: quem chega pela busca na ficha da PC-BA so tinha um botao generico para /#planos, quando existe uma pagina inteira sobre os mapas daquele edital. O de indexacao: os 14 combos nao recebiam UM link interno do site inteiro e o Search Console os mantinha em "Detectada, mas nao indexada no momento". O bloco e injetado FORA do #ficha e do
, que o blog.js reescreve quando roda - la dentro ele apareceria para o robo e sumiria para a pessoa. */ .combo-cta{padding:8px 0 44px} /* 764px = a largura util da coluna de leitura nas duas paginas onde o bloco aparece (.wrap-ficha tem 820 com 28 de padding; .artigo-corpo, 720 com 28). Sem isto o bloco herdava os 1200 de .wrap e saia mais largo que o texto que ele acompanha, parecendo anuncio colado por cima da pagina. */ .combo-cta-in{ max-width:764px;margin:0 auto; background:var(--surface);border:1px solid var(--border);border-radius:16px; padding:26px 26px 24px;box-shadow:0 2px 4px rgba(28,25,23,.04),0 8px 20px rgba(28,25,23,.07); } .combo-cta-selo{ display:inline-block;margin:0;font-family:'Nunito',system-ui,sans-serif;font-weight:800; font-size:12px;letter-spacing:.03em;text-transform:uppercase; background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:6px 13px; } .combo-cta-in h2{ margin:14px 0 0;font-family:'Nunito',system-ui,sans-serif;font-weight:800; font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;line-height:1.2; } .combo-cta-txt{margin:10px 0 0;font-size:14.5px;color:var(--text-muted);line-height:1.6} .combo-cta-btn{ display:inline-flex;align-items:center;justify-content:center;margin-top:18px; min-height:46px;padding:0 24px;border-radius:999px;background:var(--accent);color:#fff; font-size:15px;font-weight:650;text-decoration:none; } .combo-cta-btn:hover{background:var(--accent-hover);color:#fff} /* ------------------------------- rodape ---------------------------------- */ .rodape{padding:34px 0 44px;border-top:1px solid var(--border);margin-top:24px} /* Sobrou so a assinatura no rodape do blog, entao ela fica centrada - encostada na esquerda, sozinha numa linha larga, parecia sobra de algo que foi tirado. */ .rodape-in{ max-width:1200px;margin:0 auto;padding:0 64px; display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:center; text-align:center;font-size:12.5px;color:var(--text-faint); } .rodape a{color:var(--text-muted);font-weight:500} .rodape a:hover{color:var(--text)} .rodape .sep{opacity:.5;margin:0 8px} /* Linha de navegacao do rodape (02/09/2026). Existe por causa do link para /combos: ate aqui as 14 paginas de combo nao recebiam UM link interno do site inteiro - cada uma aparecia uma vez so em todo o HTML, no canonical dela mesma - e o Search Console mantinha as 14 paradas em "Detectada, mas nao indexada no momento". Rodape e o lugar certo porque aparece em toda pagina do blog sem disputar espaco com o conteudo. Ocupa a linha inteira e vem antes das redes sociais (order:-1) para nao quebrar no meio delas. */ .rodape-nav{flex:0 0 100%;order:-1} /* ======================= ficha do concurso ============================== /blog/concurso?id=... — informacoes gerais, agenda, edital e anexos. Cada bloco e desenhado so quando ha dado: um concurso recem-autorizado mostra cabecalho, resumo e ficha, e mais nada. ========================================================================= */ .wrap-ficha{max-width:820px;margin:0 auto;padding:34px 28px 10px} .fi-carregando{color:var(--text-faint);font-size:15px;padding:30px 0} .fi-cab{margin:18px 0 26px} .fi-etiquetas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px} .fi-cab h1{ margin:0 0 8px;font-family:'Nunito',system-ui,sans-serif;font-weight:900; font-size:clamp(28px,4.4vw,42px);line-height:1.1;letter-spacing:-.03em; } .fi-sub{margin:0 0 14px;font-size:18px;color:var(--text-muted);line-height:1.45} /* Imagem opcional do concurso. max-height evita que uma foto muito alta empurre a ficha inteira para baixo da dobra. */ .fi-figura{margin:0 0 16px} .fi-figura img{ width:100%;max-height:340px;object-fit:cover; border-radius:var(--r-lg);border:1px solid var(--border); } .fi-figura figcaption{ margin-top:7px;font-size:12.5px;color:var(--text-faint);line-height:1.45; } /* Alinhado a direita: e informacao de servico, nao parte da apresentacao do concurso - encostado a esquerda, competia com o cargo logo acima. */ .fi-carimbo{ margin:0;font-size:13px;color:var(--text-faint); font-variant-numeric:tabular-nums;text-align:right; } .fi-bloco{ margin-bottom:16px;padding:24px 26px; border:1px solid var(--border);border-radius:var(--r-lg); background:var(--surface);box-shadow:var(--shadow-sm); } .fi-bloco h2{ margin:0 0 16px;font-family:'Nunito',system-ui,sans-serif;font-weight:800; font-size:19px;letter-spacing:-.02em; } /* Sem caixa e sem titulo: corre como texto da propria pagina, na largura da ficha. Os trechos em saem na cor da marca - e assim que a pessoa varre a abertura e pega vagas, prazo e cargo sem ler tudo. */ .fi-resumo{ margin:0 0 20px;font-size:17px;line-height:1.7;color:var(--text-muted); text-align:justify; /* hyphens junto do justify nao e enfeite: sem hifenizacao, o navegador estica os espacos para fechar a linha e o texto ganha "rios" de vazio no meio - pior quanto mais estreita a coluna. Com hifens, as sobras se distribuem. */ hyphens:auto;-webkit-hyphens:auto; } .fi-resumo p{margin:0 0 14px} .fi-resumo p:last-child{margin-bottom:0} .fi-resumo b,.fi-resumo strong{color:var(--accent);font-weight:700} .fi-resumo a{color:var(--accent);font-weight:600;text-decoration:underline} .fi-nota{margin:14px 0 0;font-size:13px;color:var(--text-faint);line-height:1.5} .fi-vago{color:var(--text-faint);font-style:italic} /* Ficha em
: rotulo e valor sao um par de dados, nao celulas de tabela. Duas colunas no desktop; no celular o rotulo sobe para cima do valor, o que e mais legivel que espremer 'Taxa de inscricao' em 90px. */ .fi-tabela{margin:0;display:grid;gap:0} .fi-linha{ display:grid;grid-template-columns:190px 1fr;gap:16px; padding:11px 0;border-bottom:1px solid var(--border); } .fi-linha:last-child{border-bottom:none} .fi-linha dt{margin:0;font-size:14px;font-weight:600;color:var(--text-muted)} .fi-linha dd{margin:0;font-size:15px;color:var(--text)} .fi-linha dd b{font-weight:700;font-variant-numeric:tabular-nums} .fi-agenda{list-style:none;margin:0;padding:0} .fi-agenda li{ display:flex;align-items:baseline;gap:16px;flex-wrap:wrap; padding:11px 0;border-bottom:1px solid var(--border); } .fi-agenda li:last-child{border-bottom:none} .fi-ev{flex:1;min-width:170px;font-size:15px;font-weight:600} .fi-dt{font-size:14.5px;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap} /* Etapa que ja aconteceu continua na lista - some-la esconderia o historico do certame -, mas apagada, para o olho cair no que ainda vem. */ .fi-agenda li.passou{opacity:.5} .fi-agenda li.passou .fi-ev{text-decoration:line-through;text-decoration-thickness:1px} .fi-agenda li.hoje .fi-ev,.fi-agenda li.hoje .fi-dt{color:var(--accent)} .fi-agenda li.hoje{opacity:1} .fi-docs{list-style:none;margin:0;padding:0;display:grid;gap:10px} .fi-doc{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-md); background:var(--bg);transition:border-color .15s; } .fi-doc:hover{border-color:var(--border-strong)} .fi-doc-icone{ width:38px;height:38px;flex:none;border-radius:var(--r-sm); display:flex;align-items:center;justify-content:center; background:var(--accent-soft);color:var(--accent); } .fi-doc-icone svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .fi-doc-txt{flex:1;min-width:150px;display:flex;flex-direction:column;gap:2px} .fi-doc-txt b{font-size:15px;font-weight:650;letter-spacing:-.01em} .fi-doc-txt span{font-size:12.5px;color:var(--text-faint)} .fi-principal{ display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px; background:var(--accent-soft);color:var(--accent); font-size:11px;font-weight:700;letter-spacing:.02em;vertical-align:1px; } .fi-doc-acoes{display:flex;gap:8px;flex:none} .fi-doc-acoes a{ padding:7px 15px;border-radius:999px; font-size:13.5px;font-weight:600;white-space:nowrap; border:1px solid var(--border-strong);color:var(--text); transition:border-color .15s,background .15s,color .15s; } .fi-doc-acoes a:hover{border-color:var(--accent);color:var(--accent)} .fi-doc-acoes .fi-baixar{background:var(--accent);border-color:var(--accent);color:#fff} .fi-doc-acoes .fi-baixar:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff} :root[data-theme="dark"] .fi-doc-acoes .fi-baixar, :root[data-theme="dark"] .fi-doc-acoes .fi-baixar:hover{color:#17130F} /* ------------------------ a chamada que fecha a ficha -------------------- Faixa na cor da marca, centrada, com o nome do concurso dentro da frase. Fecha a pagina convidando em vez de despachar a pessoa para fora - os dois botoes que havia aqui antes eram links de saida. */ .fi-chamada{ margin:26px 0 8px;padding:42px 40px;border-radius:22px;text-align:center; background:var(--accent-soft);border:1px solid var(--accent); } /* Sem trava de largura: a frase usa a caixa inteira e cai em duas linhas, nao em quatro. Com 24ch ela ficava espremida numa coluna estreita no meio de um bloco largo, e o vazio dos lados chamava mais atencao que o texto. */ .fi-chamada h2{ margin:0 auto 22px;max-width:none; font-family:'Nunito',system-ui,sans-serif;font-weight:900; font-size:clamp(20px,2.7vw,28px);line-height:1.25;letter-spacing:-.02em; color:var(--accent-hover); text-wrap:balance; /* reparte as linhas em vez de deixar uma orfa no fim */ } /* O nome do orgao em destaque: e o que faz a frase falar deste concurso, e nao de concurso nenhum. Sem nowrap: nomes completos de orgao (nao so siglas curtas) estouravam a largura da caixa em telas normais. */ .fi-chamada h2 b{font-weight:900;color:var(--accent)} :root[data-theme="dark"] .fi-chamada h2{color:var(--accent)} :root[data-theme="dark"] .fi-chamada h2 b{color:var(--accent-hover)} .fi-cta{ display:inline-flex;align-items:center;gap:10px; padding:16px 40px;border-radius:999px; background:var(--accent);color:#fff; font-size:16.5px;font-weight:750;letter-spacing:.02em; box-shadow:0 8px 22px rgba(194,65,12,.28); transition:background .15s,transform .15s; } .fi-cta:hover{background:var(--accent-hover);transform:translateY(-2px)} .fi-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} :root[data-theme="dark"] .fi-cta{color:#17130F} :root[data-theme="dark"] .fi-cta{box-shadow:0 8px 22px rgba(251,146,60,.18)} @media (max-width:640px){ .wrap-ficha{padding-left:18px;padding-right:18px} .fi-chamada{padding:30px 20px} .fi-cta{width:100%;justify-content:center;padding:16px 20px} .fi-bloco{padding:20px 18px} .fi-linha{grid-template-columns:1fr;gap:2px} .fi-doc-acoes{width:100%} .fi-doc-acoes a{flex:1;text-align:center;justify-content:center} } @media print{ /* Botoes e a chamada nao existem no papel. */ .fi-doc-acoes,.fi-chamada{display:none} .fi-bloco{box-shadow:none;break-inside:avoid} } /* --------------------------- paginas de post ----------------------------- */ .artigo{padding:44px 0 12px} .artigo-cab{max-width:720px;margin:0 auto 30px;padding:0 28px} .artigo-volta{ display:inline-flex;align-items:center;gap:7px;margin-bottom:20px; font-size:13.5px;font-weight:600;color:var(--text-muted); } .artigo-volta:hover{color:var(--accent)} .artigo-volta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .artigo h1{ margin:12px 0 14px;font-family:'Nunito',system-ui,sans-serif;font-weight:900; font-size:clamp(27px,4vw,40px);line-height:1.14;letter-spacing:-.03em; } .artigo-linha{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-faint)} .artigo-corpo{max-width:720px;margin:0 auto;padding:0 28px;font-size:17px;line-height:1.72} .artigo-corpo > p:first-of-type{font-size:18.5px;color:var(--text-muted)} .artigo-corpo h2{ margin:44px 0 14px;font-family:'Nunito',system-ui,sans-serif;font-weight:800; font-size:25px;letter-spacing:-.02em;line-height:1.25; } .artigo-corpo h3{margin:32px 0 10px;font-size:19px;font-weight:700;letter-spacing:-.015em} .artigo-corpo p{margin:0 0 20px} .artigo-corpo ul,.artigo-corpo ol{margin:0 0 22px;padding-left:24px} .artigo-corpo li{margin-bottom:9px} .artigo-corpo li::marker{color:var(--accent)} .artigo-corpo strong{font-weight:650;color:var(--text)} .artigo-corpo a{color:var(--accent);font-weight:550;text-decoration:underline;text-underline-offset:2px} .artigo-corpo hr{border:none;border-top:1px solid var(--border);margin:40px 0} .artigo-corpo blockquote{ margin:0 0 22px;padding:16px 22px;border-left:3px solid var(--accent); background:var(--surface-2);border-radius:0 var(--r-md) var(--r-md) 0; font-size:16px;color:var(--text-muted); } .artigo-corpo blockquote p:last-child{margin:0} .artigo-corpo figure{margin:0 0 28px} .artigo-corpo figure img{ width:100%;border-radius:var(--r-lg);border:1px solid var(--border);display:block; } .artigo-corpo figcaption{margin-top:8px;font-size:13px;color:var(--text-faint);line-height:1.5} .caixa{ margin:0 0 24px;padding:20px 24px;border:1px solid var(--border); border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm); } .caixa h4{ margin:0 0 10px;font-size:12px;font-weight:750;text-transform:uppercase; letter-spacing:.07em;color:var(--accent); } .caixa p:last-child,.caixa ul:last-child{margin-bottom:0} /* ---------------------- materiais imprimiveis ---------------------------- */ .folha{ max-width:820px;margin:0 auto;padding:40px 28px 60px; } .folha h1{ margin:0 0 8px;font-family:'Nunito',system-ui,sans-serif;font-weight:900; font-size:clamp(25px,3.6vw,34px);letter-spacing:-.03em; } .folha .sub{margin:0 0 26px;font-size:15.5px;color:var(--text-muted)} .btn-imprimir{ display:inline-flex;align-items:center;gap:8px;margin-bottom:30px; padding:10px 20px;border-radius:999px;border:1px solid var(--border-strong); background:var(--surface);color:var(--text);font-size:14px;font-weight:600; } .btn-imprimir:hover{border-color:var(--accent);color:var(--accent)} .btn-imprimir svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .bloco{ border:1px solid var(--border-strong);border-radius:var(--r-lg); background:var(--surface);padding:22px 24px;margin-bottom:16px; break-inside:avoid; } .bloco > h2{ margin:0 0 4px;font-size:17px;font-weight:750;letter-spacing:-.015em; display:flex;align-items:baseline;gap:10px; } .bloco > h2 .num{ font-family:'Nunito',sans-serif;font-size:13px;font-weight:800; color:var(--accent);background:var(--accent-soft); min-width:24px;height:24px;border-radius:999px; display:inline-flex;align-items:center;justify-content:center;flex:none; } .bloco .porque{margin:0 0 14px 34px;font-size:14px;color:var(--text-muted)} .linhas{margin:0 0 0 34px;padding:0;list-style:none} .linhas li{ display:flex;align-items:center;gap:12px;padding:9px 0; border-bottom:1px dashed var(--border);font-size:14.5px; } .linhas li:last-child{border-bottom:none} .linhas .rot{flex:0 0 190px;color:var(--text-muted)} .linhas .campo{flex:1;border-bottom:1px solid var(--border-strong);height:20px} .quadrado{ width:16px;height:16px;flex:none;border:1.8px solid var(--border-strong); border-radius:4px; } .tabela{width:100%;border-collapse:collapse;font-size:14.5px} .tabela th{ text-align:left;padding:10px 12px;font-size:12px;font-weight:750; text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint); border-bottom:1.5px solid var(--border-strong); } .tabela td{padding:0;border-bottom:1px solid var(--border);height:38px} .tabela td div{height:38px} @media print{ .topo,.rodape,.btn-imprimir,.news{display:none !important} body{background:#fff;color:#000} .bloco{box-shadow:none;border-color:#bbb} .folha{padding:0} a{text-decoration:none;color:#000} } /* ------------------------------ responsivo ------------------------------- */ @media (max-width:900px){ /* No celular o quadro volta a usar a largura toda: 75% de uma tela de 390px nao sobra espaco para nada. */ .news{grid-template-columns:1fr;gap:14px;padding:28px 24px;text-align:center;width:auto} .news-aceite{margin-top:10px} /* Empilhado, o mascote sobe para o topo - a ordem do HTML poria o formulario antes dele, e o bloco abriria com um campo de e-mail sem contexto. */ .news-otto{grid-column:1;grid-row:1;max-width:130px;margin:0 auto} .news > div:not(.news-otto){grid-column:1;grid-row:2} .news h2{max-width:none;margin-left:auto;margin-right:auto} .news-form{margin:0 auto} /* Empilhado, os dois campos ocupam a linha toda; o botao ficaria colado a esquerda, do tamanho do texto, parecendo desalinhado. */ .news-form input[type=text],.news-form input[type=email],.news-form button{ flex-basis:100%;max-width:none; } .news-aceite{text-align:left} .pc.grande{flex-direction:column;align-items:flex-start;gap:18px} .pc.grande img{width:110px;align-self:center} } @media (max-width:760px){ /* Uma coluna no celular. Dois cards lado a lado em 390px dariam ~175px cada: o titulo quebraria em cinco linhas e o resumo viraria uma coluna de duas palavras. Aqui o destaque deixa de ser um formato diferente e vira so o primeiro da fila - o que ja e o papel dele. */ .posts{grid-template-columns:1fr} .topo-nav{display:none} .wrap,.topo-in,.rodape-in{padding-left:16px;padding-right:16px} .wrap-texto,.artigo-cab,.artigo-corpo{padding-left:20px;padding-right:20px} .hero{padding-top:36px} .cc{grid-template-columns:1fr} .cc-lado{grid-column:1;grid-row:auto;align-items:flex-start;text-align:left;margin-top:12px} .busca{max-width:none} /* Os tres menus dividem a linha em partes iguais e a busca ocupa a de baixo inteira. Nenhum deles corta, qualquer que seja o tamanho da tela - com "Em que pé", "Onde" e "Banca" os rotulos cabem inteiros ate uns 360px. */ /* flex:0 1 auto e nao flex:1 - dividir a linha em tres partes iguais dava a mesma largura para "Onde" e para "Em que pé", e o rotulo mais longo era o unico a ser cortado. Cada botao toma o que precisa; se um dia um rotulo nao couber, a linha quebra em vez de reticenciar. */ .filtro-barra{gap:8px} .dd{flex:0 1 auto;min-width:0} .dd-btn{width:100%;justify-content:center;gap:5px;padding:11px 12px;font-size:13.5px} .dd-rot{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dd-seta{width:13px;height:13px} .filtro-barra .busca{flex-basis:100%;order:9} } /* Telas estreitas (iPhone SE e afins, 320-360px): o cabecalho e o unico bloco com largura minima propria - marca + tema + "Entrar" + "Assinar" nao cabem e empurravam a pagina inteira para o lado, criando rolagem horizontal. Aperta os espacos em vez de esconder qualquer um dos dois botoes. */ @media (max-width:380px){ .topo-in{gap:6px;padding-left:12px;padding-right:12px} .marca b{font-size:15px} .btn-tema{width:34px} .link-entrar{padding:8px 4px;font-size:13.5px} .btn-cta{padding:9px 14px;font-size:13.5px} .wrap{padding-left:12px;padding-right:12px} } /* No celular o painel deixa de pender do botao e vira uma folha presa embaixo da tela, com um veu por tras. Ancorado no botao ele estouraria a lateral (o ultimo menu abre perto da borda direita) e a lista de 27 UFs ficaria com uns quatro itens visiveis entre o botao e o rodape do aparelho. */ @media (max-width:640px){ .dd-painel{ position:fixed;top:auto;left:12px;right:12px;bottom:12px; width:auto;max-width:none; border-radius:18px; } .dd-lista{max-height:52vh} .dd-op{padding:12px 10px;font-size:15px} /* alvo de toque confortavel */ .dd-limpar,.dd-pronto{padding:12px} /* O veu escurece o resto e garante que o toque fora feche o menu, sem depender de acertar um pedaco vazio da pagina. */ .com-menu::before{ content:'';position:fixed;inset:0;z-index:45; background:rgba(24,21,18,.45); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); } }