/* Inter (OFL, fonts/OFL.txt) no site; a Carlito fica para os .docx (fontes/gerar_docx.py) e as imagens de compartilhamento. */ @font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } :root { /* paleta azul (spec 2026-10-19-clareza, seção 7). Contrastes em testes/test_css.py. */ --azul: #2A5BE8; /* botões, links, abas ativas, foco, linha do mapa: 5,6:1 sobre o branco */ --azul-escuro: #193A99; /* hover, pontos de controle, texto sobre o azul claro */ --azul-claro: #EEF3FF; /* fundo de item ativo e de realce */ --gradiente: linear-gradient(135deg, #3D72FF 0%, #2A5BE8 50%, #193A99 100%); --fundo: #F9FAFC; --card: #FFFFFF; --borda: #E2E3E7; /* cartões e divisórias */ --borda-controle: #8A909C; /* campos e botões secundários: 3,2:1 sobre o branco (WCAG 1.4.11) */ --tinta: #0A0D14; --tinta-3: #4E535C; --tinta-menu: #333842; /* estados, sempre com rótulo em texto. O verde do spec (#009966) dá 3,4:1 sobre o verde claro: escurecido para #008257 (4,5:1). */ --verde: #008257; --verde-claro: #ECFAF3; --laranja: #B45309; --laranja-claro: #FFF4E8; --vermelho: #C2183D; --vermelho-claro: #FFEEF0; --raio: 18px; /* cartões */ --raio-p: 10px; /* botões, campos e itens do menu */ /* nomes usados no resto do arquivo, apontando para a paleta */ --tinta-2: var(--tinta); --linha-fina: var(--borda); --acento: var(--azul); /* texto de acento e links */ --botao: var(--azul); /* fundo dos botões principais, texto branco */ --botao-tinta: #FFFFFF; --botao-hover: var(--azul-escuro); --linha-escura: var(--azul-escuro); /* fundo sob texto branco; pontos de controle */ --acento-claro: var(--azul-claro); --acento-suave: var(--azul); --selo: var(--laranja); --selo-tinta: var(--laranja); --selo-fundo: var(--laranja-claro); --alerta: var(--vermelho); --alerta-fundo: var(--vermelho-claro); /* lateral fixa, de altura total, colada à esquerda; topo e área ficam à direita dela. A 1366 px (barra de rolagem de 15 px), com 24 px de respiro de cada lado na página inicial e a borda do cartão, o cartão do mapa fica com 1366 - 15 - 256 - 48 - 2 = 1045 px. */ --lateral: 256px; --sombra: 0 1px 2px rgba(10, 13, 20, .04), 0 4px 14px rgba(10, 13, 20, .04); --suave: cubic-bezier(.4, 0, .2, 1); color: var(--tinta); background: var(--fundo); } * { box-sizing: border-box; } html, body { margin: 0; } body { font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; background: var(--fundo); font-size: 15px; line-height: 1.6; color: var(--tinta); overflow-x: hidden; } button { color: inherit; cursor: pointer; } /* Inter em tudo: controles, minuta, caixa de cadastro e o texto do mapa não caem em fonte do sistema */ button, input, select, textarea { font: inherit; } pre, code, kbd, samp, .minuta, #minuta, pre#minuta-texto, .cadastro { font-family: inherit; } svg text, .mapa text { font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; } :focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; } .pular { position: absolute; left: 12px; top: -60px; background: var(--botao); color: var(--botao-tinta); padding: 8px 14px; border-radius: 10px; z-index: 50; text-decoration: none; } .pular:focus { top: 12px; } /* ---------- estrutura: lateral fixa à esquerda, topo e área à direita dela ---------- */ .app { min-height: 100vh; } .area { min-width: 0; margin-left: var(--lateral); padding: 32px; background: var(--fundo); } /* ---------- busca no topo ---------- */ .busca { width: 100%; border: 1.5px solid var(--borda-controle); border-radius: var(--raio-p); padding: 9px 12px 9px 36px; font: inherit; font-size: 16px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A5BE8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E") 10px 50% / 18px no-repeat; } .busca:focus { outline: none; border-color: var(--botao); box-shadow: 0 0 0 3px var(--acento-claro); } .busca-topo { position: relative; flex: 1 1 auto; min-width: 0; max-width: 360px; } /* borda de campo com 3:1 (WCAG 1.4.11), como os demais campos; fundo cinza do canvas */ #busca-geral { width: 100%; height: 40px; border: 1px solid var(--borda-controle); border-radius: var(--raio-p); padding: 0 40px 0 38px; font: inherit; font-size: 15px; color: var(--tinta); background: var(--fundo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E535C' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E") 12px 50% / 17px no-repeat; } #busca-geral:focus { outline: none; border-color: var(--botao); background-color: var(--card); box-shadow: 0 0 0 3px var(--acento-claro); } /* dica do atalho: a tecla "/" foca a busca (js/app.js); some com o campo em uso */ .busca-atalho { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); min-width: 22px; padding: 1px 6px; border: 1px solid var(--borda-controle); border-radius: 6px; background: var(--card); color: var(--tinta-3); font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.4; text-align: center; pointer-events: none; } #busca-geral:focus ~ .busca-atalho, #busca-geral:not(:placeholder-shown) ~ .busca-atalho { display: none; } .busca-res { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; max-height: 60vh; overflow: auto; background: #fff; border-radius: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, .18); padding: 8px; } .busca-res ul { list-style: none; margin: 0 0 6px; padding: 0; } .busca-grupo { margin: 6px 8px 4px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); } .busca-item { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: none; border-radius: 10px; padding: 8px; color: var(--tinta); text-decoration: none; } .busca-item:hover, .busca-item:focus-visible { background: var(--acento-claro); } .busca-item b { display: block; font-size: 15px; line-height: 1.25; } .busca-item small { display: block; color: var(--tinta-3); font-size: 13px; } .busca-vazia { margin: 8px; } /* ---------- barra superior ---------- */ .topo-site { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: 64px; margin-left: var(--lateral); padding: 0 32px 0 24px; background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borda); } /* marca: na lateral (computador) e no topo (celular, onde a lateral vira gaveta) */ a.marca, .marca-topo { display: flex; align-items: center; gap: 10px; color: var(--tinta); font-weight: 700; font-size: 18px; text-decoration: none; white-space: nowrap; } .marca-topo { display: none; } .menu-marca { flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--botao); color: var(--botao-tinta); display: grid; place-items: center; font-weight: 700; font-size: 18px; line-height: 1; } /* botões de ícone do topo: recolher a lateral e alto contraste */ .bt-icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--card); color: var(--tinta-menu); font-size: 19px; line-height: 1; } .bt-icone:hover { background: var(--azul-claro); color: var(--azul-escuro); } /* sem js/menu.js o botão não faria nada: só aparece com o menu pronto */ .bt-menu { display: none; } html.menu-pronto .bt-menu { display: inline-flex; } .bt-contraste[hidden] { display: none; } /* ligado: fundo cheio, anel e sublinhado, além do aria-pressed */ .bt-contraste[aria-pressed="true"] { background: var(--botao); color: var(--botao-tinta); box-shadow: inset 0 0 0 2px var(--tinta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .topo-acoes { display: flex; align-items: center; gap: 10px; margin-left: auto; } .topo-acoes .bt, .topo-trilha { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; font-size: 14.5px; font-weight: 600; white-space: nowrap; } .topo-trilha { flex: none; border: 1px solid var(--botao); border-radius: var(--raio-p); background: var(--botao); color: var(--botao-tinta); text-decoration: none; } .topo-trilha:hover { background: var(--botao-hover); } /* Serviços e Área de trabalho no topo: só acima de 900 px (no celular, escondidos pelo bloco max-width: 900px; ficam na gaveta). De 901 a 1199 px, só o ícone (o rótulo continua no nome acessível e no title); de 1200 px, ícone e texto. */ .topo-acoes .topo-item { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 8px; width: 40px; padding: 0; } .topo-svg { flex: none; } .topo-rotulo { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ponto de "em breve" no canto do ícone; o texto está no title e no nome acessível */ .topo-breve { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: var(--laranja); font-size: 0; line-height: 0; overflow: hidden; } /* página atual: sem sublinhado (pedido do autor); fundo azul-claro e borda mais grossa, não só a cor */ .topo-acoes .topo-item, .topo-acoes .topo-item:hover { text-decoration: none; } .topo-acoes .topo-item[aria-current="page"] { text-decoration: none; background: var(--azul-claro); border-color: var(--azul); border-width: 2px; color: var(--azul-escuro); } /* de 901 a 1365 px a barra é apertada: folgas menores, para a busca não passar de ~200 px */ @media (min-width: 901px) and (max-width: 1365px) { .topo-site { gap: 8px; padding-right: 24px; } .topo-acoes { gap: 8px; } .topo-acoes .topo-onde, .topo-acoes .topo-trilha { padding: 0 12px; } } /* de 901 a 1049 px (lateral de 256 px aberta) falta ainda mais espaço: texto e folgas menores */ @media (min-width: 901px) and (max-width: 1049px) { .topo-site { gap: 6px; padding: 0 8px; } .topo-acoes { gap: 6px; } .topo-acoes .topo-item { width: 36px; } .topo-acoes .topo-onde, .topo-acoes .topo-trilha { padding: 0 9px; font-size: 13.5px; } } @media (min-width: 1200px) { .topo-acoes .topo-item { width: auto; padding: 0 12px; } .topo-rotulo { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } } /* o selo "Em breve" por escrito só onde cabe; antes disso fica o ponto (e o title, e o nome acessível) */ @media (min-width: 1366px) { .topo-breve { position: static; width: auto; height: auto; padding: 1px 7px; border: 1px solid var(--laranja); border-radius: 999px; background: var(--card); color: var(--tinta); font-size: 11.5px; font-weight: 700; line-height: 1.4; overflow: visible; } } /* página atual: cor e também sublinhado grosso, para não depender só da cor */ .topo-trilha[aria-current="page"], .topo-onde[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; } /* ---------- lateral (fases em sanfona; sem JavaScript, todas abertas) ---------- A sanfona, a gaveta e o recolher valem só com html.menu-pronto, classe posta por Menu.iniciar (js/menu.js): se o script não carregar, a lateral fica aberta e alcançável. Computador: fixa, de altura total, colada à esquerda, sem sombra nem cantos. Marca no alto, grupos com rolagem própria e o cartão da área de trabalho fixo no pé. */ .menu-lateral { position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; flex-direction: column; width: 256px; background: var(--card); border-right: 1px solid var(--borda); font-size: 14px; } .lateral-topo { flex: none; display: flex; align-items: center; height: 64px; padding: 0 20px; } .lateral-rolagem { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 16px; } .grupo-menu { margin: 18px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); } .grupo-menu:first-child { margin-top: 6px; } .fase-titulo { margin: 0; font-size: inherit; } /* a linha da fase é um link para a página da fase com a mesma cara de botão de sanfona */ .fase-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: var(--raio-p); background: none; color: var(--tinta-menu); text-align: left; text-decoration: none; font-weight: 500; font-size: 14px; line-height: 1.25; cursor: pointer; } .fase-toggle:hover { background: var(--fundo); } /* página da fase: fundo e peso do item atual; o sublinhado fica só no nome (não nos selos) */ .menu-lateral .fase-toggle[aria-current="page"] { text-decoration: none; } .fase-toggle[aria-current="page"] .fase-nome { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .fase-num { flex: none; width: 22px; height: 22px; border-radius: 6px; background: #F1F2F4; color: var(--tinta-menu); display: grid; place-items: center; font-size: 12px; font-weight: 600; } .fase-nome { min-width: 0; } /* selo com o número de etapas da fase */ .fase-contagem { flex: none; margin-left: auto; min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--azul-claro); color: var(--azul-escuro); font-size: 12px; font-weight: 600; text-align: center; } html.menu-pronto .fase-toggle::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 2px 0 0; border-right: 2px solid var(--tinta-3); border-bottom: 2px solid var(--tinta-3); transform: rotate(-45deg); transition: transform .25s var(--suave); } html.menu-pronto .fase-toggle[aria-expanded="true"]::after { transform: rotate(45deg); } html.menu-pronto .fase-toggle[aria-expanded="true"] .fase-num { background: var(--botao); color: var(--botao-tinta); } html.menu-pronto .fase-menu[data-aberta="false"] .etapas-menu { display: none; } /* sanfona animada (js/menu.js): a altura vai de 0 à medida do conteúdo; ao fechar, a lista fica à vista até o fim */ html.menu-pronto .etapas-menu { transition: height .25s var(--suave); } html.menu-pronto .fase-menu[data-aberta="false"] .etapas-menu.fechando { display: block; } .etapas-menu { list-style: none; margin: 2px 0 6px; padding: 0 0 0 18px; } /* grade de 2 colunas: marcador (12 px) e texto; o nome ocupa a linha toda e o rótulo do tipo vai embaixo, alinhado à esquerda do nome; o marcador fica no meio da primeira linha do nome */ .etapa-menu > a { display: grid; grid-template-columns: 12px 1fr; column-gap: 8px; align-items: start; min-height: 32px; padding: 6px 8px; border-radius: 8px; color: var(--tinta-menu); font-size: 13px; text-decoration: none; line-height: 1.3; } .etapa-menu > a:hover { background: var(--fundo); } .etapa-nome { grid-column: 2; min-width: 0; } /* marcador redondo; o da etapa atual é azul cheio e maior (o tipo vem no rótulo em texto) */ .marcador { flex: none; width: 7px; height: 7px; margin: 0 1px; border: 1.5px solid var(--borda-controle); border-radius: 50%; background: var(--card); } .etapa-menu > a .marcador { grid-column: 1; grid-row: 1; justify-self: center; margin-top: calc((1.3em - 7px) / 2); } .etapa-menu > a[aria-current="page"] .marcador { width: 9px; height: 9px; margin: calc((1.3em - 9px) / 2) 0 0; border-color: var(--azul); background: var(--azul); } .rotulo-etapa { grid-column: 2; justify-self: start; margin-top: 4px; padding: 0 6px; border: 1px solid var(--borda-controle); border-radius: 999px; color: var(--tinta-3); font-size: 11px; font-weight: 600; white-space: nowrap; } .etapa-g .rotulo-etapa { background: var(--linha-escura); border-color: var(--linha-escura); color: #fff; } .docs-etapa { list-style: none; margin: 0 0 4px; padding: 0 0 0 19px; } .docs-etapa a { display: flex; align-items: flex-start; gap: 7px; min-height: 24px; padding: 3px 8px; border-radius: 6px; color: var(--acento); font-size: 12.5px; line-height: 1.3; text-decoration: none; } .docs-etapa a:hover { text-decoration: underline; } .icone-doc { flex: none; width: 11px; height: 14px; margin-top: 1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14' fill='none' stroke='%232A5BE8' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M1 1h6l3 3v9H1z'/%3E%3Cpath d='M7 1v3h3M3 7h5M3 9.5h5'/%3E%3C/svg%3E") no-repeat center / contain; } .atalhos-menu { list-style: none; margin: 0; padding: 0; } .atalhos-menu a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: var(--raio-p); color: var(--tinta-menu); font-weight: 500; text-decoration: none; } .atalhos-menu a:hover { background: var(--fundo); } .icone-menu { flex: none; width: 20px; height: 20px; color: var(--tinta-3); } /* página atual: fundo, peso e sublinhado, para não depender só da cor */ .menu-lateral a[aria-current="page"] { background: var(--acento-claro); color: var(--azul-escuro); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .menu-lateral a[aria-current="page"] .icone-menu { color: var(--azul-escuro); } /* cartão fixo no pé da lateral */ .cartao-lateral { flex: none; display: flex; align-items: center; gap: 12px; margin: 12px; padding: 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo); color: var(--tinta); text-decoration: none; } .cartao-lateral:hover { background: var(--azul-claro); } .cartao-lateral-texto { min-width: 0; line-height: 1.3; } .cartao-lateral-texto b { display: block; font-size: 14px; font-weight: 600; } .cartao-lateral-texto small { display: block; color: var(--tinta-3); font-size: 12.5px; } .gaveta-fundo { position: fixed; inset: 0; z-index: 55; background: rgba(17, 17, 17, .55); } .gaveta-fundo[hidden] { display: none; } /* ---------- conteúdo: sem cartão único em volta; o conteúdo vem em cartões separados ---------- */ /* largura toda: as páginas ocupam a área menos o respiro de 32 px (16 px no celular); o conteúdo dos cartões (texto, listas, glossário, tabelas, fichas e minuta) acompanha a largura do cartão */ .pagina { width: 100%; min-width: 0; } .cartao { margin: 0 0 20px; padding: 24px; background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); } .pagina h2 { margin: 26px 0 8px; font-size: 20px; font-weight: 600; line-height: 1.3; } .cartao > h2:first-child { margin-top: 0; } .pagina h3 { margin: 18px 0 6px; font-size: 16px; font-weight: 600; } .pagina a { color: var(--acento); } /* ---------- cabeçalho padrão (cabecalho_pagina em fontes/render/base.py) ---------- */ .cabecalho-pagina { margin: 0 0 24px; } .migalha { margin: 0 0 12px; font-size: 13px; color: var(--tinta-3); } .migalha ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; padding: 0; } .migalha li { display: inline-flex; align-items: center; gap: 6px; } .pagina .migalha a { color: var(--tinta-3); text-decoration: none; } .pagina .migalha a:hover { color: var(--azul-escuro); text-decoration: underline; } /* página atual: texto escuro e mais peso */ .migalha [aria-current="page"] { color: var(--tinta); font-weight: 500; } .cabecalho-linha { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; } .cabecalho-texto { min-width: 0; } .sobretitulo { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--azul); } .cabecalho-pagina h1 { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--tinta); } .resumo-pagina { margin: 8px 0 0; max-width: 72ch; font-size: 15px; color: var(--tinta-3); } .acoes-pagina { flex: none; display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 8px; } .acoes-pagina .bt { display: inline-flex; align-items: center; min-height: 40px; font-size: 14.5px; } .ficha { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 0; margin: 14px 0; border-top: 1px solid var(--linha-fina); } .ficha dt, .ficha dd { margin: 0; padding: 8px 6px; border-bottom: 1px solid var(--linha-fina); } .ficha dt { font-size: 14px; font-weight: 600; color: var(--tinta); } .ficha dd { font-size: 15px; } /* glossário: um termo por bloco; o alvo da âncora ganha o fundo azul claro */ .glossario { margin: 0; } .glossario .termo { padding: 14px 12px; border-bottom: 1px solid var(--linha-fina); border-radius: var(--raio-p); scroll-margin-top: 16px; } .glossario .termo:last-child { border-bottom: 0; } .glossario .termo:target { background: var(--azul-claro); } .glossario dt { font-size: 16px; font-weight: 600; color: var(--tinta); } .glossario dd { margin: 4px 0 0; } .glossario dd p { margin: 0; } .termo-base { margin-top: 8px; font-size: 14px; color: var(--tinta-3); } .termo-base-rotulo { display: block; font-weight: 600; } .termo-base .lista-simples li { margin-bottom: 2px; } .lista-simples { margin: 0; padding-left: 20px; } .lista-simples li { margin-bottom: 6px; } /* cartões em grade que preenche a largura; os da mesma linha têm a mesma altura; uma coluna no celular */ .lista-cartoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; } .lista-cartoes li { display: flex; flex-direction: column; height: 100%; border: 1.5px solid var(--linha-fina); border-radius: 12px; padding: 10px 14px; background: var(--card); } .lista-cartoes b { font-size: 16px; font-weight: 600; } .lista-cartoes small { display: block; color: var(--tinta-3); font-size: 14px; } .rolagem-x { overflow-x: auto; margin: 0 0 12px; } .tabela-larga { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; } .tabela-larga th, .tabela-larga td { text-align: left; vertical-align: top; padding: 8px 8px; border-bottom: 1px solid var(--linha-fina); } .tabela-larga th { color: var(--tinta-2); } .rodape { margin-top: 22px; font-size: 13px; color: var(--tinta-3); } .rodape a { color: var(--acento); } .preencher { background: #FFE9A8; color: #111; padding: 0 3px; border-radius: 3px; } .aviso-uso { margin: 18px 0 0; padding: 10px 14px; border-left: 4px solid var(--botao); background: var(--acento-claro); border-radius: 8px; font-weight: 700; color: var(--tinta); } .acoes { display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap; margin: 12px 0; } .bt { display: inline-block; border: 1.5px solid var(--botao); background: var(--botao); color: var(--botao-tinta); border-radius: var(--raio-p); padding: 7px 18px; text-align: left; font-weight: 600; font-size: 15px; text-decoration: none; } .bt:hover:not(:disabled), .bt:focus-visible { background: var(--botao-hover); } .bt:disabled { opacity: .45; cursor: default; } .pagina a.bt { color: var(--botao-tinta); } .checklist { list-style: none; margin: 0; padding: 0; } .checklist li { position: relative; padding-left: 30px; margin-bottom: 8px; } .checklist li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; border: 2px solid var(--tinta); border-radius: 3px; } .trecho { margin: 0 0 12px; padding: 8px 14px; border-left: 4px solid var(--botao); background: var(--fundo); border-radius: 0 8px 8px 0; } .trecho p { margin: 0 0 4px; } .conferencia { color: var(--tinta-3); font-size: 14.5px; } /* ---------- casos ---------- */ .destaque-obs { margin: 0 0 16px; padding: 12px 16px; border: 2px solid var(--linha-escura); border-radius: 12px; background: var(--acento-claro); font-weight: 700; } .destaque-obs p { margin: 0; } .filtro-casos { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0 0 14px; } .filtro-casos[hidden] { display: none; } .filtro-campo label { display: block; margin: 0 0 4px; font-weight: 700; } .filtro-campo select { min-height: 44px; max-width: 100%; padding: 8px 12px; border: 1.5px solid var(--tinta-3); border-radius: 10px; background: #fff; color: var(--tinta); font: inherit; } .filtro-contagem { flex-basis: 100%; margin: 0; color: var(--tinta-3); font-weight: 700; } .tabela-larga tr[hidden] { display: none; } /* ---------- trilha "É CPSI mesmo?" ---------- */ .trilha-lista { padding-left: 22px; } .trilha-lista > li { margin-bottom: 14px; } #trilha-app[hidden], #trilha-estatica[hidden] { display: none; } .trilha-passo { margin: 0 0 4px; font-weight: 700; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .05em; font-size: 14px; } .pagina h2.trilha-pergunta { margin: 0 0 14px; font-size: 20px; line-height: 1.25; } .trilha-pergunta:focus { outline: none; } .trilha-opcoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; } .trilha-op { min-width: 110px; text-align: center; font-size: 18px; padding: 10px 24px; cursor: pointer; } .trilha-op.nao-sei { background: #fff; border-color: var(--borda-controle); color: var(--tinta); } .trilha-op.nao-sei:hover, .trilha-op.nao-sei:focus-visible { background: var(--acento-claro); border-color: var(--borda-controle); } .trilha-ajuda, .trilha-nota { margin: 0 0 14px; padding: 10px 14px; border-left: 4px solid var(--botao); background: var(--acento-claro); border-radius: 0 8px 8px 0; } .trilha-ajuda p, .trilha-nota { margin-top: 0; } .trilha-ajuda p:last-child { margin-bottom: 0; } .trilha-links { margin: 0 0 14px; } .trilha-status { min-height: 1.4em; margin: 0; font-weight: 700; } .trilha-hist { margin-top: 20px; } .hist-bt { border: 0; background: none; padding: 0; font: inherit; text-align: left; color: var(--acento); text-decoration: underline; cursor: pointer; } /* ---------- assistente "Onde estou no CPSI?" ---------- */ #assistente-app[hidden], #assistente-estatica[hidden], .assistente-pergunta[hidden] { display: none; } .assistente-situacoes { list-style: none; margin: 0 0 16px; padding: 0; } .assistente-situacoes li { padding: 8px 0; border-bottom: 1px solid var(--linha-fina); } .assistente-situacoes li:last-child { border-bottom: 0; } .assistente-situacoes a { font-weight: 600; } .assistente-destino { display: block; color: var(--tinta-3); font-size: 14px; } .assistente-sem-js { scroll-margin-top: 80px; } .assistente-pergunta { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; } .assistente-pergunta legend { margin: 0 0 4px; padding: 0; font-size: 18px; font-weight: 600; line-height: 1.3; } .assistente-dica { margin: 0 0 10px; color: var(--tinta-3); font-size: 14px; } .assistente-detalhe { padding: 14px 16px; border-left: 4px solid var(--azul); border-radius: 0 var(--raio-p) var(--raio-p) 0; background: var(--azul-claro); } .assistente-detalhe legend { float: left; width: 100%; margin-bottom: 10px; } .assistente-detalhe .assistente-opcoes { clear: both; } .assistente-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; } .assistente-opcao { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--borda-controle); border-radius: var(--raio-p); background: var(--card); line-height: 1.3; cursor: pointer; } .assistente-opcao:hover { background: var(--azul-claro); } .assistente-opcao:has(input:checked) { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); background: var(--azul-claro); font-weight: 600; } .assistente-opcao input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--azul); } .assistente-aviso { min-height: 1.4em; margin: 0; font-weight: 700; } .assistente-res .sobretitulo { margin-bottom: 4px; } .pagina .assistente-res h2 { margin: 0 0 8px; } .assistente-res h2:focus { outline: none; } .assistente-acoes { margin: 0 0 16px; padding-left: 22px; } .assistente-acao { margin-bottom: 14px; } .assistente-acao p { margin: 2px 0; } .assistente-acao-nome { font-weight: 600; } .assistente-quem { color: var(--tinta-3); font-size: 14px; } .assistente-docs { font-size: 14px; } .assistente-docs ul { display: inline; margin: 0; padding: 0; list-style: none; } .assistente-docs li { display: inline; } .assistente-docs li + li::before { content: "; "; } .assistente-erro { margin: 0 0 14px; padding: 10px 14px; border-left: 4px solid var(--laranja); border-radius: 0 8px 8px 0; background: var(--laranja-claro); } .pagina .assistente-erro h3 { margin: 0 0 4px; } .assistente-erro p { margin: 0; } .assistente-chamada { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--borda); } /* ---------- mapa do CPSI ---------- */ .mapa-rolagem { overflow-x: auto; margin: 10px 0 6px; } .mapa { display: block; width: 100%; height: auto; } .mapa .fase-rotulo { font-weight: 700; fill: var(--tinta-3); } /* aba com o nome da fase, sentada na borda de cima da faixa */ .mapa .fase-etiqueta { fill: #fff; stroke: var(--azul); stroke-width: 1.5; } .mapa .rot { fill: var(--tinta); } .mapa .saida { font-weight: 700; fill: var(--acento); } .mapa .seta { fill: var(--azul); } .mapa .saida-destino { font-weight: 700; fill: var(--acento); text-decoration: underline; } .mapa .saida-externa:hover .saida-destino, .mapa .saida-externa:focus-visible .saida-destino { fill: var(--tinta); } .mapa .doc-icone { fill: #fff; stroke: var(--tinta); stroke-width: 1.5; stroke-linejoin: round; } .mapa .doc:hover .doc-icone, .mapa .doc:focus-visible .doc-icone { fill: var(--acento-claro); stroke: var(--acento); stroke-width: 2.5; } .mapa .doc-mais text { font-weight: 700; fill: var(--tinta-3); } .mapa .doc-mais:hover text, .mapa .doc-mais:focus-visible text { fill: var(--acento); text-decoration: underline; } .mapa .opcional-caixa { fill: none; stroke: var(--tinta-3); stroke-width: 1.5; stroke-dasharray: 5 4; } .mapa .opcional-txt { font-weight: 700; fill: var(--tinta-3); } .est { cursor: pointer; outline: none; } .est .alvo { fill: transparent; stroke: none; } .mapa .alvo-toque { fill: transparent; stroke: none; pointer-events: all; } .est .marca { stroke-width: 3; } .est-s .marca { fill: var(--tinta); stroke: #fff; } .est-o .marca, .est-d .marca { fill: #fff; stroke: var(--tinta); } .est-g .marca { fill: var(--azul-escuro); stroke: var(--tinta); stroke-width: 2.5; } .est .g-num { fill: #fff; font-weight: 700; text-anchor: middle; pointer-events: none; } .est:hover .alvo { fill: var(--acento-claro); } .est:hover .rot, .est:focus-visible .rot { text-decoration: underline; } .est:focus-visible .alvo { fill: var(--acento-claro); stroke: var(--acento); stroke-width: 3; } .legenda-mapa { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 6px 0 0; padding: 0; font-size: 14.5px; color: var(--tinta-3); } /* ---------- zoom do mapa (só com JavaScript; os botões ficam na barra das visões) ---------- */ .mapa-janela { position: relative; overflow: hidden; aspect-ratio: var(--proporcao); touch-action: pan-y; cursor: grab; border-radius: 12px; background: #fff; border: 1.5px solid var(--linha-fina); } .mapa-janela.arrastando { cursor: grabbing; } /* Com zoom o arrasto vale nos dois eixos; no ajuste inicial a página continua rolando na vertical. */ .mapa-janela.ampliado { touch-action: none; } .mapa-janela .mapa { width: 100%; height: 100%; min-width: 0; } .mapa-dica { margin: 4px 0 8px; font-size: 14.5px; color: var(--tinta-3); } /* ---------- aviso de cópia ---------- */ .toast { position: fixed; z-index: 40; left: 50%; bottom: 24px; transform: translate(-50%, 20px); max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 12px; background: var(--tinta); color: #fff; font-weight: 700; box-shadow: var(--sombra); opacity: 0; pointer-events: none; transition: opacity .2s var(--suave), transform .2s var(--suave); } .toast.visivel { opacity: 1; transform: translate(-50%, 0); } /* ---------- cadastro para baixar o .docx ---------- */ .cadastro { width: min(480px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; padding: 0; border: 0; border-radius: var(--raio); background: var(--card); color: var(--tinta); box-shadow: 0 16px 48px rgba(0, 0, 0, .3); } .cadastro::backdrop { background: rgba(17, 17, 17, .55); } .cad-form { padding: 22px 22px 20px; } .cad-form h2 { margin: 0 0 6px; font-size: 20px; line-height: 1.15; } .cad-intro { margin: 0 0 14px; color: var(--tinta-3); } .cad-campo { margin: 0 0 12px; } .cad-campo label { display: block; margin: 0 0 4px; font-weight: 700; } .cad-campo input, .cad-campo select { display: block; width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--tinta-3); border-radius: 10px; background: #fff; color: var(--tinta); font: inherit; } .cad-consentimento { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; } .cad-consentimento input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--linha-escura); } .cad-erro { margin: 0 0 12px; padding: 10px 12px; border: 2px solid var(--alerta); border-left-width: 8px; border-radius: 10px; background: var(--alerta-fundo); color: var(--alerta); font-weight: 700; } /* Vazio, fica no HTML só escondido da vista: o leitor de tela anuncia o texto que entrar depois (role="alert"). */ .cad-erro:empty { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cad-acoes { display: flex; flex-wrap: wrap; gap: 10px; } .cad-acoes .bt { min-height: 44px; } .bt-sec, .pagina a.bt-sec { background: #fff; border-color: var(--borda-controle); color: var(--tinta); } .bt-sec:hover:not(:disabled), .bt-sec:focus-visible { background: var(--acento-claro); border-color: var(--borda-controle); } .cad-consentimento a, .cad-nota a { color: var(--acento); } .cad-nota { margin: 12px 0 0; color: var(--tinta-3); font-size: 15px; } /* ---------- caixas das estações (rótulo sempre em texto, nunca só cor) ---------- */ .caixa { margin: 0 0 12px; padding: 10px 14px 12px; border-radius: 12px; border: 1.5px solid var(--tinta-3); background: #fff; } .caixa-rotulo { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .caixa-texto { margin: 0; } .selo-marca, .selo-frase { color: var(--selo-tinta); } .caixa-lei { border-left: 6px solid var(--azul-escuro); background: var(--azul-claro); } .caixa-ente { border-left: 6px solid var(--selo); background: var(--selo-fundo); } .caixa-alerta { border-left: 6px solid var(--alerta); background: var(--alerta-fundo); } .caixa-pratica { border-left: 6px solid var(--verde); background: var(--verde-claro); } .caixa-exemplo { font-style: italic; margin-left: 6px; font-weight: 400; text-transform: none; letter-spacing: 0; } /* ---------- minuta ---------- */ .minuta { margin: 14px 0; padding: 18px 22px; border: 1.5px solid var(--linha-fina); border-radius: 12px; background: #fff; } .minuta h3 { text-align: center; margin: 4px 0 14px; } .m-clausula { margin: 0 0 10px; text-align: justify; } .m-base { margin: -4px 0 12px; font-size: 14px; color: var(--tinta-3); } .m-campo { background: var(--acento-claro); color: var(--tinta); border-bottom: 2px solid var(--botao); padding: 0 3px; border-radius: 3px; } .m-nota { margin: 0 0 12px; padding: 6px 12px; background: var(--fundo); border-left: 4px solid var(--tinta-3); border-radius: 0 8px 8px 0; font-size: 15px; } .m-nota summary { cursor: pointer; font-weight: 700; } .m-opcao { margin: 0 0 14px; padding: 8px 14px; border: 1.5px dashed var(--botao); border-radius: 10px; } .m-opcao-rotulo { margin: 0 0 6px; font-weight: 700; } .m-alt { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--acento-suave); } .m-alt > p { margin: 0 0 4px; } /* ---------- celular ---------- */ /* ---------- computador: o botão do topo recolhe a lateral (js/menu.js, chave fluxocpsi_menu) ---------- */ @media (min-width: 901px) { html.menu-pronto.menu-recolhido { --lateral: 0px; } html.menu-pronto.menu-recolhido .menu-lateral { transform: translateX(-100%); visibility: hidden; } /* só desliza depois do primeiro clique (lateral-usada): ao carregar a página, nada se move */ html.menu-pronto.lateral-usada .menu-lateral { transition: transform .2s var(--suave), visibility 0s linear .2s; } html.menu-pronto.lateral-usada:not(.menu-recolhido) .menu-lateral { transition: transform .2s var(--suave); } html.menu-pronto.lateral-usada .topo-site, html.menu-pronto.lateral-usada .area { transition: margin-left .2s var(--suave); } } /* ---------- celular ---------- */ @media (max-width: 900px) { :root { --lateral: 0px; } /* o conteúdo vem antes do menu: sem JavaScript (menu no fluxo, aberto), a página não começa por quatro telas de menu; com o menu pronto ele é gaveta fixa e a ordem não pesa */ .app { display: grid; grid-template-columns: 100%; grid-template-areas: "topo" "area" "menu"; } .area { grid-area: area; padding: 16px 16px 28px; } .topo-site { grid-area: topo; position: static; flex-wrap: wrap; gap: 8px; height: auto; padding: 10px 16px; background: var(--card); } .marca-topo { display: flex; margin-right: auto; } /* primeira linha: menu, marca e "É caso de CPSI?"; segunda: a busca, o contraste e "Onde estou?" */ .topo-acoes { display: contents; } .busca-topo { order: 5; flex: 1 1 40%; max-width: none; } #busca-geral { padding-right: 12px; font-size: 16px; } .busca-atalho { display: none; } .bt-contraste { order: 6; } .topo-onde { order: 7; } .topo-acoes .bt, .topo-trilha { padding: 0 12px; } .topo-acoes .topo-item { display: none; } /* sem JavaScript (ou sem js/menu.js) o menu fica no fluxo da página, aberto; com o menu pronto vira gaveta */ .menu-lateral { grid-area: menu; position: static; transform: none; width: auto; margin: 0 16px 28px; border: 1px solid var(--borda); border-radius: var(--raio); } .lateral-rolagem { overflow: visible; } /* gaveta de altura total, colada à esquerda, com sombra por cima da página */ html.menu-pronto .menu-lateral { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(300px, 86vw); margin: 0; border: 0; border-radius: 0; box-shadow: 8px 0 32px rgba(0, 0, 0, .22); transform: translateX(-105%); visibility: hidden; } html.menu-pronto .lateral-rolagem { overflow-y: auto; } html.menu-pronto.gaveta-aberta .menu-lateral { transform: none; visibility: visible; } /* a gaveta só desliza depois da primeira abertura (gaveta-usada): ao carregar a página, nada se move */ html.menu-pronto.gaveta-usada .menu-lateral { transition: transform .25s var(--suave), visibility 0s linear .25s; } html.menu-pronto.gaveta-usada.gaveta-aberta .menu-lateral { transition: transform .25s var(--suave); } html.gaveta-aberta body { overflow: hidden; } .cartao { margin-bottom: 16px; padding: 16px; } .cabecalho-pagina { margin-bottom: 16px; } .cabecalho-linha { flex-direction: column; align-items: stretch; } .cabecalho-pagina h1 { font-size: 24px; } .ficha { grid-template-columns: 1fr; } .ficha dt { border-bottom: 0; padding-bottom: 0; } .lista-cartoes { grid-template-columns: 1fr; } } @media (prefers-contrast: more) { :root { --fundo: #FFFFFF; --linha-fina: #8A8A8A; --tinta-3: #222222; } .mapa .trilho { stroke-width: 12px; } .cartao { box-shadow: none; border: 2px solid #111; } .menu-lateral { border-right: 2px solid #111; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------- impressão ---------- */ @page { margin: 14mm; } @page a3 { size: A3 landscape; margin: 10mm; } @media print { .imprime-a3 { page: a3; } body { background: #fff; font-size: 12pt; } .pular, .menu-lateral, .gaveta-fundo, .topo-site, .bt-menu, .busca-topo, .acoes, button, a.bt, details.m-nota, .nao-imprime, .toast, .cadastro, .visoes-barra, .abas, .controles-mapa, .mapa-dica, .filtro-casos { display: none !important; } .mapa-janela { overflow: visible; aspect-ratio: auto; height: auto; border: 0; } .mapa-janela .mapa { height: auto; } .app { display: block; } .area { margin-left: 0; padding: 0; } .cartao { margin: 0 0 12px; padding: 0; border: 0; border-radius: 0; box-shadow: none; } .cabecalho-pagina { margin-bottom: 12px; } /* migalha, ações e, na página inicial, destaque, números e atalhos ficam fora do papel */ .migalha, .acoes-pagina, .inicio-topo, .cartao-atalhos { display: none !important; } .mapa-rolagem, .rolagem-x { overflow: visible; } /* a página inicial imprime o mapa, qualquer que seja a aba ativa */ .visoes { margin: 0; } .visoes #visao-mapa[hidden] { display: block !important; } .visoes #visao-colunas, .fases-links { display: none !important; } /* A3 paisagem: 277 mm de altura útil; o mapa fica em 230 mm para caber com o título numa folha só. Vale com e sem JavaScript (a .mapa-janela só existe depois do js/zoom.js). */ .imprime-a3 .visoes .mapa { height: 230mm; } .imprime-a3 .visoes .mapa-rolagem { break-inside: avoid; } .mapa, .tabela-larga { min-width: 0; } .minuta { border: 0; padding: 0; } .m-campo { background: none; border: 0; border-bottom: 1px solid #000; padding: 0 2px; } .m-clausula { text-align: left; } .m-opcao { border: 1px solid #000; break-inside: avoid; } .aviso-uso { background: none; border: 1px solid #000; } a { color: #000; text-decoration: none; } .tabela-larga th, .tabela-larga td { border-bottom: 1px solid #000; } } /* ---------- visão em colunas (fontes/render/colunas.py) ---------- */ .colunas { display: flex; align-items: flex-start; gap: 16px; overflow-x: auto; padding: 6px 12px 28px; } .coluna { flex: none; width: 260px; display: flex; flex-direction: column; gap: 10px; } .coluna-titulo { margin: 0; padding: 10px 12px; background: var(--card); border: 1px solid var(--linha-fina); border-top: 4px solid var(--botao); border-radius: 12px; font-size: 16px; font-weight: 600; line-height: 1.25; } .coluna-num { display: block; color: var(--acento); font-size: 14px; font-weight: 700; } .cartao-etapa { background: var(--card); border: 1px solid var(--linha-fina); border-radius: 12px; padding: 10px 12px 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); } .cartao-tipo { margin: 0 0 4px; color: var(--tinta-3); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } .cartao-nome { margin: 0 0 6px; font-size: 16px; line-height: 1.25; font-weight: 600; } .cartao-nome a { color: var(--tinta); text-decoration: none; } .cartao-nome a:hover { text-decoration: underline; } .cartao-desc { margin: 0 0 8px; color: var(--tinta-3); font-size: 14px; line-height: 1.35; } .cartao-docs { list-style: none; margin: 0 0 8px; padding: 0; } .cartao-docs a { display: flex; align-items: flex-start; gap: 7px; padding: 3px 0; color: var(--acento); font-size: 14px; line-height: 1.25; text-decoration: none; } .cartao-docs a:hover { text-decoration: underline; } .cartao-abrir { display: inline-block; padding: 6px 0; color: var(--acento); font-size: 14px; font-weight: 700; } /* tipo sem depender de cor: opcional tracejado, decisão e portão com borda grossa */ .cartao-o { border-style: dashed; border-color: var(--tinta-3); } .cartao-d { border-width: 2px; border-color: var(--tinta); } .cartao-g { border-width: 2px; border-color: var(--linha-escura); } .cartao-g .cartao-tipo { color: var(--linha-escura); } .cartao-decisao { flex: none; width: 200px; align-self: center; background: var(--acento-claro); border: 2px solid var(--tinta); border-radius: 12px; padding: 12px; } .cartao-saidas { list-style: none; margin: 0; padding: 0; } .cartao-saidas a { display: block; padding: 8px 0; color: var(--acento); font-size: 15px; font-weight: 700; } .so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 899px) { .colunas { flex-direction: column; align-items: stretch; overflow-x: visible; padding: 4px 2px 16px; } .coluna { width: auto; } .cartao-decisao { width: auto; align-self: stretch; } /* alvos de toque de 44 px no celular */ .cartao-docs a, .cartao-abrir { min-height: 44px; align-items: center; } .cartao-abrir { display: inline-flex; } } @media print { .colunas { flex-wrap: wrap; overflow: visible; } .cartao-etapa, .cartao-decisao { break-inside: avoid; } } /* ---------- página inicial: destaque, números, abas Mapa e Colunas (js/visao.js) e atalhos ---------- */ /* Página inicial com 24 px de respiro de cada lado: a 1366 px de janela, o cartão "O fluxo completo" tem 1045 px. O mapa fica dentro dele com mais 24 px de cada lado (veja .visoes .mapa-rolagem). */ html[data-pagina="inicio"] .area { padding-left: 24px; padding-right: 24px; } .inicio-topo { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin: 0 0 20px; } /* destaque: gradiente azul, texto branco (28 px, texto grande: 3:1 basta; o selo tem fundo escuro) */ .destaque { padding: 28px; border-radius: var(--raio); background: var(--gradiente); color: #fff; } .destaque-selo { display: inline-block; margin: 0 0 12px; padding: 4px 10px; border-radius: 999px; background: rgba(25, 58, 153, .55); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .pagina .destaque h2 { margin: 0 0 20px; font-size: 28px; font-weight: 600; line-height: 1.2; color: #fff; } .destaque :focus-visible { outline-color: #fff; } .portas { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; } /* portas em cartões brancos quase opacos: o texto escuro fica acima de 4,5:1 em qualquer ponto do gradiente */ .pagina a.porta { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 14px; background: rgba(255, 255, 255, .94); color: var(--tinta); text-decoration: none; } .pagina a.porta:hover { background: #fff; } .porta b { color: var(--azul-escuro); font-size: 15.5px; font-weight: 600; line-height: 1.3; } .pagina a.porta:hover b { text-decoration: underline; } .porta span { color: var(--tinta-3); font-size: 13.5px; line-height: 1.4; } /* números do fluxo: grade 2x2 ao lado do destaque */ .numeros { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0; padding: 0; } .numeros .numero { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; margin: 0; padding: 20px; } .numero-rotulo { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); } .numero-valor { font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--tinta); } /* "O fluxo completo": abas e mapa vão de borda a borda do cartão */ .visoes { margin: 16px -24px 0; } .visoes-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 0 24px 12px; } .abas[hidden], .controles-mapa[hidden], .bt-mapa[hidden] { display: none; } .abas { position: relative; display: inline-flex; gap: 4px; padding: 4px; border: 1.5px solid var(--tinta-3); border-radius: 14px; background: #fff; } .aba { position: relative; min-width: 104px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: none; font-weight: 700; font-size: 16px; color: var(--tinta); } .aba:hover { background: var(--acento-claro); } /* aba ativa: fundo e sublinhado grosso, para não depender só da cor */ .aba[aria-selected="true"] { background: var(--botao); color: var(--botao-tinta); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; } .controles-mapa { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; } .bt-mapa { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--botao); border-radius: var(--raio-p); background: #fff; font-weight: 700; font-size: 15px; color: var(--tinta); } .bt-mapa[data-acao="zoom-mais"], .bt-mapa[data-acao="zoom-menos"] { font-size: 21px; line-height: 1; } .bt-mapa:hover { background: var(--acento-claro); } /* botão ligado: fundo e sublinhado, além do aria-pressed */ .bt-mapa[aria-pressed="true"] { background: var(--botao); color: var(--botao-tinta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .bt-mostrar-tudo { border-style: dashed; } .visoes .visao-titulo { margin: 0 24px 8px; } /* com as abas, o título de cada painel fica só para o leitor de tela */ .visoes.com-abas .visao-titulo { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .visao-painel + .visao-painel { margin-top: 24px; } /* O mapa não cresce com telas muito largas: no máximo 1100 px, no meio do cartão, com 24 px de respiro de cada lado. A 1366 px: 1045 - 48 = 997 px de janela, 994 px de SVG (borda de 1,5 px); o menor texto do mapa (16 unidades em 1200) fica com 13,3 px. "Ajustar" cabe nessa largura. */ .visoes .mapa-rolagem { width: calc(100% - 48px); max-width: 1100px; margin: 0 auto; } .visoes .legenda-mapa, .visoes .mapa-dica, .nota-ramal { width: calc(100% - 48px); max-width: 1100px; margin-left: auto; margin-right: auto; } .visoes .mapa-dica { margin-top: 6px; } .nota-ramal { margin-top: 8px; margin-bottom: 0; font-size: 15px; } /* position: relative faz a rolagem das colunas conter também os textos só para leitor de tela (absolutos) */ .visoes .colunas { position: relative; padding: 4px 24px 16px; } /* Respiro à direita: o padding de 24 px vale também no fim da rolagem, igual à esquerda. A borda direita esmaece para mostrar que há mais colunas. */ @media (min-width: 900px) { .visoes .colunas { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); } } .visoes:fullscreen { margin: 0; padding: 12px 0; overflow: auto; background: var(--card); } .visoes:fullscreen .mapa-janela { aspect-ratio: auto; height: calc(100vh - 160px); } /* em tela cheia o mapa usa a largura toda da tela */ .visoes:fullscreen .mapa-rolagem, .visoes:fullscreen .legenda-mapa, .visoes:fullscreen .mapa-dica { max-width: none; } .fases-links { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--borda); } .pagina .fases-links h2 { margin: 0 0 10px; font-size: 15px; } .fases-links ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } .fases-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--borda); border-radius: 999px; font-weight: 600; font-size: 14.5px; text-decoration: none; } .fases-links a:hover { background: var(--azul-claro); text-decoration: underline; } /* atalhos: cartões menores dentro do cartão */ .atalhos-inicio { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; } .pagina a.atalho { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 12px; color: var(--tinta); text-decoration: none; } .pagina a.atalho:hover { background: var(--azul-claro); } .atalho b { color: var(--azul); font-weight: 600; } .pagina a.atalho:hover b { color: var(--azul-escuro); text-decoration: underline; } .atalho span { color: var(--tinta-3); font-size: 14px; line-height: 1.4; } @media (max-width: 900px) { html[data-pagina="inicio"] .area { padding-left: 16px; padding-right: 16px; } .inicio-topo { grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; } .destaque { padding: 20px; } .pagina .destaque h2 { font-size: 24px; } .portas, .atalhos-inicio { grid-template-columns: 1fr; } .numeros { gap: 12px; } .numeros .numero { padding: 16px; } /* o mapa abre na altura cheia: com 5 linhas, a janela cresce para o texto não encolher */ .mapa-janela { aspect-ratio: auto; height: min(600px, 70vh); } .visoes { margin: 12px -16px 0; } .visoes-barra { padding: 0 16px 10px; } .controles-mapa { margin-left: 0; } .visoes .visao-titulo { margin: 0 16px 8px; } /* no celular o mapa vai de borda a borda do cartão: a janela é rolada com o dedo */ .visoes .mapa-rolagem { width: auto; max-width: none; margin: 0; } .visoes .mapa-janela { border-width: 1.5px 0; border-radius: 0; } .visoes .legenda-mapa, .visoes .mapa-dica, .nota-ramal { width: auto; max-width: none; margin-left: 16px; margin-right: 16px; } .visoes .colunas { padding: 4px 16px 16px; } } /* números nas etapas, caminho realçado (#etapa=) */ .mapa .num-etapa { display: none; } .mapa.com-numeros .num-etapa { display: inline; } .mapa .num-etapa rect { fill: #fff; stroke: var(--tinta); stroke-width: 1.5; } .mapa .num-etapa text { fill: var(--tinta); font-weight: 700; } .mapa .realce .rot { font-weight: 700; } /* Fora do caminho, o grupo da etapa não perde opacidade: só marcas, ícones e traços esmaecem. O texto fica cinza sólido, #595959: 7,0:1 sobre o branco e 6,0:1 sobre a faixa mais escura (testes/test_css.py calcula); as marcas a 50 % ficam acima de 3:1. Contraste mínimo de 4,5:1 no texto. */ .mapa .esmaecido .marca, .mapa .esmaecido .doc-icone, .mapa .esmaecido .opcional-caixa, .mapa .esmaecido .trilho-saida, .mapa .esmaecido .seta { opacity: .5; } .mapa .esmaecido text { fill: #595959; } /* portão esmaecido: losango cinza sólido, para o "G1" branco seguir com 7:1 */ .mapa .esmaecido .est-g .marca { opacity: 1; fill: #595959; stroke: #595959; } .mapa .esmaecido .g-num { fill: #fff; } /* página da fase: uma coluna só, na largura toda */ html[data-pagina="fase"] .colunas { flex-direction: column; align-items: stretch; overflow-x: visible; } html[data-pagina="fase"] .coluna, html[data-pagina="fase"] .cartao-decisao { width: auto; align-self: stretch; } /* ---------- alto contraste (botão "Alto contraste"; classe no , guardada no navegador) ---------- */ html.alto-contraste { --fundo: #FFFFFF; --card: #FFFFFF; --tinta: #000000; --tinta-2: #000000; --tinta-3: #000000; --tinta-menu: #000000; --linha-fina: #000000; --borda: #000000; --borda-controle: #000000; --acento: #000000; --acento-claro: #FFF2A8; --acento-suave: #000000; --botao: #FFD400; --botao-tinta: #000000; --botao-hover: #FFF2A8; --linha-escura: #000000; --alerta: #000000; --azul: #000000; --azul-escuro: #000000; --azul-claro: #FFF2A8; --verde: #000000; --verde-claro: #FFFFFF; --laranja: #000000; --laranja-claro: #FFFFFF; --vermelho: #000000; --vermelho-claro: #FFFFFF; --selo: #000000; --selo-tinta: #000000; --selo-fundo: #FFFFFF; --alerta-fundo: #FFFFFF; --gradiente: none; --sombra: none; } html.alto-contraste .menu-lateral { border-right: 2px solid #000; } html.alto-contraste .topo-site { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 2px solid #000; } /* destaque sem gradiente: preto no branco, com borda */ html.alto-contraste .destaque { background: #fff; color: #000; border: 2px solid #000; } html.alto-contraste .pagina .destaque h2 { color: #000; } html.alto-contraste .destaque-selo { background: #FFD400; color: #000; } html.alto-contraste .pagina a.porta { background: #fff; border: 2px solid #000; } html.alto-contraste .fase-num { background: #fff; border: 1.5px solid #000; } html.alto-contraste :focus-visible { outline: 3px solid #000; outline-offset: 2px; box-shadow: 0 0 0 7px #FFD400; } html.alto-contraste .bt, html.alto-contraste .bt-mapa, html.alto-contraste .abas, html.alto-contraste .bt-menu, html.alto-contraste .bt-contraste, html.alto-contraste .topo-trilha, html.alto-contraste .topo-item { border-color: #000; } html.alto-contraste .mapa .trilho, html.alto-contraste .mapa .trilho-saida { stroke: #000; } html.alto-contraste .mapa .seta { fill: #000; } html.alto-contraste .mapa .faixa { fill: none; stroke: #000; stroke-width: 1; } html.alto-contraste .mapa .fase-etiqueta { fill: #fff; stroke: #000; } html.alto-contraste .mapa text { fill: #000; } html.alto-contraste .est .g-num { fill: #fff; } html.alto-contraste .est:focus-visible .alvo { fill: #FFD400; stroke: #000; } /* ========== passo a passo da etapa (pagina_estacao, Task 6) ========== */ /* barra das fases: número sempre em texto; a atual tem marcador maior, cheio e com anel, e o nome em negrito sublinhado */ .progresso-fases { list-style: none; display: flex; margin: 0 0 16px; padding: 0; } .progresso-fase { position: relative; flex: 1 1 0; min-width: 0; } .progresso-fase + .progresso-fase::before { content: ""; position: absolute; z-index: 0; top: 21px; left: -50%; right: 50%; height: 2px; background: var(--tinta-3); } .pagina .progresso-fase a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; padding: 4px 2px; border-radius: 10px; color: var(--tinta); text-decoration: none; } .pagina .progresso-fase a:hover .progresso-nome { text-decoration: underline; } .progresso-num { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--tinta-3); border-radius: 50%; background: #fff; font-size: 15px; font-weight: 700; } .progresso-atual .progresso-num { background: var(--botao); border-color: var(--tinta); color: var(--botao-tinta); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--tinta); } .progresso-nome { max-width: 100%; color: var(--tinta-3); font-size: 13px; line-height: 1.2; text-align: center; } .progresso-atual .progresso-nome { color: var(--tinta); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } /* navegação entre etapas, no topo e no fim */ .passo-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0 0 6px; padding: 6px 0; border-top: 1px solid var(--linha-fina); border-bottom: 1px solid var(--linha-fina); } /* no cartão do passo: a barra das fases em cima, a navegação embaixo, separadas por um filete; no cartão do fim, só a navegação */ .cartao-passo .passo-nav { margin: 0; padding: 0; border: 0; } .cartao-passo .progresso-fases + .passo-nav { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--borda); } .passo-nav ul { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; } .passo-nav .passo-seguir { margin-left: auto; align-items: flex-end; text-align: right; } .passo-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; } /* cartão "Resumo" da etapa: três linhas, rótulo à esquerda e texto à direita (uma coluna no celular) */ .resumo-etapa { border-left: 4px solid var(--azul); } .resumo-etapa dl { display: grid; grid-template-columns: minmax(130px, 180px) 1fr; margin: 0; } .resumo-etapa dl > div { display: contents; } .resumo-etapa dt, .resumo-etapa dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--linha-fina); } .resumo-etapa dl > div:last-child dt, .resumo-etapa dl > div:last-child dd { border-bottom: 0; } .resumo-etapa dl > div:first-child dt, .resumo-etapa dl > div:first-child dd { padding-top: 0; } .resumo-etapa dt { padding-right: 16px; font-size: 14px; font-weight: 600; color: var(--tinta); } .resumo-etapa dd { font-size: 15px; } .resumo-etapa dl > div:first-child dd { font-size: 16px; font-weight: 600; color: var(--tinta); } .resumo-docs { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; } @media (max-width: 900px) { .resumo-etapa dl { grid-template-columns: 1fr; } .resumo-etapa dt { padding: 8px 0 0; border-bottom: 0; } .resumo-etapa dl > div:first-child dt { padding-top: 0; } } /* seções recolhíveis (
): o título é o botão; a seta gira quando a seção abre */ .secao-etapa > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 44px; margin: -8px 0; padding: 8px 32px 8px 0; position: relative; cursor: pointer; list-style: none; } .secao-etapa > summary::-webkit-details-marker { display: none; } .secao-etapa > summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--tinta-3); border-bottom: 2px solid var(--tinta-3); transform: rotate(45deg); transition: transform .2s var(--suave); } .secao-etapa[open] > summary::after { margin-top: -3px; transform: rotate(-135deg); } .pagina .secao-etapa > summary h2 { margin: 0; } .secao-etapa > summary:hover h2 { text-decoration: underline; } .secao-etapa[open] > .secao-corpo { margin-top: 16px; } .secao-corpo > :first-child { margin-top: 0; } .secao-corpo > :last-child { margin-bottom: 0; } .secao-selo { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--borda-controle); border-radius: 999px; color: var(--tinta); font-size: 13px; font-weight: 600; } /* cartões dos documentos da etapa */ .doc-cartoes { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; } .doc-cartao { display: flex; flex-direction: column; padding: 12px 14px 14px; border: 1.5px solid var(--linha-fina); border-radius: 12px; } .pagina .doc-cartao h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1.25; } /* finalidade em uma linha só na tela; o texto segue inteiro no HTML (e na impressão) */ .doc-cartao-finalidade { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; margin: 0 0 12px; color: var(--tinta-3); font-size: 15px; line-height: 1.35; } .doc-cartao-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; } .doc-cartao-acoes .bt { display: inline-flex; align-items: center; min-height: 44px; } @media (max-width: 1099px) { .progresso-fase:not(.progresso-atual) .progresso-nome { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (max-width: 1099px) and (min-width: 600px) { .progresso-atual .progresso-nome { white-space: nowrap; } } @media (max-width: 599px) { .progresso-atual .progresso-nome { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .passo-nav { flex-direction: column; } .passo-nav .passo-seguir { margin-left: 0; align-items: flex-start; text-align: left; } } @media print { .passo-nav { display: none !important; } /* as seções da etapa saem abertas no papel; onde o CSS não basta, o js/etapa.js abre no beforeprint */ details.secao-etapa > .secao-corpo { display: block !important; } .secao-etapa > summary::after { display: none; } } @media print { /* regra própria: um navegador sem ::details-content descarta só ela */ details.secao-etapa::details-content { content-visibility: visible; display: block; } .doc-cartao-finalidade { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; } } /* ========== fim do passo a passo da etapa ========== */ /* documento: "Como usar este modelo" (4 passos numerados) e chamada para a assessoria */ .pagina .como-usar > h2 { margin-top: 0; } .como-usar ol { counter-reset: passo; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0 0; padding: 0; } .como-usar li { counter-increment: passo; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--azul-claro); border-radius: 12px; font-size: 15px; line-height: 1.4; } .como-usar li::before { content: counter(passo); display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 2px; border-radius: 50%; background: var(--azul-escuro); color: #fff; font-size: 14px; font-weight: 700; } .como-usar li b { font-size: 15px; font-weight: 700; color: var(--tinta); } .chamada-assessoria { margin: 16px 0 0; color: var(--tinta-3); font-size: 14px; } @media print { .chamada-assessoria { display: none; } } /* Dica do mapa: nome do documento ao passar o mouse ou focar o ícone (js/dica.js). */ .dica-mapa { position: fixed; z-index: 70; max-width: 260px; padding: 6px 10px; border-radius: 8px; background: var(--tinta); color: #fff; font-size: 14px; line-height: 1.3; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); } .dica-mapa[hidden] { display: none; } .alto-contraste .dica-mapa { background: #000; color: #fff; outline: 2px solid #fff; } @media print { .dica-mapa { display: none; } } /* Telas estreitas (até 359 px): o topo fica em duas linhas. O nome "Fluxo CPSI" sai da vista (o § continua e o nome segue para leitores de tela), para o menu, o § e "É caso de CPSI?" caberem juntos. */ @media (max-width: 359px) { .marca-nome { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } a.marca, .marca-topo { gap: 0; } } /* Rolagem das colunas no topo (js/rolagem.js): barra fina e suave acima das colunas, que acompanha a página ao rolar (fica logo abaixo da barra superior). A de baixo some quando a de cima entra. */ .rolagem-topo { position: sticky; top: 64px; z-index: 5; height: 14px; margin: 0 24px 6px; overflow-x: auto; overflow-y: hidden; background: var(--card); scrollbar-width: thin; scrollbar-color: #BDBDBD transparent; } .rolagem-topo[hidden] { display: none; } .rolagem-topo-trilho { height: 1px; } .rolagem-topo:hover { scrollbar-color: var(--tinta-3) transparent; } .rolagem-topo::-webkit-scrollbar { height: 8px; } .rolagem-topo::-webkit-scrollbar-track { background: transparent; } .rolagem-topo::-webkit-scrollbar-thumb { background: #BDBDBD; border-radius: 999px; } .rolagem-topo:hover::-webkit-scrollbar-thumb { background: var(--tinta-3); } .colunas.com-rolagem-topo { scrollbar-width: none; } .colunas.com-rolagem-topo::-webkit-scrollbar { display: none; } .alto-contraste .rolagem-topo { scrollbar-color: #000 #fff; } .alto-contraste .rolagem-topo::-webkit-scrollbar-thumb { background: #000; } @media (max-width: 899px) { .rolagem-topo { display: none; } } @media print { .rolagem-topo { display: none; } } /* ---------- página "Serviços" (fontes/render/servicos.py) ---------- */ .pagina h2 .etiqueta { margin-left: 8px; vertical-align: middle; } .etiqueta { display: inline-block; padding: 2px 10px; border: 1px solid var(--laranja); border-radius: 999px; background: var(--laranja-claro); color: var(--laranja); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } /* "Disponível agora": verde, com o texto escrito (nunca só a cor) */ .etiqueta.etiqueta-disponivel { border-color: var(--verde); background: var(--verde-claro); color: var(--verde); } #assessoria, #area-de-trabalho, #comparativo, #formacao, #como-contratar, #gratuito { scroll-margin-top: 80px; } .servicos-intro { margin: 0 0 20px; padding: 22px 24px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--azul-claro); } .servicos-intro h2 { margin: 0 0 8px; font-size: 20px; } .servicos-intro p { margin: 0; } /* quatro formatos: 4 colunas a partir de 1200 px, 2 a partir de 700, 1 abaixo; mesma altura na linha */ .formatos { list-style: none; display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 0 28px; padding: 0; } @media (min-width: 700px) { .formatos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .formatos { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .formatos .formato { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding: 20px 18px; } .formato .etiqueta { margin-bottom: 4px; } /* assessoria (disponível agora): primeira da lista, fundo azul claro e borda azul; o selo e a posição dizem o mesmo */ .formatos .formato-principal { border: 2px solid var(--azul); background: var(--azul-claro); } .formato h3 { margin: 0; font-size: 19px; } .formato p { margin: 0; } .formato-para { color: var(--tinta-3); font-size: 14.5px; } .formato-rotulo { margin-top: 6px !important; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--azul-escuro); } .formato-inclui { margin: 0; padding-left: 18px; font-size: 14.5px; } .formato-inclui li { margin-bottom: 4px; } /* validade, valor e botão descem juntos: ficam alinhados entre os cartões da linha */ .formato-validade { margin-top: auto !important; padding-top: 10px; border-top: 1px solid var(--borda); align-self: stretch; font-size: 14.5px; } /* sem preço no site (decisão do autor de 20/10/2026): "Valores sob consulta" no lugar */ .formato-valor { margin-top: 4px !important; font-size: 16px; font-weight: 600; color: var(--tinta); } .formato .bt { margin-top: 6px; padding: 9px 12px; font-size: 14.5px; } .formato .bt, .formato .lista-sem-js { align-self: stretch; text-align: center; } .bt[data-acao="lista-espera"][hidden], .lista-sem-js[hidden] { display: none; } .formato-nota, .lista-sem-js { margin: 10px 0 0 !important; color: var(--tinta-3); font-size: 14.5px; } /* comparativo: cabeçalho preso sob o topo no computador; abaixo de 900 px a tabela rola na própria caixa */ .comparativo-secao { margin: 0 0 24px; } .comparativo-secao h2 { margin: 0 0 12px; font-size: 20px; } .tabela-comparativo { border: 1px solid var(--borda); border-radius: 12px; background: var(--card); } .comparativo { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; } .comparativo caption { padding: 12px 16px 4px; text-align: left; font-weight: 600; color: var(--tinta-3); font-size: 13px; } .comparativo th, .comparativo td { padding: 10px 14px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; } .comparativo thead th { background: var(--card); color: var(--azul-escuro); font-weight: 600; border-bottom: 2px solid var(--azul); } .comparativo tbody th { width: 22%; font-weight: 600; color: var(--tinta); } .comparativo tbody tr:last-child th, .comparativo tbody tr:last-child td { border-bottom: 0; } .comparativo tbody tr:nth-child(even) th, .comparativo tbody tr:nth-child(even) td { background: var(--fundo); } .comparativo .col-principal, .comparativo tbody tr:nth-child(even) .col-principal, .comparativo thead th.col-principal { background: var(--azul-claro); } .comparativo td.sim { color: var(--tinta); font-weight: 500; } .comparativo td.nao { color: var(--tinta-3); } .comparativo .sinal { display: inline-block; width: 1.1em; color: var(--azul); font-weight: 700; } @media (min-width: 900px) { .comparativo thead th { position: sticky; top: 64px; z-index: 2; } } @media (max-width: 899px) { .tabela-comparativo { overflow-x: auto; overscroll-behavior-x: contain; } .comparativo { min-width: 760px; } /* a coluna dos itens fica parada enquanto as colunas dos formatos rolam */ .comparativo th:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); box-shadow: inset -1px 0 0 var(--borda); } } .tabela-comparativo:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; } /* página antiga para-orgaos/: só o link para Serviços e o aviso de uso */ .redirecionamento { padding: 32px 16px; } /* ---------- relevo suave nos cartões menores (classe com-relevo) ---------- Portas e números da página inicial, cartões de documento, planos, cartões das colunas e passos do "Como usar". Ao passar o mouse (ou focar por dentro), o cartão sobe 3 px e ganha uma sombra em camadas, com um tom da marca: dá profundidade sem chamar atenção. Fora daqui: mapa, blocos .cartao, resumo, destaque. */ .com-relevo { transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s cubic-bezier(.16, 1, .3, 1); box-shadow: 0 1px 2px rgba(10, 13, 20, .04); } .com-relevo:focus-within { transform: translateY(-3px); box-shadow: 0 10px 24px -8px rgba(25, 58, 153, .22), 0 4px 8px -4px rgba(10, 13, 20, .08); } @media (hover: hover) and (pointer: fine) { .com-relevo:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -8px rgba(25, 58, 153, .22), 0 4px 8px -4px rgba(10, 13, 20, .08); } } /* "Reduzir movimento": o cartão não sobe; a sombra, fixa e um pouco mais forte, só marca o cartão ativo */ @media (prefers-reduced-motion: reduce) { .com-relevo, .com-relevo:hover, .com-relevo:focus-within { transform: none !important; transition: none !important; } .com-relevo:hover, .com-relevo:focus-within { box-shadow: 0 6px 16px -8px rgba(25, 58, 153, .28), 0 2px 6px -3px rgba(10, 13, 20, .1); } } /* Alto contraste: sem sombra; o cartão ativo ganha contorno de 2 px */ html.alto-contraste .com-relevo, html.alto-contraste .com-relevo:hover, html.alto-contraste .com-relevo:focus-within { box-shadow: none; transform: none; transition: none; } html.alto-contraste .com-relevo:hover, html.alto-contraste .com-relevo:focus-within { outline: 2px solid #000; outline-offset: 2px; } @media (prefers-contrast: more) { .com-relevo, .com-relevo:hover, .com-relevo:focus-within { box-shadow: none; transform: none; transition: none; } .com-relevo:hover, .com-relevo:focus-within { outline: 2px solid currentColor; outline-offset: 2px; } } @media print { .com-relevo, .com-relevo:hover, .com-relevo:focus-within { box-shadow: none !important; transform: none !important; transition: none !important; outline: none !important; } } /* ---------- cartões que aparecem na rolagem (js/revelar.js) ---------- Só esconde com html.revelar-pronto, posto pelo script depois de medir a tela: o que já está à vista ao carregar não ganha a classe "revelar" e não pisca. Sem JavaScript, tudo aparece. */ @media (prefers-reduced-motion: no-preference) { html.revelar-pronto .revelar { opacity: 0; transform: translateY(12px); } html.revelar-pronto .revelar.revelado { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1); } /* linhas e legenda da tabela (data-revelar-grupo): só a opacidade; transform em falha em alguns navegadores */ html.revelar-pronto tr.revelar, html.revelar-pronto caption.revelar { transform: none; } html.revelar-pronto tr.revelar.revelado, html.revelar-pronto caption.revelar.revelado { transition: opacity .35s ease; } } @media (prefers-reduced-motion: reduce) { html.revelar-pronto .revelar { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } } @media print { html.revelar-pronto .revelar { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- movimento nas abas e no menu ---------- */ /* Fundo azul que desliza para baixo da aba ativa (js/visao.js põe o , aria-hidden). A aba ativa segue com texto branco e sublinhado grosso: o indicador só leva o fundo, nada fica só na cor. */ .aba-indicador { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 10px; background: var(--botao); pointer-events: none; transition: transform .3s cubic-bezier(.16, 1, .3, 1), width .3s cubic-bezier(.16, 1, .3, 1); } .abas.com-indicador .aba[aria-selected="true"] { background: transparent; } /* hover e estado ativo de itens do menu, abas e botões: troca suave de fundo, cor e sombra */ .fase-toggle, .etapa-menu > a, .atalhos-menu a, .docs-etapa a, .cartao-lateral, .aba, .bt, .bt-mapa, .bt-icone, .topo-trilha, .fases-links a, .pagina a.atalho, .pagina a.porta { transition: background-color .15s var(--suave), color .15s var(--suave), box-shadow .15s var(--suave); } @media print { .aba-indicador { display: none !important; } } @media (prefers-reduced-motion: reduce) { .aba-indicador, html.menu-pronto .etapas-menu, html.menu-pronto .fase-toggle::after { transition: none !important; animation: none !important; } } /* ---------- botões de ícone do cabeçalho (acao_icone em fontes/render/base.py) ---------- Ícone de 40 px, redondo, com o rótulo escrito ao lado. O rótulo fica no HTML (é o nome acessível; nunca display: none) e abre para a esquerda no hover e no foco pelo teclado: a fileira fica alinhada à direita e o botão põe o ícone à direita do rótulo (row-reverse). No toque e abaixo de 900 px, ícone e rótulo ficam sempre à vista. Azul (acao-primaria) para a ação principal; branco com borda de controle no resto. */ /* reserva a largura do botão aberto: o título ao lado não muda de linha quando o rótulo abre */ .acoes-pagina:has(> .acao-icone) { min-width: 150px; } .acoes-pagina:has(> .acao-icone:nth-child(3)) { min-width: 250px; } .acao-icone { display: inline-flex; flex-direction: row-reverse; align-items: center; justify-content: center; height: 40px; min-width: 40px; padding: 0 9px; border: 1px solid var(--borda-controle); border-radius: 999px; background: var(--card); color: var(--tinta); font: inherit; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s var(--suave), color .15s var(--suave), border-color .15s var(--suave); } .pagina a.acao-icone { text-decoration: none; } .acao-sec, .pagina a.acao-sec { background: var(--card); border-color: var(--borda-controle); color: var(--tinta); } .acao-primaria, .pagina a.acao-primaria { background: var(--botao); border-color: var(--botao); color: var(--botao-tinta); } .acao-svg { flex: none; width: 20px; height: 20px; } .acao-rotulo { display: inline-block; max-width: 0; padding: 0; opacity: 0; overflow: hidden; transition: max-width .3s cubic-bezier(.16, 1, .3, 1), opacity .2s, padding .3s; } /* foco pelo teclado abre o rótulo em qualquer tela */ .acao-icone:focus-visible .acao-rotulo { max-width: 14em; padding: 0 8px 0 6px; opacity: 1; } .acao-sec:focus-visible, .pagina a.acao-sec:focus-visible { background: var(--acento-claro); color: var(--azul-escuro); } .acao-primaria:focus-visible, .pagina a.acao-primaria:focus-visible { background: var(--botao-hover); border-color: var(--botao-hover); } @media (hover: hover) and (pointer: fine) { .acao-icone:hover .acao-rotulo { max-width: 14em; padding: 0 8px 0 6px; opacity: 1; } .acao-sec:hover, .pagina a.acao-sec:hover { background: var(--acento-claro); color: var(--azul-escuro); } .acao-primaria:hover, .pagina a.acao-primaria:hover { background: var(--botao-hover); border-color: var(--botao-hover); } } /* nota curta logo abaixo dos botões (página do documento) */ .acoes-nota { margin: 8px 0 0; font-size: 13px; color: var(--tinta-3); text-align: right; } /* toque e tela estreita: sem hover, o rótulo fica sempre à vista e a fileira se alinha à esquerda */ @media (hover: none) { .acao-rotulo { max-width: none; padding: 0 8px 0 6px; opacity: 1; } } @media (max-width: 900px) { .acoes-pagina, .acoes-pagina:has(> .acao-icone), .acoes-pagina:has(> .acao-icone:nth-child(3)) { min-width: 0; flex-wrap: wrap; justify-content: flex-start; } .acao-rotulo { max-width: none; padding: 0 8px 0 6px; opacity: 1; } .acoes-nota { text-align: left; } } html.alto-contraste .acao-icone { border-color: #000; } @media (prefers-reduced-motion: reduce) { .acao-icone, .acao-rotulo { transition: none !important; } } @media print { .acao-icone { display: none !important; } } /* ---------- janela "Área de trabalho, em breve" (fontes/render/area_trabalho.py, js/area.js) ---------- Duas colunas no computador (ilustração com 45% à esquerda, texto à direita); uma abaixo de 700 px. Abre e fecha subindo 8 px com fade (.2s); com "reduzir movimento", sem animação. */ .modal-area { position: fixed; width: min(940px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: hidden; padding: 0; border: 0; border-radius: var(--raio); background: var(--card); color: var(--tinta); box-shadow: 0 24px 64px -12px rgba(10, 13, 20, .35), 0 8px 20px -8px rgba(25, 58, 153, .2); } .modal-area::backdrop { background: rgba(10, 13, 20, .55); } /* a rolagem fica na grade: o botão Fechar, preso à janela, continua à vista */ .modal-area-grade { display: grid; grid-template-columns: 45% 1fr; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; } .modal-area-figura { display: flex; align-items: center; justify-content: center; margin: 0; padding: 32px 28px; background: var(--azul-claro); } .modal-area-svg { display: block; width: 100%; height: auto; max-width: 440px; filter: drop-shadow(0 12px 24px rgba(25, 58, 153, .16)); } .modal-area-corpo { display: flex; flex-direction: column; align-items: flex-start; padding: 36px 36px 32px; } .modal-area-corpo h2 { margin: 12px 0 8px; font-size: 26px; font-weight: 600; line-height: 1.2; } .modal-area-texto { margin: 0 0 20px; color: var(--tinta-3); font-size: 16px; } .modal-area-corpo h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--azul-escuro); } .modal-area-lista { list-style: none; margin: 0 0 22px; padding: 0; } .modal-area-lista li { position: relative; margin: 0 0 8px; padding-left: 28px; font-size: 15.5px; } .modal-area-lista li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--azul-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23193A99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 9.2 2.3 2.3 4.7-5'/%3E%3C/svg%3E") no-repeat center / 18px; } .modal-area-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; } .modal-area-acoes .bt { min-height: 44px; display: inline-flex; align-items: center; } .modal-area-acoes .bt[hidden] { display: none; } .modal-area-fechar { position: absolute; top: 12px; right: 12px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--borda); border-radius: 50%; background: var(--card); color: var(--tinta); font-size: 24px; line-height: 1; cursor: pointer; } .modal-area-fechar:hover { background: var(--azul-claro); } @media (max-width: 699px) { .modal-area { width: calc(100% - 24px); max-height: calc(100% - 24px); } .modal-area-grade { grid-template-columns: 1fr; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); } .modal-area-figura { padding: 20px 20px 16px; } .modal-area-svg { max-height: 190px; width: auto; max-width: 100%; } .modal-area-lista li { font-size: 15px; } .modal-area-corpo { padding: 20px 20px 22px; } .modal-area-corpo h2 { font-size: 22px; } } @media (prefers-reduced-motion: no-preference) { .modal-area[open] { animation: modal-area-entra .2s cubic-bezier(.16, 1, .3, 1); } .modal-area[open]::backdrop { animation: modal-area-fundo .2s ease-out; } .modal-area.fechando { animation: modal-area-sai .2s ease-in forwards; } .modal-area.fechando::backdrop { animation: modal-area-fundo-sai .2s ease-in forwards; } } @keyframes modal-area-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes modal-area-sai { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } } @keyframes modal-area-fundo { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-area-fundo-sai { from { opacity: 1; } to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .modal-area, .modal-area::backdrop, .modal-area.fechando, .modal-area.fechando::backdrop { animation: none !important; transition: none !important; } } html.alto-contraste .modal-area { border: 2px solid #000; box-shadow: none; } html.alto-contraste .modal-area-svg { filter: none; } /* ---------- janela "Pedir proposta" (fontes/render/proposta.py, js/proposta.js) ---------- Cartão branco de 18 px, azul nas ações. As opções são rádios com cara de pílula: a escolhida fica azul, com texto branco e o sinal de marcado (não só a cor). Abre e fecha subindo 8 px com fade (.2s); com "reduzir movimento", sem animação. */ .modal-proposta { position: fixed; width: min(600px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: hidden; padding: 0; border: 0; border-radius: var(--raio); background: var(--card); color: var(--tinta); box-shadow: 0 24px 64px -12px rgba(10, 13, 20, .35), 0 8px 20px -8px rgba(25, 58, 153, .2); } .modal-proposta::backdrop { background: rgba(10, 13, 20, .55); } /* a rolagem fica no formulário e na confirmação: o botão Fechar, preso à janela, continua à vista */ .proposta-form, .proposta-pronto { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; padding: 32px 32px 26px; } .proposta-form[hidden], .proposta-pronto[hidden] { display: none; } .proposta-fechar { position: absolute; top: 12px; right: 12px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--borda); border-radius: 50%; background: var(--card); color: var(--tinta); font-size: 24px; line-height: 1; cursor: pointer; } .proposta-fechar:hover { background: var(--azul-claro); } .proposta-isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .proposta-sobre { margin: 0 48px 8px 0; color: var(--azul-escuro); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .modal-proposta h2 { margin: 0 48px 8px 0; font-size: 24px; font-weight: 600; line-height: 1.2; } .proposta-texto { margin: 0 0 20px; color: var(--tinta-3); font-size: 15.5px; } .proposta-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .proposta-campo { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; } .proposta-campo > label, .proposta-campo > legend { display: block; margin: 0 0 6px; padding: 0; font-size: 14.5px; font-weight: 600; } .proposta-campo small { color: var(--tinta-3); font-size: 13px; font-weight: 400; } .proposta-campo input[type="text"], .proposta-campo textarea { display: block; width: 100%; min-height: 44px; padding: 9px 12px; border: 1.5px solid var(--borda-controle); border-radius: var(--raio-p); background: #fff; color: var(--tinta); font: inherit; font-size: 16px; } .proposta-campo textarea { min-height: 92px; resize: vertical; } .proposta-campo input[type="text"]:focus-visible, .proposta-campo textarea:focus-visible { border-color: var(--azul); } .proposta-chips { display: flex; flex-wrap: wrap; gap: 8px; } .proposta-chips input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .proposta-chips label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--borda-controle); border-radius: 999px; background: var(--card); color: var(--tinta); font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color .15s var(--suave), color .15s var(--suave), border-color .15s var(--suave); } .proposta-chips label:hover { background: var(--azul-claro); } /* escolhida: fundo azul, texto branco e o sinal de marcado à esquerda */ .proposta-chips input:checked + label { border-color: var(--botao); background: var(--botao); color: var(--botao-tinta); } .proposta-chips input:checked + label::before { content: ""; flex: none; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 7.3 3 3 6-6.3'/%3E%3C/svg%3E") no-repeat center / contain; } .proposta-chips input:focus-visible + label { outline: 3px solid var(--acento); outline-offset: 2px; } .proposta-consentimento { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; } .proposta-consentimento input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--linha-escura); } .proposta-consentimento a { color: var(--acento); } /* aviso de erro: borda e texto vermelhos, com o texto do erro (não só a cor) */ .proposta-erro { margin: 6px 0 0; color: var(--alerta); font-size: 14px; font-weight: 600; } .proposta-erro[hidden] { display: none; } .proposta-campo.invalido input[type="text"], .proposta-campo.invalido textarea { border-color: var(--alerta); } .proposta-campo.invalido .proposta-chips label { border-color: var(--alerta); } .proposta-enviar { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 4px; text-align: center; font-size: 16px; } .proposta-nota { margin: 12px 0 0; color: var(--tinta-3); font-size: 13.5px; text-align: center; } .proposta-pronto { padding-top: 40px; } .proposta-pronto-texto { margin: 0 48px 20px 0; font-size: 18px; font-weight: 600; line-height: 1.4; } .proposta-acoes { display: flex; flex-wrap: wrap; gap: 10px; } .proposta-acoes .bt { display: inline-flex; align-items: center; min-height: 44px; } @media (max-width: 559px) { .modal-proposta { width: calc(100% - 24px); max-height: calc(100% - 24px); } .proposta-form, .proposta-pronto { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 22px 18px 20px; } .proposta-linha { grid-template-columns: 1fr; } .modal-proposta h2 { font-size: 21px; } } @media (prefers-reduced-motion: no-preference) { .modal-proposta[open] { animation: modal-area-entra .2s cubic-bezier(.16, 1, .3, 1); } .modal-proposta[open]::backdrop { animation: modal-area-fundo .2s ease-out; } .modal-proposta.fechando { animation: modal-area-sai .2s ease-in forwards; } .modal-proposta.fechando::backdrop { animation: modal-area-fundo-sai .2s ease-in forwards; } } @media (prefers-reduced-motion: reduce) { .modal-proposta, .modal-proposta::backdrop, .modal-proposta.fechando, .modal-proposta.fechando::backdrop, .proposta-chips label { animation: none !important; transition: none !important; } } html.alto-contraste .modal-proposta { border: 2px solid #000; box-shadow: none; } /* Área de trabalho e Serviços: no computador ficam só na barra do topo; na gaveta do celular, no menu */ @media (min-width: 901px) { .menu-lateral .so-gaveta { display: none; } } /* ---------- tour de cada ferramenta (js/tour.js) ---------- */ .tour-fab { position: fixed; right: 24px; bottom: 24px; z-index: 35; display: flex; align-items: center; height: 52px; padding: 0 14px; border: 0; border-radius: 26px; background: var(--azul); color: #fff; font: inherit; font-weight: 600; font-size: 15px; box-shadow: 0 8px 22px rgba(25, 58, 153, .3); cursor: pointer; transition: background .2s, box-shadow .2s; } .tour-fab svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .tour-fab-txt { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .35s ease, opacity .25s, margin .35s ease; } .tour-fab:hover, .tour-fab:focus-visible { background: var(--azul-escuro); box-shadow: 0 10px 28px rgba(25, 58, 153, .4); } .tour-fab:hover .tour-fab-txt, .tour-fab:focus-visible .tour-fab-txt { max-width: 180px; opacity: 1; margin-left: 8px; } .tour-fab:focus-visible { outline: 3px dashed var(--tinta); outline-offset: 3px; } body:has(#tour-convite) .tour-fab { opacity: 0; pointer-events: none; } .tour-convite { position: fixed; right: 20px; bottom: 20px; z-index: 65; width: min(340px, calc(100% - 32px)); background: var(--card); border-radius: 14px; padding: 16px 18px; box-shadow: 0 14px 44px rgba(10, 13, 20, .22); border-top: 4px solid var(--azul); opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s; } .tour-convite.on { opacity: 1; transform: none; } .tour-convite p { margin: 0 0 10px; font-size: 15px; } .tour-convite .tc-titulo { font-weight: 700; font-size: 16px; color: var(--azul); margin-bottom: 4px; } .tour-convite .tc-acoes, .tour-acoes span { display: flex; gap: 8px; flex-wrap: wrap; } .tour-bloq { position: fixed; inset: 0; z-index: 80; } .tour-spot { position: fixed; z-index: 81; border-radius: 12px; box-shadow: 0 0 0 4px var(--azul), 0 0 0 200vmax rgba(10, 13, 20, .62); pointer-events: none; transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease; } .tour-spot.vazio { top: 50% !important; left: 50% !important; width: 0 !important; height: 0 !important; box-shadow: 0 0 0 200vmax rgba(10, 13, 20, .62); } .tour-card { position: fixed; z-index: 82; background: var(--card); border-radius: 14px; padding: 18px 20px 16px; box-shadow: 0 18px 50px rgba(10, 13, 20, .3); font-size: 15.5px; line-height: 1.5; transition: top .3s ease, left .3s ease; } .tour-card.centro { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(420px, calc(100% - 32px)) !important; } .tour-card h2 { margin: 0 0 6px; font-size: 19px; color: var(--azul); } .tour-card p { margin: 0 0 12px; } .tour-card .tour-cont { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--tinta-3); } .tour-barra { height: 4px; background: var(--borda); border-radius: 4px; overflow: hidden; margin: 0 0 14px; } .tour-barra span { display: block; height: 100%; background: var(--azul); transition: width .3s ease; } .tour-acoes { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .tour-pular { background: none; border: 0; padding: 6px 2px; font: inherit; font-size: 14px; color: var(--tinta-3); text-decoration: underline; cursor: pointer; } .tour-card button:focus-visible, .tour-convite button:focus-visible { outline: 2px dashed var(--tinta); outline-offset: 2px; } .tour-card .bt, .tour-convite .bt { width: auto; text-align: center; } html:not(.js) .tour-fab { display: none; } @media (max-width: 900px) { .tour-fab { right: 16px; bottom: 16px; height: 48px; padding: 0 13px; } .tour-convite { left: 16px; right: 16px; bottom: 76px; width: auto; } } @media print { .tour-fab, .tour-convite, .tour-bloq, .tour-spot, .tour-card { display: none; } } @media (prefers-reduced-motion: reduce) { .tour-fab, .tour-fab-txt, .tour-spot, .tour-card, .tour-convite, .tour-barra span { transition: none; } }