/* * Site institucional — Prefeitura de Cravinhos * Adesão ao Padrão Digital de Governo (gov.br DS). * * Tokens de cor mapeados aos do gov.br DS: * blue-warm-vivid-70 (#1351B4) azul primário * blue-warm-vivid-80 (#0C326F) azul primário escuro * blue-warm-vivid-90 (#071D41) azul governamental * blue-warm-10 (#DBE8FB) azul claro de fundo * yellow-vivid-20 (#FFCD07) amarelo destaque/acento gov.br * green-cool-vivid-50(#168821) sucesso * red-vivid-50 (#E52207) erro/alerta * gray-2..90 neutros * * Tipografia: Raleway (Google Fonts) — alternativa pública à Rawline * proprietária. Escala em múltiplos de 8px. */ :root { /* Cores gov.br DS */ --c-primary: #1351B4; /* blue-warm-vivid-70 */ --c-primary-dark: #0C326F; /* blue-warm-vivid-80 */ --c-primary-darker: #071D41; /* blue-warm-vivid-90 — barra governamental */ --c-primary-light: #DBE8FB; /* blue-warm-10 */ --c-accent: #FFCD07; /* yellow-vivid-20 — amarelo gov.br */ --c-accent-soft: #FFF5C2; /* yellow-5 */ --c-success: #168821; /* green-cool-vivid-50 */ --c-danger: #E52207; /* red-vivid-50 */ --c-bg: #F8F8F8; /* gray-2 */ --c-surface: #FFFFFF; --c-border: #EDEDED; /* gray-5 */ --c-text: #1B1B1B; /* gray-90 */ --c-text-muted: #555555; /* gray-60 */ /* Escala 8px */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --radius: 4px; /* surface-rounder-sm gov.br */ --radius-md: 8px; /* surface-rounder-md */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --container: 1200px; --font-body: 'Rawline', 'Raleway', system-ui, -apple-system, "Segoe UI", sans-serif; --font-head: 'Rawline', 'Raleway', system-ui, -apple-system, "Segoe UI", sans-serif; } * { box-sizing: border-box; } /* é só wrapper semântico do picImg(); display:contents torna-o transparente ao layout para que os seletores CSS de e o posicionamento continuem valendo (o filho participa do fluxo do pai). */ picture { display: contents; } /* ===== Brasão (logo institucional) ===== O brasao.svg é quase quadrado (viewBox 500.75×478.31). Os slots de logo do gov.br DS (header, footer e o menu offcanvas) aplicam só `max-height` (ou nenhum limite) + `max-width:100%`, o que estica a : ou à largura disponível (header/footer/menu-title) ou à altura natural de 478px (menu-logos), enquanto o SVG se desenha pequeno e centralizado (preserveAspectRatio). Resultado: brasão flutuando/esmagado e caixas com espaço vazio enorme. Fixar a altura + width:auto + object-fit:contain restaura a proporção em todos os slots. */ #govbr-cidades-header .header-logo img { width: auto; height: var(--header-logo-size); max-width: none; object-fit: contain; } .br-footer .logo img { width: auto; height: var(--footer-logo-height, 48px); max-width: var(--footer-logo-width, 180px); object-fit: contain; } /* Menu offcanvas: cabeçalho (ao lado do título, que quebrava em 3 linhas) e rodapé (caixa de 478px de altura que criava o vão vazio). */ #main-navigation .menu-title img { width: auto; height: 40px; max-width: none; object-fit: contain; } #main-navigation .menu-logos img { width: auto; height: 56px; max-width: 100%; max-height: 56px; object-fit: contain; } /* ===== Acessibilidade (classes em , controladas pela utility bar) ===== */ html { font-size: 16px; } html.fz-sm { font-size: 14px; } html.fz-lg { font-size: 18px; } html.fz-xl { font-size: 20px; } html.hc body { background: #000 !important; color: #fff !important; } html.hc .gov-bar, html.hc .utility-bar { background: #000 !important; color: #FFCD07 !important; } html.hc .gov-bar a, html.hc .utility-bar a, html.hc .utility-bar button { color: #FFCD07 !important; border-color: #FFCD07 !important; } html.hc .site-header { background: #000 !important; border-bottom-color: #FFCD07 !important; } html.hc .site-header .titles h1, html.hc .site-header .titles p { color: #fff !important; } html.hc .site-nav { background: #000 !important; border-top: 2px solid #FFCD07; } html.hc .site-nav a { color: #FFCD07 !important; } html.hc .site-nav a:hover, html.hc .site-nav a.active { background: #FFCD07 !important; color: #000 !important; } html.hc article.page, html.hc article.news-detail, html.hc .news-card, html.hc .event-item, html.hc .doc-item, html.hc .home-events-list, html.hc .home-docs-list, html.hc .audience-card, html.hc .service-card, html.hc .shortcut-card, html.hc .home-block p.empty, html.hc .docs-list, html.hc .agenda-list, html.hc .agenda-calendar, html.hc .cal-day { background: #000 !important; color: #fff !important; border-color: #FFCD07 !important; } html.hc h1, html.hc h2, html.hc h3, html.hc h4 { color: #FFCD07 !important; } html.hc a { color: #FFCD07 !important; } html.hc .more-link, html.hc .breadcrumb a, html.hc .breadcrumb span { color: #FFCD07 !important; } html.hc .home-stats { background: #000 !important; border: 1px solid #FFCD07; } html.hc .home-stats h2, html.hc .stat-item .value, html.hc .stat-item .label, html.hc .stat-item .sub { color: #FFCD07 !important; } html.hc .dev-banner { background: #FFCD07 !important; color: #000 !important; } /* ===== Utility bar (acessibilidade + atalhos rápidos, em todos os shells) ===== */ .utility-bar { background: var(--c-primary-darker); color: #e8eef5; font-size: 12.5px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .utility-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .utility-bar .a11y-tools { display: flex; gap: 4px; align-items: center; } .utility-bar .a11y-tools button { background: transparent; border: 1px solid rgba(255,255,255,0.25); color: #e8eef5; width: 30px; height: 26px; border-radius: var(--radius); font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; transition: background-color .12s, border-color .12s; } .utility-bar .a11y-tools button:hover { background: rgba(255,255,255,0.10); border-color: var(--c-accent); color: var(--c-accent); } .utility-bar .quick-links { display: flex; gap: 16px; flex-wrap: wrap; } .utility-bar .quick-links a { color: #e8eef5; text-decoration: none; font-weight: 500; } .utility-bar .quick-links a:hover { color: var(--c-accent); text-decoration: underline; } @media (max-width: 720px) { .utility-bar .container { gap: 8px; } .utility-bar .quick-links { gap: 8px; font-size: 12px; } } html, body { height: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--c-text); background: var(--c-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--c-primary-dark); } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--c-primary-dark); line-height: 1.25; margin-top: 1.4em; font-weight: 700; letter-spacing: -0.01em; } h1 { font-size: 2.2rem; font-weight: 800; } h2 { font-size: 1.6rem; } h3 { font-size: 1.15rem; } /* Defesa contra estouro horizontal: quebra tokens muito longos — URLs sem espaço ou texto colado do CMS com espaços não-quebráveis (nbsp), que o navegador não quebra sozinho e empurram a largura da página. `anywhere` também reduz o min-content, deixando colunas flex/grid encolherem. Só atua quando o conteúdo realmente não cabe; texto normal fica intacto. (overflow-wrap não é herdado — por isso aplicamos aos elementos de texto.) */ p, li, dt, dd, td, th, blockquote, figcaption, .gab-bio, .entity-lead, .entity-summary { overflow-wrap: anywhere; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* ===== Avisos globais (faixa no topo, gerida no admin) ===== */ .site-alerts:empty { display: none; } .site-alert { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: .95rem; line-height: 1.4; border-bottom: 1px solid rgba(0,0,0,.08); } .site-alert > .fas { flex: 0 0 auto; font-size: 1.05rem; } .site-alert-msg { flex: 1 1 auto; overflow-wrap: anywhere; } .site-alert-msg a { font-weight: 600; } .site-alert-close { flex: 0 0 auto; background: transparent; border: 0; cursor: pointer; color: inherit; opacity: .7; padding: 4px 6px; border-radius: 6px; line-height: 1; } .site-alert-close:hover { opacity: 1; background: rgba(0,0,0,.08); } .site-alert--info { background: #e7eefa; color: #15406b; } .site-alert--info a, .site-alert--info .fas { color: #15406b; } .site-alert--success { background: #d8f5e1; color: #1f7a3a; } .site-alert--success a, .site-alert--success .fas { color: #1f7a3a; } .site-alert--warning { background: #fff5d6; color: #8a6d00; } .site-alert--warning a, .site-alert--warning .fas { color: #8a6d00; } .site-alert--danger { background: #fde2e1; color: #b42318; } .site-alert--danger a, .site-alert--danger .fas { color: #b42318; } /* ===== Conteúdo ===== */ main { padding: 32px 0 56px; /* Reserva ~1 viewport enquanto o conteúdo é hidratado via /api. Sem isso, o #site-content começa só com o spinner e, ao injetar o conteúdo, empurra o rodapé (que é renderizado logo abaixo) para baixo — gerando o maior salto de CLS (~0.75 no mobile). Com 100vh o rodapé já nasce fora da dobra, então seu deslocamento posterior não conta como layout shift. */ min-height: 100vh; } article.page { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 36px 40px; box-shadow: var(--shadow-sm); } article.page header h1 { margin-top: 0; } article.page header .subtitle { color: var(--c-text-muted); font-size: 1.05rem; margin: -4px 0 16px; } article.page .meta { color: var(--c-text-muted); font-size: 13px; margin-bottom: 24px; } article.page .body p { margin: 1em 0; } article.page .body img { max-width: 100%; height: auto; border-radius: var(--radius); } article.page .body table { border-collapse: collapse; width: 100%; margin: 1em 0; } article.page .body th, article.page .body td { border: 1px solid var(--c-border); padding: 8px 12px; text-align: left; } article.page .body th { background: var(--c-primary-light); font-weight: 600; } article.page .body blockquote { border-left: 4px solid var(--c-accent); padding: 4px 16px; margin: 1.2em 0; color: var(--c-text-muted); font-style: italic; } /* ===== Estado de carregamento e erros ===== */ /* Reserva altura mínima de uma viewport enquanto o conteúdo é injetado via JS. Mantém o rodapé fora da viewport durante o "Carregando…", evitando o grande salto de layout (CLS) quando o shell vazio é trocado pelo conteúdo real. */ #site-content { min-height: 100vh; } .state { text-align: center; padding: 64px 16px; color: var(--c-text-muted); } .state.error { color: #b42318; } .state.error a { color: #b42318; } /* ===== Faixa de aviso "em construção" ===== */ .dev-banner { background: var(--c-accent); color: #1f1a08; text-align: center; padding: 8px 16px; font-size: 13px; font-weight: 600; } /* ===== Utilitário screen-reader-only ===== * Definição autoritativa do portal — não depender do FontAwesome (que era a * única fonte de `.sr-only` antes). O nome do Bootstrap `.visually-hidden` * NÃO é usado: o padrão único do site é `.sr-only`. */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===== Listagens institucionais (cabeçalho + filtro padronizados) ===== * Padrão compartilhado por notícias, documentos, secretarias, conselhos, * terceiro setor e agenda — substitui as variações por página * (news-listing-header/docs-header/entities-header/agenda-header e * news-filter/docs-filter/entities-filter). */ .listing-header { margin: 0 0 16px; } .listing-header h1 { margin: 0; } .listing-intro { color: var(--c-text-muted); margin: 8px 0 0; max-width: 820px; } .listing-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 16px 0 24px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 12px; } .listing-filter .filter-select { min-width: 180px; } .listing-filter .listing-search { flex: 1; min-width: 220px; margin-bottom: 0; } @media (max-width: 720px) { article.page { padding: 24px 16px; } .listing-filter { flex-direction: column; align-items: stretch; } .listing-filter .filter-select, .listing-filter .listing-search { min-width: 0; width: 100%; } } /* ===== Menu principal (offcanvas): faixa vertical sobreposta ===== * O core.min.css do DS aplica `flex:1` ao `.menu-panel` quando o menu abre, o * que faz o painel ocupar TODA a largura da tela. Aqui o limitamos a uma faixa * lateral; o `.menu-scrim` (position:absolute, inset:0) escurece o restante da * página por baixo do painel e fecha o menu ao clicar. */ .br-menu.active .menu-panel { flex: 0 0 auto; width: min(88vw, 360px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); } /* Corpo rolável e rodapé ao fim do painel (altura total da faixa). */ .br-menu .menu-body { flex: 1 1 auto; } /* ===== Rodapé · bloco de Contato (legibilidade) ===== * O DS aperta o `.content` (line-height:16px). Aqui empilhamos endereço, * telefone, e-mail e horário em linhas com ícone, com quebra para textos * longos (e-mail) não estourarem a coluna estreita. */ .br-footer .footer-contact { display: flex; flex-direction: column; gap: 10px; } .br-footer .footer-contact .fc-line { margin: 0; display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; font-size: 0.875rem; } .br-footer .footer-contact .fc-line > i { flex: 0 0 1.1em; margin-top: 0.18em; text-align: center; opacity: 0.85; } .br-footer .footer-contact a, .br-footer .footer-contact span { overflow-wrap: anywhere; word-break: break-word; } .br-footer .footer-contact a { text-decoration: underline; text-underline-offset: 2px; } /* ===== Busca do cabeçalho: 2 botões (voz + buscar) lado a lado ===== * O DS posiciona todo `.br-button.circle` em `right:4px` (absolute), fazendo * os dois ícones se sobreporem. Afastamos o botão de voz para a esquerda do * botão de busca e damos espaço ao texto digitado. */ .br-header .header-search .br-input.has-icon input { padding-right: 5.25rem; } /* Botão de busca (submit) à direita; voz à esquerda dele. Miramos por atributo/ * classe específica para vencer a regra do DS (right:4px) SEM uma regra genérica * `.br-button.circle` que sobreporia o botão de voz por maior especificidade. */ .br-header .header-search .br-input.has-icon .br-button[type="submit"] { right: 6px; } .br-header .header-search .br-input.has-icon .br-button.btn-busca-por-voz { right: 46px; } /* Estado "ouvindo" da busca por voz: microfone pulsa em vermelho. * O halo é um ::after que anima transform+opacity (compositado, roda fora da * main thread) em vez de box-shadow (não compositado). Visual idêntico: um anel * que cresce e some. Ver PageSpeed "evitar animações não compostas". */ .br-header .header-search .btn-busca-por-voz.listening { color: #fff; background-color: var(--c-danger, #e52207); overflow: visible; /* o DS deixa .br-button com overflow:hidden (ripple); libera o halo */ } .br-header .header-search .btn-busca-por-voz.listening::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background-color: rgba(229, 34, 7, 0.5); animation: voice-pulse 1.1s ease-in-out infinite; pointer-events: none; } @keyframes voice-pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.7); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .br-header .header-search .btn-busca-por-voz.listening::after { animation: none; } } /* ===== Página de Busca (resultados agrupados) ===== */ .search-group { margin-top: 28px; } .search-group-title { font-size: 1.15rem; color: var(--c-primary-dark); margin: 0 0 12px; } .search-result-list { display: flex; flex-direction: column; gap: 10px; } .search-result { display: block; text-decoration: none; color: inherit; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 14px 16px; transition: border-color .12s, box-shadow .12s; } .search-result:hover { border-color: var(--c-primary); box-shadow: var(--shadow-sm); } .search-result-tag { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--c-primary); background: var(--c-primary-light); padding: 2px 8px; border-radius: 100px; margin-bottom: 6px; } .search-result-title { display: block; font-weight: 600; color: var(--c-primary-dark); } .search-result-desc { display: block; color: var(--c-text-muted); font-size: .9rem; margin-top: 4px; } /* ===== Pesquisa de satisfação ===== */ .survey-grid { display: grid; gap: 20px; margin-top: 8px; grid-template-columns: 1fr 1fr; align-items: start; } @media (max-width: 760px) { .survey-grid { grid-template-columns: 1fr; } } .survey-card { background: #fff; border: 1px solid var(--c-border, #e3e8f0); border-radius: 12px; padding: 20px 22px; box-shadow: 0 1px 3px rgba(15,23,42,.05); } .survey-card h2 { margin: 0 0 14px; } .survey-field { margin-bottom: 16px; border: 0; padding: 0; } .survey-field legend { font-weight: 600; padding: 0; margin-bottom: 6px; } .survey-sublabel { display: block; font-weight: 600; margin-bottom: 6px; } .survey-req { color: #b42318; } /* Estrelas (radiogroup) — preenche a estrela escolhida e as de menor nota. */ .survey-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; font-size: 2rem; } .survey-stars label { color: #c9ced6; cursor: pointer; line-height: 1; transition: color .12s; } .survey-stars label i { pointer-events: none; } .survey-stars input:checked ~ label, .survey-stars label:hover, .survey-stars label:hover ~ label { color: #e7a200; } .survey-stars input:focus-visible + label { outline: 2px solid var(--c-primary, #1a4d80); outline-offset: 3px; border-radius: 4px; } .survey-stars-hint { color: var(--c-text-muted); font-size: .85rem; margin: 6px 0 0; min-height: 1.2em; } .survey-feedback { margin: 10px 0 0; font-size: .92rem; } .survey-feedback.is-error { color: #b42318; } .survey-thanks { margin: 12px 0 0; padding: 14px 16px; border-radius: 10px; background: #d8f5e1; color: #1f7a3a; font-weight: 500; } /* Resultados */ .survey-score { text-align: center; margin-bottom: 18px; } .survey-score-num { font-size: 2.6rem; font-weight: 700; color: var(--c-primary-dark); line-height: 1; } .survey-score-max { font-size: 1.1rem; font-weight: 500; color: var(--c-text-muted); } .survey-score-stars { color: #e7a200; font-size: 1.3rem; margin: 4px 0; } .survey-score-stars .is-empty { color: #c9ced6; } .survey-score-total { color: var(--c-text-muted); font-size: .9rem; } .survey-dist { display: flex; flex-direction: column; gap: 8px; } .survey-bar-row { display: grid; grid-template-columns: 44px 1fr 40px; align-items: center; gap: 10px; } .survey-bar-label { font-size: .9rem; color: var(--c-text-muted); white-space: nowrap; } .survey-bar-label i { color: #e7a200; } .survey-bar { background: var(--c-primary-light, #e7eefa); border-radius: 100px; height: 10px; overflow: hidden; } .survey-bar-fill { display: block; height: 100%; background: var(--c-primary, #1a4d80); border-radius: 100px; } .survey-bar-val { font-size: .85rem; color: var(--c-text-muted); text-align: right; } .survey-empty { color: var(--c-text-muted); } /* ===== Gabinete (galeria de prefeitos/vices) ===== */ .gab-empty { color: var(--c-text-muted); padding: 16px 0; } .gab-photo { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: var(--c-primary-light, #e7eefa); color: var(--c-primary, #1a4d80); flex-shrink: 0; } .gab-photo img { width: 100%; height: 100%; object-fit: cover; } .gab-photo.large { width: 168px; height: 200px; border-radius: 14px; } .gab-photo.medium { width: 96px; height: 110px; border-radius: 10px; } .gab-photo.is-empty .fas { font-size: 2.2rem; opacity: .5; } /* Gestão atual (destaque) */ .gab-current { display: flex; gap: 22px; align-items: flex-start; background: #fff; border: 1px solid var(--c-border, #e3e8f0); border-left: 5px solid var(--c-primary, #1a4d80); border-radius: 14px; padding: 22px 24px; box-shadow: 0 1px 3px rgba(15,23,42,.06); margin-bottom: 28px; } .gab-current-info { min-width: 0; } .gab-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1f7a3a; background: #d8f5e1; padding: 2px 10px; border-radius: 100px; margin-bottom: 8px; } .gab-name { margin: 0; font-weight: 700; color: var(--c-primary-dark, #15406b); line-height: 1.2; } .gab-current .gab-name { font-size: 1.5rem; } .gab-role { margin: 2px 0 0; color: var(--c-text-muted); font-weight: 500; } .gab-bio { margin-top: 12px; color: var(--c-text, #1f2937); line-height: 1.6; } .gab-bio p { margin: 0 0 .6em; } /* Galeria histórica */ .gab-gallery-title { margin: 0 0 14px; } .gab-gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .gab-card { background: #fff; border: 1px solid var(--c-border, #e3e8f0); border-radius: 12px; padding: 18px; text-align: center; box-shadow: 0 1px 3px rgba(15,23,42,.05); } .gab-card .gab-photo { margin: 0 auto 12px; } .gab-card .gab-name { font-size: 1.05rem; } .gab-card .gab-role { font-size: .85rem; } .gab-card .gab-bio { margin-top: 8px; font-size: .9rem; text-align: left; } @media (max-width: 560px) { .gab-current { flex-direction: column; align-items: center; text-align: center; } .gab-current .gab-tag { margin-top: 4px; } } /* Ouvidoria — formulário, protocolo e linha do tempo da consulta */ .ouvidoria-form .br-input, .ouvidoria-form .br-checkbox { margin-bottom: 1rem; } .ouvidoria-ident { border-left: 3px solid var(--blue-20, #c5d4eb); padding-left: 1rem; } .ouvidoria-protocolo { border: 1px solid var(--gray-20, #dadada); border-radius: 8px; padding: 1rem 1.25rem; background: var(--gray-2, #f8f8f8); } .ouvidoria-cod { font-family: monospace; font-size: 1.15rem; font-weight: 700; letter-spacing: .03em; color: var(--blue-warm-vivid-70, #1351b4); } .ouvidoria-result-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .ouvidoria-timeline { list-style: none; padding: 0; margin: .5rem 0 0; } .ouvidoria-timeline li { border-left: 3px solid var(--blue-20, #c5d4eb); padding: 0 0 1rem 1rem; margin-left: .25rem; position: relative; } .ouvidoria-timeline li::before { content: ""; position: absolute; left: -7px; top: .35rem; width: 11px; height: 11px; border-radius: 50%; background: var(--blue-warm-vivid-70, #1351b4); } .ouvidoria-timeline-date { display: block; font-size: .85rem; color: var(--gray-60, #555); } /* Dados Abertos — grade de conjuntos de dados */ .dados-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .dados-card { border: 1px solid var(--gray-20, #dadada); border-radius: 8px; padding: 1rem 1.25rem; background: #fff; display: flex; flex-direction: column; } .dados-card h2 { margin: 0 0 .5rem; } .dados-desc { flex: 1; margin: 0 0 .5rem; } .dados-freq { font-size: .8rem; color: var(--gray-60, #555); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 .75rem; } .dados-actions { display: flex; gap: .5rem; } .dados-licenca { font-size: .85rem; } /* Correção de contraste para os links no rodapé (Lighthouse/PageSpeed) */ .br-footer a { color: #ffffff !important; } .br-footer a:hover, .br-footer a:focus { color: #f2f2f2 !important; text-decoration: underline !important; } /* Avoid CLS from VLibras popup */ img.vp-pop-up { width: 150px; height: 40px; }