/* Viralatinha — camada nova: ficha da organização, minha lista, ferramentas, dados, histórias e as seções de blog, doar, casos e galeria. Usa os tokens de site.css; nada aqui redefine :root. */ /* ---------------------------------------------------------------- selos de requisito */ .selos-req { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .15rem; } .selo-req { font-size: .78rem; font-weight: 600; line-height: 1; padding: .32rem .5rem; border-radius: 999px; border: 1px solid var(--linha); color: var(--tinta-2); background: var(--creme); white-space: nowrap; } .selo-req--neutro { /* a aparência base; existe para o gerador nomear a intenção */ } .selo-req--bom { background: var(--teal-claro); border-color: #4F8A72; color: var(--teal-texto); } .selo-req--aviso { background: #FDF0DC; border-color: #EFD6AC; color: var(--caramelo-escuro); } /* ---------------------------------------------------------------- salvar / minha lista */ .salvar { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .45rem .8rem; font: inherit; font-size: .9rem; font-weight: 600; color: var(--tinta-2); background: var(--papel); border: 1px solid var(--linha); border-radius: 999px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .salvar:hover { border-color: var(--caramelo); color: var(--tinta); } .salvar-ic { width: 15px; height: 15px; flex: none; background: currentColor; -webkit-mask: var(--pata) center / contain no-repeat; mask: var(--pata) center / contain no-repeat; } :root { --pata: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='4' r='2'/%3E%3Ccircle cx='18' cy='8' r='2'/%3E%3Ccircle cx='20' cy='16' r='2'/%3E%3Cpath d='M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z'/%3E%3C/svg%3E"); } .salvar[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; } .card-org .salvar { align-self: flex-start; } .lista-vazia { text-align: center; padding: 3rem 1rem; border: 1px dashed var(--linha); border-radius: var(--raio); background: var(--papel); } .lista-salvos { display: grid; gap: 12px; margin: 2rem 0; } .lista-salvos li { list-style: none; } .salvo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: var(--pad-caixa-p); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); } .salvo h3 { font-family: var(--fonte-texto); font-size: 1.05rem; margin: 0 0 .1rem; } .salvo small { color: var(--tinta-3); } .remover { font: inherit; font-size: .85rem; color: var(--tinta-3); background: none; border: 0; cursor: pointer; padding: .3rem .4rem; border-radius: 8px; } .remover:hover { color: var(--caramelo-escuro); background: var(--creme); } /* ---------------------------------------------------------------- ficha da organização */ .topo--ficha { padding-bottom: 1.5rem; } .ficha-cabeca { display: flex; gap: 2rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .ficha-cabeca h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-block: .3rem .4rem; } .ficha-onde { display: flex; align-items: center; gap: .35rem; color: var(--tinta-3); font-size: .95rem; margin: 0 0 .7rem; } .ficha-onde svg { width: 15px; height: 15px; flex: none; } .ficha-resumo { font-weight: 600; color: var(--tinta); margin-top: .6rem; } .ficha-acoes { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; } .ficha-frescor { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--teal); } .ficha-frescor svg { width: 15px; height: 15px; } .ficha-grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem; align-items: start; padding-block: 1rem 3rem; } @media (max-width: 900px) { .ficha-grade { grid-template-columns: 1fr; gap: 1.5rem; } } .ficha-bloco { padding: var(--pad-caixa-g); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: 1rem; } .ficha-bloco h2 { font-size: 1.3rem; margin-bottom: .6rem; } .ficha-bloco > p:last-child { margin-bottom: 0; } .ficha-bloco--aviso { background: #FDF6EA; border-color: #EFD6AC; } .ficha-bloco--fontes { background: var(--creme); } .ficha-nota { font-size: .9rem; color: var(--tinta-3); } .ficha-nota strong { color: var(--tinta-2); } .req-lista { margin: .8rem 0 0; } .req-linha { display: grid; grid-template-columns: minmax(140px, 38%) 1fr; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--linha); } .req-linha:first-child { border-top: 0; padding-top: 0; } .req-linha dt { font-size: .92rem; color: var(--tinta-3); } .req-linha dd { margin: 0; font-weight: 600; } .req-linha details { font-weight: 400; margin-top: .25rem; } .req-linha summary, .ficha-fonte summary, .ajuda-item summary { cursor: pointer; font-size: .82rem; color: var(--tinta-3); list-style: none; display: inline-flex; align-items: center; gap: .25rem; } .req-linha summary::-webkit-details-marker, .ficha-fonte summary::-webkit-details-marker, .ajuda-item summary::-webkit-details-marker { display: none; } .req-linha summary::before, .ficha-fonte summary::before, .ajuda-item summary::before { content: "”"; font-family: var(--fonte-titulo); font-size: 1.1em; line-height: 0; } .req-linha summary:hover, .ficha-fonte summary:hover { color: var(--caramelo-escuro); } .req-linha details p, .ficha-fonte p, .ajuda-item details p { font-size: .88rem; color: var(--tinta-2); font-style: italic; border-left: 2px solid var(--areia-2); padding-left: .7rem; margin: .4rem 0 0; } .lista-check { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .45rem; } /* O item é bloco, não flex: com flex cada trecho de texto ao redor de um virava um item separado e a frase quebrava em três colunas. O ícone sai do fluxo por posicionamento. */ .lista-check li { position: relative; padding-left: 1.65rem; font-size: .95rem; } .lista-check svg { position: absolute; left: 0; top: .22rem; width: 17px; height: 17px; color: var(--teal); } .ficha-fonte { margin-top: .8rem; } .ajuda-grade { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: .8rem 0; } .ajuda-item { padding: .9rem 1rem; background: var(--creme); border-radius: var(--raio-p); } .ajuda-item h3 { font-family: var(--fonte-texto); font-size: 1rem; margin: 0 0 .25rem; } .ajuda-item p { font-size: .9rem; color: var(--tinta-2); margin: 0; } .ficha-endereco { display: flex; gap: .45rem; align-items: flex-start; } .ficha-endereco svg { width: 17px; height: 17px; flex: none; margin-top: .25rem; color: var(--caramelo); } .ficha-canais { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: .8rem 0 1rem; } .ficha-canal { display: flex; gap: .6rem; align-items: center; padding: .8rem .9rem; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--creme); text-decoration: none; color: var(--tinta); } a.ficha-canal:hover { border-color: var(--caramelo); background: var(--papel); } .ficha-canal svg { width: 19px; height: 19px; flex: none; color: var(--caramelo-escuro); } .ficha-canal strong { display: block; font-size: .92rem; } .ficha-canal small { color: var(--tinta-3); font-size: .82rem; word-break: break-word; } .ficha-canal--texto { cursor: default; } /* O contato institucional virou discável. Três coisas a garantir: que se veja que é link, que a cor passe o AA sobre o papel, e que o alvo de toque chegue aos 24px do WCAG 2.5.8 — um telefone dentro de um tem 15px de altura de linha. */ .contato a, .ficha-canal--texto a, .doar-contato a, .serv-linha a { color: var(--caramelo-escuro); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; display: inline-block; padding: 4px 2px; margin: -4px 0; } .contato a:hover, .ficha-canal--texto a:hover, .doar-contato a:hover, .serv-linha a:hover { color: var(--tinta); } .ficha-canal--texto small, .serv-linha, .doar-contato { line-height: 1.75; } .lista-perguntas { margin: .8rem 0 0; padding-left: 1.2rem; display: grid; gap: .4rem; } .lista-perguntas li { font-size: .95rem; color: var(--tinta-2); } .ficha-fontes { list-style: none; padding: 0; margin: .8rem 0; display: grid; gap: .35rem; } .ficha-fontes a { font-size: .88rem; word-break: break-all; } .ficha-evidencia { font-size: .92rem; color: var(--tinta-2); } .vizinhos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 1rem 0 1.4rem; } .vizinho { padding: var(--pad-caixa-p); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); } .vizinho h3 { font-family: var(--fonte-texto); font-size: 1.02rem; margin: .4rem 0 .3rem; } .vizinho p { font-size: .88rem; color: var(--tinta-3); margin: 0; } .ficha-lado { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 1rem; } @media (max-width: 900px) { .ficha-lado { position: static; } } .lado-caixa { padding: var(--pad-caixa-p); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); } .lado-caixa > strong { display: block; font-family: var(--fonte-titulo); font-size: 1.1rem; margin-bottom: .5rem; } .lado-caixa .btn { margin-top: .8rem; width: 100%; justify-content: center; } .lado-caixa--aviso { background: var(--azul-claro); border-color: #C9DCEE; } .lado-caixa--aviso p { font-size: .88rem; color: #234; margin: 0; } .lado-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; } .lado-links a { font-size: .93rem; } /* ---------------------------------------------------------------- filtros: facetas novas */ .filtros-facetas { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .5rem; } .filtros-facetas .rotulo { font-size: .82rem; color: var(--tinta-3); margin-right: .2rem; } .limpar-filtros { font: inherit; font-size: .84rem; font-weight: 600; color: var(--caramelo-escuro); background: none; border: 0; cursor: pointer; padding: .3rem .4rem; border-radius: 8px; } .limpar-filtros:hover { background: var(--areia); } .limpar-filtros[hidden] { display: none; } /* ---------------------------------------------------------------- busca global */ .busca-global-botao { display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: .4rem .7rem; font: inherit; font-size: .88rem; color: var(--tinta-3); background: var(--creme); border: 1px solid var(--linha); border-radius: 999px; cursor: pointer; } .busca-global-botao:hover { border-color: var(--caramelo); color: var(--tinta); } .busca-global-botao svg { width: 15px; height: 15px; } .busca-global-botao kbd { font: inherit; font-size: .72rem; padding: .1rem .3rem; border: 1px solid var(--linha); border-radius: 5px; background: var(--papel); color: var(--tinta-3); } @media (max-width: 1040px) { .busca-global-botao kbd { display: none; } } .paleta[hidden] { display: none; } .paleta { position: fixed; inset: 0; z-index: 60; background: rgba(43, 33, 24, .38); display: grid; align-items: start; justify-items: center; padding: clamp(16px, 8vh, 96px) var(--gutter); } .paleta-caixa { width: min(640px, 100%); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-alta); overflow: hidden; } /* O anel fica no invólucro porque o input tem outline: 0 para a borda não brigar com a linha do desenho. Sem isto o único campo da caixa não tinha indicação de foco. */ .paleta-campo { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--linha); } .paleta-campo:focus-within { box-shadow: inset 0 0 0 3px var(--caramelo-escuro); } .paleta-campo svg { width: 18px; height: 18px; color: var(--tinta-3); flex: none; } .paleta-campo input { flex: 1; font: inherit; font-size: 1.05rem; border: 0; outline: 0; background: none; color: var(--tinta); } .paleta-lista { list-style: none; margin: 0; padding: .4rem; max-height: min(420px, 56vh); overflow: auto; } .paleta-lista li + li { margin-top: 2px; } .paleta-lista a { display: flex; align-items: baseline; gap: .6rem; padding: .55rem .7rem; border-radius: var(--raio-p); text-decoration: none; color: var(--tinta); } .paleta-lista a:hover, .paleta-lista a.ativo { background: var(--areia); } .paleta-lista .tipo-r { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); flex: none; } .paleta-lista .onde-r { font-size: .82rem; color: var(--tinta-3); margin-left: auto; flex: none; } .paleta-vazio { padding: 1.4rem 1.1rem; color: var(--tinta-3); font-size: .92rem; } .paleta-pe { padding: .6rem 1.1rem; border-top: 1px solid var(--linha); font-size: .8rem; color: var(--tinta-3); background: var(--creme); } /* ---------------------------------------------------------------- ferramentas e checklist */ .grade-ferramentas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 2rem 0; } .card-ferramenta { display: flex; flex-direction: column; gap: .4rem; padding: var(--pad-caixa); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s, border-color .18s; } .card-ferramenta:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--areia-2); } .card-ferramenta .ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--areia); color: var(--caramelo-escuro); margin-bottom: .3rem; } .card-ferramenta .ic svg { width: 19px; height: 19px; } .card-ferramenta :is(h2, h3) { font-family: var(--fonte-texto); font-size: 1.08rem; font-weight: 650; margin: 0; } .card-ferramenta p { font-size: .92rem; color: var(--tinta-2); margin: 0; } .checklist { display: grid; gap: 1.2rem; margin: 2rem 0; } .checklist-grupo { padding: var(--pad-caixa); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); } .checklist-grupo h2 { font-size: 1.25rem; margin-bottom: .2rem; } .checklist-grupo > p { font-size: .92rem; color: var(--tinta-3); margin-top: 0; } .checklist-itens { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .1rem; } .checklist-itens li { border-top: 1px solid var(--linha); } .checklist-itens li:first-child { border-top: 0; } .checklist-itens label { display: flex; gap: .7rem; align-items: flex-start; padding: .65rem .2rem; cursor: pointer; } .checklist-itens input { margin: .25rem 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--caramelo); } .checklist-itens label span { font-size: .96rem; } .checklist-itens label small { display: block; font-size: .85rem; color: var(--tinta-3); margin-top: .1rem; } .checklist-itens input:checked + span { color: var(--tinta-3); text-decoration: line-through; text-decoration-color: var(--areia-2); } .checklist-acoes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1.5rem 0; } .checklist-progresso { font-size: .9rem; color: var(--tinta-3); } .aviso-emergencia { padding: 1.2rem 1.4rem; border-radius: var(--raio); background: #FCEDE9; border: 1px solid #F0CDC3; margin: 1.5rem 0; } /* É a instrução de urgência da página: não pode ser menor que o corpo do site nem perder do destaque editorial que vem embaixo. Mesmo clamp dos títulos de prosa. */ /* Sem font-size: herda o tamanho de h2 de seção, para a urgência não perder do destaque editorial que vem logo abaixo. O corpo herda o do site (17px) — 1rem daria 16px, porque a raiz é 16 e o corpo é 17. */ .aviso-emergencia h2 { margin-bottom: .4rem; color: var(--terracota-texto); } .aviso-emergencia p { margin: 0; font-size: inherit; color: var(--tinta); } .tabela-toxico { width: 100%; border-collapse: collapse; font-size: .94rem; } .tabela-toxico th, .tabela-toxico td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--linha); vertical-align: top; } .tabela-toxico th { font-family: var(--fonte-texto); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); } .tabela-toxico tbody tr:hover { background: var(--creme); } .tabela-toxico .quem { white-space: nowrap; font-size: .85rem; color: var(--tinta-3); } /* ---------------------------------------------------------------- dados abertos */ .painel-dados { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 2rem 0; } .dado-caixa { padding: var(--pad-caixa); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); } .dado-caixa strong { display: block; font-family: var(--fonte-titulo); font-size: 2.1rem; line-height: 1; color: var(--caramelo-escuro); } .dado-caixa span { display: block; font-size: .9rem; color: var(--tinta-2); margin-top: .35rem; } .barras { display: grid; gap: .45rem; margin: 1.5rem 0; } .barra-uf { display: grid; grid-template-columns: 150px 1fr 44px; gap: .7rem; align-items: center; font-size: .9rem; } .barra-uf .trilho { height: 20px; background: var(--areia); border-radius: 6px; overflow: hidden; } .barra-uf .trilho span { display: block; height: 100%; background: var(--caramelo); border-radius: 6px; } .barra-uf .n { text-align: right; color: var(--tinta-3); font-variant-numeric: tabular-nums; } .barra-uf.magra .trilho span { background: #C98A4B; opacity: .55; } @media (max-width: 560px) { .barra-uf { grid-template-columns: 96px 1fr 34px; font-size: .84rem; } } .lacunas { padding: 1.2rem 1.4rem; background: #FDF6EA; border: 1px solid #EFD6AC; border-radius: var(--raio); margin: 1.5rem 0; } .lacunas h2 { font-size: 1.15rem; } .lacunas ul { margin: .5rem 0 0; padding-left: 1.2rem; font-size: .94rem; } /* ---------------------------------------------------------------- histórias */ .historia-vazia { padding: 2rem; border: 1px dashed var(--linha); border-radius: var(--raio); background: var(--papel); } .tempos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 1.5rem 0; counter-reset: t; } .tempo { padding: var(--pad-caixa-p); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); counter-increment: t; } .tempo::before { content: counter(t); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--areia); color: var(--caramelo-escuro); font-weight: 700; font-size: .9rem; margin-bottom: .5rem; } .tempo h3 { font-family: var(--fonte-texto); font-size: 1rem; margin: 0 0 .25rem; } .tempo p { font-size: .9rem; color: var(--tinta-2); margin: 0; } /* ---------------------------------------------------------------- blog, doar, casos, galeria */ .grade-especies { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 2rem 0; } .card-especie { display: flex; flex-direction: column; gap: .5rem; padding: var(--pad-caixa); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; } .card-especie:hover { transform: translateY(-3px); box-shadow: var(--sombra); } .card-especie-nome { font-family: var(--fonte-titulo); font-size: 1.3rem; font-weight: 600; } .card-especie-desc { font-size: .95rem; color: var(--tinta-2); } .grade-especies--compacta { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 1rem 0 0; } .card-especie--compacto { padding: 1rem; } .card-especie--compacto .card-especie-nome { font-size: 1.05rem; } .bloco-secundario { margin: 2.5rem 0 0; padding: 1.5rem; border-radius: var(--raio); background: var(--creme); border: 1px dashed var(--linha); } .nota-secundaria { margin: .35rem 0 0; font-size: .95rem; color: var(--tinta-2); max-width: 62ch; } .aviso-vazio { padding: var(--pad-caixa); border: 1px dashed var(--linha); border-radius: var(--raio); background: var(--papel); margin: 1.5rem 0; } .pauta { margin: 2.5rem 0; } .lista-pauta { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; } .lista-pauta li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--papel); } .figura-especie { margin: 0 0 2rem; border-radius: var(--raio); overflow: hidden; } .figura-especie img { width: 100%; height: clamp(200px, 32vw, 340px); object-fit: cover; } .grade-casos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 2rem 0; } .caso { padding: var(--pad-caixa); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); } .caso-org { font-weight: 600; margin: .25rem 0; } .caso-verificado { font-size: .85rem; color: var(--tinta-3); } .barra { height: 10px; border-radius: 999px; background: var(--areia); overflow: hidden; margin: .75rem 0 .25rem; } .barra span { display: block; height: 100%; background: var(--caramelo); } .barra-texto { font-size: .85rem; color: var(--tinta-3); margin: 0; } .grade-criterios { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .criterio { padding: var(--pad-caixa-p); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); } .criterio h3 { font-family: var(--fonte-texto); font-size: 1.05rem; margin: 0 0 .35rem; } .bloco-envio { margin: 2.5rem 0; padding: 1.5rem; border-radius: var(--raio); background: #FDF6EA; border: 1px solid #EFD6AC; } .doar-card { padding: var(--pad-caixa); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); display: flex; flex-direction: column; gap: .4rem; } .doar-card :is(h2, h3) { font-family: var(--fonte-texto); margin: .2rem 0; font-size: 1.1rem; } .doar-card .btn { align-self: flex-start; margin-top: .5rem; } .doar-local { font-weight: 600; color: var(--tinta-3); margin: 0; } .doar-contato { font-size: .92rem; color: var(--tinta-2); } .pedidos { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem; } .pedidos li { font-size: .8rem; padding: .25rem .5rem; border-radius: 999px; background: var(--areia); color: var(--tinta-2); } .filtros-galeria { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin: 1.5rem 0; } .filtros-galeria label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; } .filtros-galeria select { padding: .5rem .75rem; border-radius: var(--raio-p); border: 1px solid var(--linha); background: var(--papel); font: inherit; } .contador-galeria { font-size: .9rem; color: var(--tinta-3); padding-bottom: .6rem; } .mural { columns: 4 240px; column-gap: 1rem; margin: 1rem 0 0; } .pin { display: block; break-inside: avoid; margin: 0 0 1rem; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: var(--papel); text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; } .pin:hover { transform: translateY(-3px); box-shadow: var(--sombra); } .pin-capa { display: flex; align-items: center; justify-content: center; height: 130px; background: linear-gradient(135deg, var(--c) 0%, var(--creme) 210%); } .pin-capa span { font-family: var(--fonte-titulo); font-size: 2.2rem; color: #fff; letter-spacing: .05em; } .pin-corpo { display: flex; flex-direction: column; gap: .3rem; padding: 1rem; } .pin-rede { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); } .pin-arroba { font-size: .9rem; color: var(--caramelo-escuro); } .pin-texto { font-size: .92rem; color: var(--tinta-2); } .pin-local { font-size: .82rem; color: var(--tinta-3); } .nota-galeria { margin: 2rem 0 0; font-size: .9rem; color: var(--tinta-3); } @media (max-width: 600px) { .mural { columns: 2 150px; } .pin-capa { height: 100px; } } /* ---------------------------------------------------------------- impressão */ @media print { .salvar, .remover, .busca-global-botao, .paleta, .checklist-acoes, .faixa-cta, .ficha-lado { display: none !important; } .ficha-grade { grid-template-columns: 1fr; } .ficha-bloco, .checklist-grupo, .salvo { break-inside: avoid; border-color: #ccc; } .req-linha details, .ficha-fonte { display: none; } .checklist-itens input { -webkit-appearance: none; appearance: none; border: 1px solid #888; border-radius: 3px; } } /* ---------------------------------------------------------------- ações do cartão */ .card-acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-top: .2rem; padding-top: .7rem; border-top: 1px solid var(--linha); } .ver-ficha { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; font-weight: 600; text-decoration: none; } .ver-ficha svg { width: 15px; height: 15px; } .ver-ficha:hover { text-decoration: underline; } .card-org header :is(h2, h3, h4) a { color: inherit; text-decoration: none; } .card-org header :is(h2, h3, h4) a:hover { color: var(--caramelo-escuro); text-decoration: underline; } /* Ícone dentro de texto corrido não tem tamanho herdado: sem isto a seta ocupa a caixa toda. */ .ficha-nota svg, .checklist-itens small svg, .lacunas p svg, .nota-galeria svg, .card-especie svg, .pedidos svg, .doar-local svg { width: 15px; height: 15px; vertical-align: -2px; } /* ---------------------------------------------------------------- estudos e temas */ .caixa-metodo { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: var(--pad-caixa-g); margin: 2rem 0; } .caixa-metodo h2 { font-size: 1.3rem; margin-bottom: .5rem; } .caixa-metodo > :last-child { margin-bottom: 0; } .caixa-destaque { background: var(--areia); border: 1px solid var(--areia-2); border-radius: var(--raio); padding: clamp(1.4rem, 3vw, 2.2rem); margin: 2rem 0; } .caixa-destaque h2 { margin: .2rem 0 .5rem; } .caixa-destaque p { max-width: 62ch; } .caixa-destaque .btn { margin-top: .6rem; } .estudo-grupo { margin: 2.5rem 0; scroll-margin-top: calc(var(--header-h) + 20px); } .estudos { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; } .estudo { display: grid; grid-template-columns: 62px 1fr; gap: 1rem; align-items: start; padding: var(--pad-caixa-p); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-p); } .estudo:hover { border-color: var(--areia-2); } .estudo-ano { font-family: var(--fonte-titulo); font-size: 1.05rem; color: var(--caramelo-escuro); font-variant-numeric: tabular-nums; } .estudo-citacao { margin: 0; font-size: .95rem; color: var(--tinta); } .estudo-meta { margin: .3rem 0 0; font-size: .85rem; color: var(--tinta-3); } .estudo-meta a { font-weight: 600; } @media (max-width: 560px) { .estudo { grid-template-columns: 1fr; gap: .2rem; } } /* ---------------------------------------------------------------- serviços */ .serv-grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 1.2rem 0 2.5rem; } .serv-uf { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: var(--pad-caixa-p); } .serv-uf h3 { font-family: var(--fonte-texto); font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); margin: 0 0 .5rem; } .serv-cidades { list-style: none; padding: 0; margin: 0; display: grid; gap: .15rem; } .serv-cidades li { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; font-size: .95rem; } .serv-cidades li span { color: var(--tinta-3); } .serv-cidades b { font-weight: 600; font-size: .82rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; } .serv-secao { margin: 2.5rem 0; scroll-margin-top: calc(var(--header-h) + 20px); } .serv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: .8rem; } .serv-card { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: var(--pad-caixa-p); display: flex; flex-direction: column; gap: .35rem; } .serv-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; } .serv-card h3 { font-family: var(--fonte-texto); font-size: 1.02rem; font-weight: 650; margin: 0; line-height: 1.3; } .serv-cat { font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); background: var(--creme); border: 1px solid var(--linha); border-radius: 999px; padding: .2rem .5rem; white-space: nowrap; } .serv-onde, .serv-linha { display: flex; gap: .4rem; align-items: flex-start; font-size: .89rem; color: var(--tinta-2); margin: 0; } .serv-onde svg, .serv-linha svg { width: 14px; height: 14px; flex: none; margin-top: .22rem; color: var(--tinta-3); } .serv-horario { color: var(--tinta-3); } .serv-pe { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--linha); } .serv-links { display: flex; gap: .7rem; flex-wrap: wrap; } .serv-links a { display: inline-flex; align-items: center; gap: .25rem; font-size: .85rem; font-weight: 600; text-decoration: none; } .serv-links a:hover { text-decoration: underline; } .serv-links svg { width: 14px; height: 14px; } .serv-ano { font-size: .76rem; color: var(--tinta-3); } .serv-ano--antigo { color: var(--caramelo-escuro); } .serv-vazio { color: var(--tinta-3); font-style: italic; } /* ---------------------------------------------------------------- compartilhar a ficha */ .ficha-compartilhar { display: flex; flex-wrap: wrap; gap: .4rem; } .compartilhar { display: inline-flex; align-items: center; gap: .35rem; min-height: 38px; padding: .4rem .7rem; font: inherit; font-size: .86rem; font-weight: 600; color: var(--tinta-2); background: var(--creme); border: 1px solid var(--linha); border-radius: 999px; cursor: pointer; text-decoration: none; } .compartilhar:hover { border-color: var(--caramelo); color: var(--tinta); background: var(--papel); } .compartilhar svg { width: 15px; height: 15px; flex: none; } .compartilhar.copiado { background: var(--teal-claro); border-color: #4F8A72; color: var(--teal-texto); } .ficha-ir-contato { display: none; } @media (max-width: 900px) { /* No telefone, o bloco de contato fica longe do topo: o atalho evita a rolagem cega. */ .ficha-ir-contato { display: inline-flex; } .ficha-acoes { width: 100%; } .ficha-acoes .btn { width: 100%; justify-content: center; } } /* ---------------------------------------------------------------- plantas tóxicas */ .planta-grupo { margin: 2.5rem 0; scroll-margin-top: calc(var(--header-h) + 20px); } .plantas { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; margin-top: .8rem; } .planta { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: var(--pad-caixa-p); border-left: 4px solid var(--linha); } .planta--grave { border-left-color: #C4452A; } .planta--moderada { border-left-color: var(--caramelo); } .planta--irritacao { border-left-color: var(--areia-2); } .planta header { display: flex; justify-content: space-between; align-items: flex-start; gap: .7rem; margin-bottom: .5rem; } .planta h3 { font-family: var(--fonte-texto); font-size: 1.08rem; font-weight: 650; margin: 0; } .planta-cientifico { font-style: italic; font-size: .86rem; color: var(--tinta-3); margin: .1rem 0 0; } .planta-grav { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .22rem .5rem; border-radius: 999px; white-space: nowrap; } .planta-grav--grave { background: var(--terracota-claro); color: var(--terracota-texto); } .planta-grav--moderada { background: #FDF0DC; color: var(--caramelo-escuro); } .planta-grav--irritacao { background: var(--areia); color: var(--tinta-2); } .planta p { font-size: .93rem; margin: .3rem 0; } .planta-quem { color: var(--tinta); } .planta-fontes { list-style: none; padding: 0; margin: .4rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; } .planta-fontes a { font-size: .82rem; } /* ---------------------------------------------------------------- calculadora de idade */ .calc { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: var(--pad-caixa-g); margin: 2rem 0; } .calc label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .6rem; } .calc-linha { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .calc input { width: 118px; font: inherit; font-size: 1.5rem; font-family: var(--fonte-titulo); padding: .5rem .7rem; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--creme); color: var(--tinta); text-align: center; } .calc input:focus-visible { outline: 2px solid var(--caramelo); outline-offset: 2px; } .calc-igual { font-size: 1.4rem; color: var(--tinta-3); } .calc output { font-size: 1.15rem; color: var(--tinta-2); } .calc output strong { font-family: var(--fonte-titulo); font-size: 2.3rem; line-height: 1; color: var(--caramelo-escuro); display: inline-block; margin-right: .3rem; } .calc-nota { font-size: .87rem; color: var(--tinta-3); margin: 1rem 0 0; } .calc-aviso { font-size: .9rem; color: var(--caramelo-escuro); background: #FDF6EA; border: 1px solid #EFD6AC; border-radius: var(--raio-p); padding: .6rem .8rem; margin: .8rem 0 0; } .calc-aviso[hidden] { display: none; } .fases { margin: 1rem 0 0; } .fase-linha { display: grid; grid-template-columns: minmax(110px, 26%) 1fr; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--linha); } .fase-linha:first-child { border-top: 0; padding-top: 0; } .fase-linha dt { font-weight: 650; } .fase-linha dd { margin: 0; } .fase-linha dd strong { display: block; font-weight: 500; color: var(--tinta); } .fase-linha dd span { display: block; font-size: .89rem; color: var(--tinta-3); margin-top: .2rem; } @media (max-width: 520px) { .fase-linha { grid-template-columns: 1fr; gap: .2rem; } } /* ---------------------------------------------------------------- alvo de toque O piso de 44 px vale para tudo que se toca. Onde aumentar a altura empurraria o layout, o alvo cresce por padding com margem negativa: a área clicável cresce, a caixa não. */ .ver-ficha { min-height: 44px; padding-block: .6rem; margin-block: -.6rem; } .remover { min-height: 44px; padding-inline: .6rem; } .compartilhar { min-height: 44px; } .limpar-filtros { min-height: 44px; padding-inline: .6rem; } .serv-links a, .planta-fontes a { display: inline-flex; align-items: center; min-height: 44px; } @media (hover: hover) and (pointer: fine) { /* No mouse o alvo pode ser justo: quem tem ponteiro fino não precisa de 44 px. */ .ver-ficha, .remover, .compartilhar, .limpar-filtros, .serv-links a, .planta-fontes a { min-height: 0; } .ver-ficha { padding-block: 0; margin-block: 0; } } /* ---------------------------------------------------------------- barra de filtros no celular Com 14 chips a tira pegajosa ocupava 76% da tela do telefone e nenhum cartão cabia inteiro. No celular as facetas ficam recolhidas atrás de um resumo; no desktop a lista fica aberta e o resumo desaparece. O conteúdo de
fechado é escondido pelo estilo do navegador, e é por isso que o display precisa ser reafirmado na consulta de largura. */ .filtros-mais { margin-top: .5rem; } .filtros-mais > summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .3rem .2rem; font-size: .86rem; font-weight: 600; color: var(--tinta-2); cursor: pointer; list-style: none; } .filtros-mais > summary::-webkit-details-marker { display: none; } .filtros-mais > summary::after { content: "▾"; color: var(--tinta-3); transition: transform .16s; } .filtros-mais[open] > summary::after { transform: rotate(180deg); } .filtros-mais > summary b { font-size: .75rem; min-width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--areia); color: var(--tinta-2); font-weight: 600; } @media (min-width: 760px) { /* No desktop o bloco fica sempre aberto (o JS garante) e o resumo não aparece. */ .filtros-mais > summary { display: none; } } @media (max-width: 759px) { /* A tira não passa de metade da tela: o resultado precisa aparecer junto com o filtro. */ .filtros { max-height: 50vh; overflow-y: auto; } } /* ---------------------------------------------------------------- cartão de listagem O cartão da listagem serve para ESCOLHER, não para ler: nome, tipo, bairro, três selos e as duas ações. O pé não fica pregado no fundo com margin-top auto, porque isso abria vãos de até 136 px no meio do cartão quando um vizinho era mais alto. */ .cards { align-items: start; } .card-org--resumido { gap: .55rem; } .card-org--resumido .card-acoes { margin-top: .1rem; } /* ---------------------------------------------------------------- diretório nacional recolhido */ details.grupo-uf { border-bottom: 1px solid var(--linha); } details.grupo-uf > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .55rem .2rem; cursor: pointer; list-style: none; } details.grupo-uf > summary::-webkit-details-marker { display: none; } details.grupo-uf > summary:hover h2 { color: var(--caramelo-escuro); } details.grupo-uf > summary h2 { font-size: 1.3rem; margin: 0; line-height: 1.2; } .ver-uf { font-size: .84rem; font-weight: 600; color: var(--caramelo-escuro); flex: none; } .ver-uf::after { content: " ▾"; } details.grupo-uf[open] .ver-uf::after { content: " ▴"; } .grupo-uf-atalho { margin: 0 0 1rem; font-size: .9rem; } .grupo-uf-atalho svg { width: 14px; height: 14px; vertical-align: -2px; } details.grupo-uf[open] { padding-bottom: 1.4rem; } /* ---------------------------------------------------------------- portas de entrada */ .hero-porta { margin: 1rem 0 0; font-size: .95rem; } .hero-porta a { font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; } .hero-porta svg { width: 15px; height: 15px; } .orientacao { display: flex; gap: .6rem; align-items: flex-start; margin: 1.2rem 0 0; padding: .85rem 1.1rem; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-p); font-size: .95rem; max-width: 62ch; } .orientacao svg { width: 18px; height: 18px; flex: none; margin-top: .15rem; color: var(--caramelo-escuro); } /* Cartão de passo sem foto não precisa da altura de um com foto — mas precisa reservar o espaço do número, que é posicionado no topo: sem isso o título nasce embaixo dele e a primeira palavra desaparece atrás da pastilha. */ .bento-item:not(.com-foto) { min-height: 210px; padding-top: 3.7rem; } /* Os quatro grupos usam o componente .titulo-grupo do site.css; aqui fica só o que é próprio. */ .estudo-grupo h2, .serv-secao h2, .planta-grupo h2 { margin-bottom: .2rem; } /* No desktop o sumário não tem resumo clicável: a lista fica sempre à vista. */ @media (min-width: 961px) { .sumario-lista > summary { display: none; } } .sumario-lista > summary { list-style: none; } .salvar-aviso { font-size: .84rem; font-weight: 600; white-space: nowrap; } .salvar-aviso[hidden] { display: none; } /* ---------------------------------------------------------------- próximo passo */ .proximo-passo { padding: 1.5rem 1.6rem; margin-bottom: 1rem; background: var(--areia); border: 1px solid var(--areia-2); border-radius: var(--raio); } .proximo-passo h2 { font-size: 1.4rem; margin: .2rem 0 .5rem; } .proximo-passo p { margin: 0 0 .3rem; max-width: 58ch; } .proximo-passo-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; } /* ---------------------------------------------------------------- primeiro contato */ .mensagem { width: 100%; font: inherit; font-size: .95rem; line-height: 1.55; padding: .9rem 1rem; margin-top: .8rem; background: var(--creme); color: var(--tinta); border: 1px solid var(--linha); border-radius: var(--raio-p); resize: vertical; } .mensagem:focus-visible { outline: 2px solid var(--caramelo); outline-offset: 2px; } .mensagem-acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; } .mensagem-acoes .btn.copiado { background: var(--teal-claro); border-color: #4F8A72; color: var(--teal-texto); } /* ---------------------------------------------------------------- formulário de indicação */ .form-acoes { display: flex; flex-wrap: wrap; gap: .6rem; } .form-aviso { margin: .8rem 0 0; padding: .7rem .9rem; font-size: .93rem; background: var(--teal-claro); border: 1px solid #4F8A72; border-radius: var(--raio-p); color: var(--teal-texto); } .form-aviso[hidden] { display: none; } .form-saida { display: block; margin-top: .9rem; } .form-saida[hidden] { display: none; } /* ---------------------------------------------------------------- filtros ativos */ .filtros-ativos { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .6rem; } .filtros-ativos[hidden] { display: none; } .filtros-ativos .rotulo { font-size: .82rem; color: var(--tinta-3); margin-right: .2rem; } .pilula { display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; padding: .25rem .5rem .25rem .7rem; font: inherit; font-size: .84rem; font-weight: 600; background: var(--tinta); color: #fff; border: 0; border-radius: 999px; cursor: pointer; } .pilula span { font-size: 1.05rem; line-height: 1; opacity: .7; } .pilula:hover span { opacity: 1; } /* Faceta que levaria a zero resultado não vira beco: fica desabilitada e diz o número. */ .filtros-facetas .chip:disabled { opacity: .45; cursor: not-allowed; } .filtros-facetas .chip b { font-weight: 600; font-size: .78rem; opacity: .65; } /* ---------------------------------------------------------------- procedência e silêncio */ .card-frescor { font-size: .78rem; color: var(--tinta-3); margin-left: auto; margin-right: .5rem; } .nao-informado { margin: .9rem 0 0; padding: .7rem .9rem; font-size: .9rem; background: var(--pedra-clara); border-radius: var(--raio-p); color: var(--tinta-2); } .fora-do-filtro { color: var(--caramelo-escuro); font-weight: 600; } .fora-do-filtro[hidden] { display: none; } /* ---------------------------------------------------------------- escada de alcance */ .escada { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 1rem 0 0; } .escada .degrau { display: inline-flex; align-items: center; gap: .35rem; min-height: 38px; padding: .3rem .75rem; border-radius: 999px; font-size: .88rem; text-decoration: none; border: 1px solid var(--linha); background: var(--papel); color: var(--tinta-2); } .escada a.degrau:hover { border-color: var(--caramelo); color: var(--tinta); } .escada .degrau--atual { background: var(--areia); border-color: var(--areia-2); color: var(--tinta); font-weight: 600; } .escada .degrau b { font-weight: 600; font-size: .78rem; color: var(--tinta-3); } .escada .degrau--atual b { color: var(--tinta-2); } .escada .degrau + .degrau::before { content: "›"; color: var(--tinta-3); margin-right: .35rem; } /* ---------------------------------------------------------------- aviso financeiro */ .ficha-aviso-dinheiro { display: flex; gap: .55rem; align-items: flex-start; margin: .9rem 0 .6rem; padding: .8rem 1rem; background: var(--terracota-claro); border: 1px solid #F0CDC3; border-radius: var(--raio-p); font-size: .92rem; color: var(--terracota-texto); } .ficha-aviso-dinheiro svg { width: 17px; height: 17px; flex: none; margin-top: .15rem; color: var(--terracota-texto); } .ficha-aviso-dinheiro strong { color: var(--terracota-texto); } /* ---------------------------------------------------------------- estado local do visitante */ .vistos { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding-block: 1rem 0; } .vistos .rotulo { font-size: .82rem; color: var(--tinta-3); } .buscas-salvas { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .6rem; } .buscas-salvas[hidden] { display: none; } .buscas-salvas .rotulo { font-size: .82rem; color: var(--tinta-3); margin-right: .2rem; } .chip--acao { border-style: dashed; color: var(--caramelo-escuro); font-weight: 600; } .remover--busca { min-height: 34px; padding-inline: .35rem; font-size: 1rem; line-height: 1; margin-left: -.3rem; } /* ---------------------------------------------------------------- castração */ .castra-uf { margin: 2.5rem 0; } .castra-card { padding: var(--pad-caixa-p); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); } .castra-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; } .castra-card h3 { font-family: var(--fonte-texto); font-size: 1.02rem; font-weight: 650; margin: 0; } .castra-trecho { font-size: .9rem; font-style: italic; color: var(--tinta-2); border-left: 2px solid var(--areia-2); padding-left: .7rem; margin: .5rem 0 0; } /* ---------------------------------------------------------------- ordem declarada */ .filtros-ordem { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; } .filtros-ordem label { font-size: .82rem; color: var(--tinta-3); } .filtros-ordem select { min-height: 40px; padding: .3rem .6rem; font: inherit; font-size: .88rem; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-p); color: var(--tinta); } .ordem-nota { font-size: .8rem; color: var(--tinta-3); max-width: 46ch; } /* ---------- Programas nacionais resumidos (páginas de estado e de cidade) ---------- */ /* Os 4 cartões cheios somavam 1.885px em 390px, mais que o conteúdo local da página. */ .nacional-resumo { padding: 1.6rem 0 .4rem; } .nacional-resumo h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin: 0 0 .5rem; } .nacional-resumo > p { color: var(--tinta-2); margin: 0 0 1rem; max-width: 62ch; } .nacional-resumo-link { margin: 1.1rem 0 0; } .nacional-resumo-link a { color: var(--caramelo-escuro); font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; } .nacional-resumo-link svg { width: 16px; height: 16px; } /* ---------- Aberto agora em /servicos/ ---------- */ /* Só aparece onde o horário do mapa dá para ler inteiro; o resto fica calado. */ .serv-horario { flex-wrap: wrap; } .serv-agora { font-size: .78rem; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; padding: .12rem .45rem; border-radius: 999px; white-space: nowrap; } .serv-agora--sim { background: #DFF0DC; color: #1F5B2B; } .serv-agora--nao { background: var(--areia); color: var(--tinta-2); } .serv-aviso-agora { display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem; color: var(--tinta-2); margin: .8rem 0 0; } .serv-aviso-agora svg { width: 16px; height: 16px; flex: none; margin-top: .25rem; color: var(--tinta-3); } /* ---------- Perto de mim em /servicos/ ---------- */ .chip--perto { display: inline-flex; align-items: center; gap: .35rem; } .chip--perto svg { width: 15px; height: 15px; } .serv-dist { font-size: .8rem; font-weight: 650; color: var(--caramelo-escuro); background: var(--areia); padding: .12rem .45rem; border-radius: 999px; white-space: nowrap; } .serv-card header { flex-wrap: wrap; gap: .4rem; } .serv-perto-nota { font-size: .88rem; color: var(--tinta-2); margin: .7rem 0 0; max-width: 72ch; } .card-dist { font-size: .78rem; font-weight: 650; color: var(--caramelo-escuro); background: var(--areia); padding: .12rem .45rem; border-radius: 999px; white-space: nowrap; align-self: flex-start; } /* ---------- Condição corporal (/ferramentas/condicao-corporal/) ---------- */ .cc { margin: 2rem 0; } .cc-passo { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); padding: var(--pad-caixa-g); margin: 0 0 1rem; } .cc-passo legend { display: flex; align-items: center; gap: .6rem; font-family: var(--fonte-titulo); font-size: 1.15rem; padding: 0 .4rem; } .cc-num { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--areia); color: var(--caramelo-escuro); font-size: .92rem; font-weight: 600; } .cc-instrucao { color: var(--tinta-2); margin: .5rem 0 1rem; } .cc-opcoes { display: grid; gap: .5rem; } .cc-opcao { text-align: left; font: inherit; font-size: .96rem; color: var(--tinta); cursor: pointer; background: var(--creme); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: .7rem .9rem; min-height: 44px; transition: background .15s, border-color .15s; } .cc-opcao:hover { border-color: var(--caramelo-escuro); } .cc-opcao[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); } .cc-opcao:focus-visible { outline: 3px solid var(--caramelo-escuro); outline-offset: 2px; } .cc-aviso { color: var(--tinta-2); font-size: .95rem; margin: 1rem 0 0; } .cc-saida { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--areia); padding: var(--pad-caixa-g); margin-top: 1.2rem; } .cc-resultado h3 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin: 0 0 .5rem; } .cc-resultado p { margin: 0 0 .7rem; } .cc-nota { color: var(--tinta-2); font-size: .95rem; } .cc-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 0; } /* ---------- Roteiro de contato (/minha-lista/) ---------- */ .roteiro { margin: 2.2rem 0; } .roteiro-itens { list-style: none; counter-reset: rot; margin: 1rem 0 0; padding: 0; display: grid; gap: .8rem; } .roteiro-itens li { counter-increment: rot; position: relative; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); padding: var(--pad-caixa-g); padding-left: 3.6rem; } .roteiro-itens li::before { content: counter(rot); position: absolute; left: 1.1rem; top: 1.35rem; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: var(--areia); color: var(--caramelo-escuro); font-weight: 650; font-size: .9rem; } .roteiro-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; } .roteiro-cab strong { font-size: 1.04rem; } .roteiro-onde { display: block; font-size: .88rem; color: var(--tinta-3); margin-top: .15rem; } .roteiro-canal { margin: .5rem 0 .8rem; font-size: .94rem; color: var(--tinta-2); } .roteiro-canal--sem { color: var(--tinta-3); font-style: italic; } .roteiro-acoes { display: flex; flex-wrap: wrap; gap: .5rem; } .roteiro-acao { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .9rem; border-radius: 999px; background: var(--tinta); color: #fff; font-size: .9rem; font-weight: 600; text-decoration: none; } .roteiro-acao:hover { background: var(--caramelo-escuro); color: #fff; } .roteiro-acao--fraca { background: transparent; color: var(--caramelo-escuro); border: 1px solid var(--linha); } .roteiro-acao--fraca:hover { background: var(--areia); color: var(--tinta); } @media print { .roteiro-acao { background: none; color: var(--tinta); border: 1px solid var(--linha); } } /* ---------- Comparação dos lugares salvos (/minha-lista/) ---------- */ .comparar { margin: 2.2rem 0; } .comparar .tabela { margin-top: 1rem; } .comparar th a { color: inherit; } .comparar-muda { color: var(--tinta-3); text-align: center; } /* --tinta-3 (#73726D) sobre --areia (#F3EADB) mede 4,04:1 e reprova o AA de 4,5. O th da .tabela-toxico é tinta-3 por padrão e aqui ganha fundo de areia, então precisa subir para --tinta-2 (#5B5A55), que mede 5,79:1 sobre a mesma areia. Medido na varredura de 18/09. */ [data-comparar-tabela] thead th { background: var(--areia); font-size: .88rem; vertical-align: bottom; color: var(--tinta-2); } [data-comparar-tabela] thead th a { color: var(--tinta-2); } [data-comparar-tabela] tbody th { font-weight: 650; font-size: .92rem; } /* ---------- Achei um animal (/achei-um-animal/) ---------- */ .achei select { width: 100%; min-height: 48px; font: inherit; font-size: 1rem; padding: 0 .8rem; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--papel); color: var(--tinta); } .achei select:focus-visible { outline: 3px solid var(--caramelo-escuro); outline-offset: 2px; } .achei-saida { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--areia); padding: var(--pad-caixa-g); margin-top: 1.2rem; } .achei-saida h2 { font-size: clamp(1.3rem, 3.2vw, 1.7rem); margin: 0 0 .6rem; } .achei-saida h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; } .achei-saida p { margin: 0 0 .8rem; } .achei-links, .achei-canais { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .6rem; } .achei-links li { padding-left: 1.1rem; position: relative; font-size: .97rem; } .achei-links li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 999px; background: var(--caramelo-escuro); } .achei-canais li { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: .7rem .9rem; } .achei-canal { display: block; font-size: .92rem; color: var(--tinta-2); margin: .2rem 0; } .achei-nota { font-size: .92rem; color: var(--tinta-2); } .achei-sem { font-size: .95rem; color: var(--tinta-2); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: .8rem .9rem; } /* ---------- Facetas com polaridade (barra do diretório) ---------- */ /* Os 8 chips tinham o mesmo peso e polaridades opostas: "Sem taxa" ao lado de "Exige tela". */ .filtros-facetas { display: grid; gap: 1.1rem; } .faceta-grupo { display: grid; gap: .35rem; } .faceta-titulo { margin: 0; font-family: var(--fonte-texto); font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3); } .faceta-ajuda { margin: 0; font-size: .88rem; color: var(--tinta-2); max-width: 70ch; } .faceta-ajuda--silencio { border-top: 1px solid var(--linha); padding-top: .8rem; } .faceta-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; } /* ---------- content-visibility nos grupos do diretório: MEDIDO E RECUSADO (18/09/2026) ---------- O plano de design pedia `content-visibility: auto` nos 73 grupos de /adocao/, alegando 391 ms de thread principal. Medido nas duas versões, em 390px: COM cv:auto SEM domContentLoaded 32 ms 45 ms first-paint 24 ms 52 ms first-contentful-paint 60 ms 52 ms <- PIOR altura da página 13.827 px 8.619 px <- 60% errada Ganha 13 ms de DCL numa página que carrega em 45, piora o FCP, e erra a altura em 60% porque o `contain-intrinsic-size` é estimativa até o primeiro scroll. A altura errada é o que estragou a precisão da âncora: o atalho de bairro passou a aterrissar a 649 px do topo em vez de 372. Trocar precisão de âncora por 13 ms não se paga. Se algum dia o diretório crescer muito, remedir antes de ligar. */ /* ---------- O que saiu da barra pegajosa ---------- */ /* Medido: com ordem, filtros ativos e exigências dentro da barra, cabeçalho + barra somavam 613 px em 1440x900 (68% da tela) porque o bloco de exigências abre sozinho no desktop. Estes blocos rolam com a página; só busca, tipo, espécie e contagem continuam fixos. */ .filtros-extra { margin-top: 1.2rem; display: grid; gap: 1rem; } .filtros-extra .filtros-ordem { margin: 0; } .filtros-extra .filtros-mais { margin: 0; } @media (max-width: 700px) { /* No celular os 7 chips quebravam em quatro linhas e a barra pegajosa chegava a 44% da tela. Uma faixa que rola na horizontal resolve sem esconder nada: os filhos são