...
-- e o resumo do artigo, escrito em markdown como *texto*, sem classe nenhuma. Hoje ele sai do mesmo tamanho e cor do corpo: a entrada do leitor nao se distingue do texto corrido. `:has(> em:only-child)` so pega o paragrafo que e SO o italico; os 4 posts que abrem diferente caem no estilo de paragrafo normal, que e a degradacao correta -- nada quebra. */ .body>p:first-child:has(>em:only-child){ font-family:var(--font-display);font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem); line-height:1.5;color:var(--ink-soft);margin-block:0 2em; padding-left:var(--eixo-editorial);border-left:3px solid var(--gold); } .body>p:first-child:has(>em:only-child)>em{font-style:normal} /* --- 6. NOTA LEGAL (blockquote) ------------------------------------------- MEDIDO: 13 dos 14 posts tem exatamente UM, e nos 13 o conteudo e o MESMO aviso ("Este conteudo e informativo e nao constitui consulta ou aconselhamento juridico individual"). Nenhum e citacao de acordao. Por isso o tratamento e DISCRETO, nao pull-quote: transformar o disclaimer legal num destaque dramatico seria o erro oposto ao atual. MEDIDO: hoje o unico estilo que ele tem e o recuo de 40px do NAVEGADOR -- sem borda, sem fundo, mesma fonte e mesmo tamanho do corpo. Em 360px esses 80px laterais consomem 22% da tela e a citacao cai para ~26 caracteres. */ .body blockquote{ margin:2.4em 0 0;padding:.05px 0 .05px var(--eixo-editorial); border-left:2px solid var(--hair); color:var(--muted);font-size:.94em;line-height:1.55; } .body blockquote p{margin-block:0} /* --- 7. LISTAS ------------------------------------------------------------ MEDIDO: `li{margin:0}` -- itens colados. O post com checklist tem 14seguidos, o que vira um paredao. E `ul{padding-left:40px}` e o default do navegador em px fixos, que nao acompanha a fonte. */ .body ul,.body ol{margin-block:0 var(--vao-paragrafo);padding-left:1.4em} .body li{margin-block:0 .55em} .body li::marker{color:var(--gold);font-weight:600} .body li>ul,.body li>ol{margin-block:.5em 0} /* --- 8. METADADOS --------------------------------------------------------- MEDIDO em 360px: a linha de meta do artigo quebra em 3 linhas / 51px de altura, porque soma mono + uppercase + letter-spacing 1.46px. O mono com tracking e o que faz a string inchar. Aqui a meta do ARTIGO passa a nav font com tracking curto (o kicker de card mantem o mono, que ali funciona como etiqueta curta e e identidade da marca). */ .article-head .meta{ font-family:var(--font-nav);font-size:var(--fs-meta);font-weight:500; letter-spacing:.02em;text-transform:none;line-height:1.5; display:flex;flex-wrap:wrap;gap:.35em .75em;margin-top:1.15rem; } .article-head .meta>*{white-space:nowrap} /* --- 9. CITACAO DE ACORDAO (.juris-cite) ---------------------------------- Ja existia e continua sendo o pull-quote -- este e o lugar da voz do tribunal, agora que o blockquote foi para nota legal. Aspa tipografica como marca d'agua, sem depender de imagem. */ .juris-cite{position:relative;overflow:hidden;border-left:3px solid var(--gold)} .juris-cite::before{ content:'C';position:absolute;top:-.15em;right:.12em; font:700 7rem/1 var(--font-display);color:var(--gold);opacity:.11;pointer-events:none; } .juris-cite strong{line-height:1.25;letter-spacing:-.01em} /* --- 10. LISTAGEM: cartao ------------------------------------------------- MEDIDO: o titulo do cartao herda o sublinhado do navegador -- os 14 cartoes da listagem saem com titulo sublinhado em dourado, que e a assinatura visual de lista de links, nao de vitrine editorial. O sublinhado volta no hover/foco, onde ele significa alguma coisa. MEDIDO: `min-height:250px` deixa cartao de texto curto com ar sobrando; o conteudo passa a mandar na altura e o grid iguala as fileiras. */ .post-card h3 a,.featured h3 a,.featured h2 a{text-decoration:none;color:var(--ink)} .post-card h3 a:hover,.post-card h3 a:focus-visible, .featured h3 a:hover,.featured h2 a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px} .post-card{min-height:0;padding:20px} .post-card h3{font-size:var(--fs-h3);line-height:1.3;margin:.55rem 0 .1rem;text-wrap:balance} .post-card p{font-size:.95rem;line-height:1.55; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* BLOG-LEVA3-01. A meta do cartao adota a forma que a meta do ARTIGO ja usa (seccao 8 acima): nav font, caixa normal, tracking curto. A justificacao e a MESMA que ja esta escrita la -- mono + maiusculas + tracking incha a string -- e ela valia para os dois sitios desde sempre; so um foi corrigido. ⭐ O ponto nao e o tamanho, e a SEPARACAO DE PAPEIS: o kicker identifica (tribunal, tema, especie) e decide o clique; a meta so situa (data, tempo de leitura) e nunca decide nada. Renderizados quase iguais, competiam entre si e com o titulo. Fica UM tratamento mono/maiusculas por cartao. */ .post-card .meta{ padding-top:14px;font-family:var(--font-nav);font-size:var(--fs-meta); font-weight:500;letter-spacing:.02em;text-transform:none; color:var(--tertiary);line-height:1.5; } .post-grid,.results-grid{gap:20px} /* Destaque: hoje usa o MESMO fundo e a MESMA borda do cartao comum, so que maior -- nada nele diz "leia este primeiro". Um fio dourado no topo e uma borda de acento resolvem sem introduzir cor nova. */ .featured{border-color:color-mix(in srgb,var(--gold) 34%,transparent);position:relative;overflow:hidden} .featured::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--gold),transparent 72%)} /* --- 11. ESTADO VAZIO ----------------------------------------------------- Existe (.empty) mas e so uma caixa tracejada com texto centrado. Ganha hierarquia interna para que "nada encontrado" nao pareca "quebrou". */ .empty{padding:clamp(40px,7vw,64px) 24px;background:var(--card)} .empty strong{display:block;font:600 1.15rem/1.35 var(--font-display);color:var(--ink);margin-bottom:.5rem} .empty p{max-width:46ch;margin:0 auto;color:var(--muted)} /* --- 11b. CTA E NAVEGACAO ENTRE POSTS ------------------------------------- MEDIDO apos estreitar a coluna: o botao do CTA quebrou em duas linhas ("Pesquisar no / IAJUS"). O `.cta` e flex com space-between e o link nao declarava `flex`, entao encolheu junto com a caixa. `flex:none` + `white-space:nowrap` prendem o rotulo numa linha -- o texto a esquerda e que cede, que e a ordem certa de prioridade. */ .cta a{flex:none;white-space:nowrap} .cta strong{display:block;font:600 1.05rem/1.4 var(--font-display);color:var(--ink)} /* A navegacao anterior/proximo com titulos longos numa coluna estreita: o alinhamento a direita do segundo cartao deixava linhas raggeadas dos dois lados. Rotulo mantem a direcao, o titulo alinha sempre a esquerda. */ .post-nav a:last-child{text-align:left} .post-nav a:last-child .nav-direction{text-align:right} .post-nav a{gap:.4rem;min-height:0;padding:16px 18px} .post-nav a strong,.post-nav a span:not(.nav-direction){font:600 .95rem/1.35 var(--font-display);color:var(--ink)} /* --- 12. RESPONSIVO ------------------------------------------------------- O breakpoint editorial de 1080px ja existe e NAO se toca (o comentario do STYLE explica por que ele e deliberadamente separado do de 1329px do header). Aqui so o que e proprio da camada editorial. */ @media(max-width:640px){ .body blockquote,.body>p:first-child:has(>em:only-child){padding-left:14px} .article-head .meta{gap:.3em .6em} .post-card{padding:18px} .juris-cite::before{font-size:5rem;opacity:.09} } /* --- 13. IMAGEM DE CORPO: reserva de espaco ------------------------------ O corpo do post nao tem imagem hoje (MEDIDO: 0 de 14 posts assados tem dentro de .body -- controle positivo: o mesmo regex casa 14 vezes na LISTAGEM, onde as capas existem). Mas markdown.js:107 JA emite
e o suporte a  entrou hoje, logo a primeira imagem de corpo chega sem `width`/`height` e desloca o texto ao carregar. `aspect-ratio` com `height:auto` reserva a caixa ANTES do byte chegar, o que remove o deslocamento sem exigir que o autor saiba a dimensao. LIMITE HONESTO: 16/9 e um palpite de enquadramento, nao a proporcao real do arquivo. Fica correto para o caso comum e recorta o resto por `object-fit`; a solucao completa e o gerador estampar width/height reais no HTML -- proposta como funcionalidade F3 no relatorio. */ .body img{aspect-ratio:16/9;object-fit:cover;width:100%;border-radius:10px;background:var(--bg-3);margin-block:.6em} .body img[width]{aspect-ratio:auto} /* se o gerador estampar, a real vence */ /* ===================== BLOG-LEVA2-01 =================================== O blog continuava a parecer amador por tres razoes que a leva anterior nao tocou, porque ela era de TIPOGRAFIA e estas sao de IMAGEM e de GRELHA. 1. O titulo aparecia DUAS vezes em cada cartao: queimado no bitmap da capa, em baixa resolucao e cortado a meio, e outra vez em texto logo abaixo. Medido nas 14 capas: o texto queimado comeca sempre em y=396 de 630. ⛔ A garantia e uma RAZAO, nunca uma altura. Com `object-fit:cover`, uma caixa mais alta que 396/1200 = 0,330 passa a limitar pela ALTURA e mostra a imagem inteira -- titulo incluido. Qualquer caixa de capa nova confere contra 0,330. No primeiro prototipo desta leva eu proprio quebrei isto: um cartao horizontal a 1200/744 (razao 0,62) trouxe o texto todo de volta. 2. A pagina do ARTIGO nao tinha imagem nenhuma. Medido: 0 de 15 posts com capa no topo, 14 de 15 sem qualquer imagem no corpo. A capa existia, era servida na listagem, e o destino era uma parede de texto. 3. Duas das tres secoes mostravam um cartao solitario numa linha de 1088px -- 698px de vazio -- porque a grelha e de 3 colunas fixas e as secoes tem 10, 2 e 1 artigo. Vazio de molde le-se como pagina por acabar. */ /* BLOG-LEVA2-FIX1: `object-fit:cover` VIVE AQUI, junto da razao e da ancora. Ele existe numa regra ~285 linhas acima, mas aquela so alcanca `.featured img` e `.post-card img`; `.capa-artigo img` e seletor novo e ficou com o default `fill`, que ESTICA em vez de cortar -- a capa do artigo mostrou os 1200x630 inteiros achatados, com o titulo queimado de volta e a ilustracao distorcida, em 13 posts e em todos os viewports. ⛔ Nao separar estes tres: a razao 1200/372 so descreve o que aparece SE o ajuste for `cover`. Separados, a regra do corte parece completa e nao e, e a proxima caixa de capa herda o mesmo buraco em silencio. */ .featured img,.post-card img,.capa-artigo img{aspect-ratio:1200/372;object-fit:cover;object-position:top} /* Destaque: faixa no topo. Cortada, a capa lateral virava uma tira de 112px numa coluna de 190px, com vazio por baixo -- o corte resolvia a duplicacao e criava um buraco. Largura inteira devolve ao destaque a escala que o nome promete. */ .featured{grid-template-columns:minmax(0,1fr);gap:24px} .featured>picture{align-self:stretch;order:-1} /* Secao que nao enche a linha de 3 colunas ajusta as colunas em vez de deixar vao. `sizes` acompanha no gerador; sem isso o cartao de 1047px amplia a variante de 370w em 2,83x, que troca um vao visivel por uma imagem borrada. */ .post-grid[data-cards="1"]{grid-template-columns:minmax(0,1fr)} .post-grid[data-cards="2"]{grid-template-columns:repeat(2,minmax(0,1fr))} /* Capa do artigo: abre a peca logo abaixo do cabecalho, antes do indice. Fica DEPOIS do
de proposito -- a capa repete o titulo em imagem, entao poe-la antes empurraria o titulo real para baixo da dobra no telemovel sem acrescentar informacao. */ .capa-artigo{margin:26px 0 32px;padding:0} .capa-artigo img{display:block;width:100%;height:auto;border-radius:12px;background:var(--bg-3)} /* Figura de dados: ate aqui era `
` com a legenda num paragrafo em italico ao lado, ligada por proximidade -- ligacao nenhuma para um leitor de ecra. E o respiro era 10,2px contra os 30,6px entre paragrafos: a figura ficava mais colada aos vizinhos do que dois paragrafos entre si, o mesmo defeito de ritmo que a leva anterior corrigiu no texto corrido. */ .body figure{margin:32px 0;padding:18px;background:var(--bg-2);border:1px solid var(--hair);border-radius:12px} .body figure img{display:block;width:100%;height:auto;margin:0;border-radius:8px;aspect-ratio:auto} .body figcaption{margin-top:14px;font-size:.86rem;line-height:1.5;color:var(--muted)} @media(max-width:760px){.capa-artigo{margin:20px 0 24px} .body figure{padding:12px;margin:26px 0}} /* ===================== BLOG-FUNCIONALIDADES-01 ========================= Indice do artigo + relacionados. Reusa os tokens da camada editorial (--fs-meta, --eixo-editorial, --gold, --hair) -- zero token novo. */ /* O cabecalho e' `position:sticky;top:0` (linha .site-header), entao um
alvo de ancora encostaria POR BAIXO dele. `scroll-margin` e a unica forma que nao exige medir a altura em JS; o valor cobre a barra medida (~64px) mais uma folga de respiro. Sem isto o indice leva o leitor a um titulo invisivel, que e pior do que nao ter indice. */ .body h2{scroll-margin-block-start:5.5rem} .sumario{ margin:0 0 2.2em;padding:1rem 1.15rem 1.1rem; border:1px solid var(--hair);border-left:3px solid var(--gold);border-radius:8px; background:color-mix(in srgb,var(--card) 70%,transparent); } .sumario-titulo{ margin:0 0 .55rem;font-family:var(--font-nav);font-size:var(--fs-meta); font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted); } .sumario ol{margin:0;padding:0;list-style:none;counter-reset:sumario} .sumario li{counter-increment:sumario;margin:0;line-height:1.45} .sumario li+li{margin-top:.4rem} .sumario a{ display:flex;gap:.55rem;align-items:baseline; color:var(--ink-soft);text-decoration:none;font-size:.95rem; padding-block:.15rem; } /* Alvo de toque. DECISAO DECLARADA, nao descuido: fica no piso AA (WCAG 2.2 SC 2.5.8, 24px) e NAO no piso AAA (SC 2.5.5, 44px) que o `.back-link` da SPA usa. Motivo medido: sao ate 7 itens, e 7x44px + titulo + folgas dariam ~386px de indice num viewport de 780px -- metade da primeira tela so para o sumario, empurrando o artigo para fora dela. 34px passa o AA com folga e cabe. Se o dono preferir AAA, o valor a mexer e este e o custo e a altura acima. */ /* As DUAS condicoes, de proposito. `pointer:coarse` e a pergunta certa (dedo, nao largura), mas nao e verificavel no arnes headless -- este Chromium reporta ponteiro FINO mesmo a 360px, entao um teste que dependesse so dela seria um verde incapaz de ficar vermelho. `max-width` e provavel aqui e cobre o caso real de telefone; a de ponteiro cobre o notebook com toque, que a largura nao alcanca. Erram para o lado seguro: alvo maior do que o preciso. */ @media(max-width:640px),(pointer:coarse){.sumario a{padding-block:.42rem}} .sumario a::before{ content:counter(sumario);flex:none;min-width:1.35em; font-family:var(--font-nav);font-size:.8em;font-weight:600;color:var(--gold); } .sumario a:hover,.sumario a:focus-visible{color:var(--ink);text-decoration:underline; text-decoration-color:var(--gold);text-underline-offset:3px} .relacionados{margin:2.6em 0 0;padding-top:1.4rem;border-top:1px solid var(--hair)} .relacionados ul{margin:.9rem 0 0;padding:0;list-style:none;display:grid;gap:.65rem} .relacionados a{ display:block;padding:.75rem .9rem;border:1px solid var(--hair);border-radius:8px; background:var(--card);text-decoration:none; transition:border-color .15s ease,transform .15s ease; } .relacionados a:hover,.relacionados a:focus-visible{ border-color:color-mix(in srgb,var(--gold) 45%,transparent); } /* BLOG-LEVA3-01. ⛔ Defeito meu da leva 1: esta etiqueta nasceu com uma TERCEIRA forma -- Inter maiusculas com tracking curto -- ao lado do mono do kicker e da sentenca da meta. Tres formas para "etiqueta pequena", nenhuma errada sozinha. Passa a herdar o tratamento do kicker, que e o sistema de etiqueta desta folha; a unica coisa que continua propria e o espacamento. */ .rel-contexto{ display:block;font:600 .76rem/1.4 var(--font-mono);letter-spacing:.12em; text-transform:uppercase;color:var(--tertiary);margin-bottom:.2rem; } .relacionados strong{ display:block;font:600 .98rem/1.35 var(--font-display);color:var(--ink);text-wrap:balance; } @media(prefers-reduced-motion:reduce){.relacionados a{transition:none}} @media(max-width:640px){ .sumario{padding:.9rem 1rem} .relacionados a{padding:.7rem .8rem} } /* ===================== BLOG-LARGURA-01 (2026-08-09) ==================== Ordem do operador, verbatim: «ta muito estreito, podendo ser mais largo, cara, pq isso aqui e no computador, pow, temos que ser responsivo». MEDIDO na pagina servida (blog/quem-limpa-a-escola..., 2026-08-09), ANTES: em 1920px de viewport a coluna do artigo ocupa 704px e sobram 1201px de vazio -- 63% da tela. Em 1440: 704 contra 721 de vazio. Em 1280: 704 contra 561. A coluna e a MESMA em qualquer tela grande, porque `min(704px,100%)` trava a caixa e alargar o monitor nao dava um pixel. E o mesmo modo de falha que o comentario do header ja documentava em 2026-08-07, uma linha acima nesta folha, agora do lado do corpo editorial. ⛔ O CONSERTO NAO E ALARGAR O TEXTO ATE ENCHER A TELA. Medido hoje, 592px ja entregam 68,1 caracteres por linha (bloco 1); 1200px entregariam ~138, que e ilegivel para texto corrido. Quem "conserta" o estreito esticando o paragrafo troca uma queixa por outra pior, e a segunda ninguem sabe nomear. O texto cresce POUCO e com teto medido (592 -> 640px, ate 73,6 caracteres). ⭐ Quem ganha a largura sao os DADOS. Medido: o grafico deste post tem 1388px de largura natural e era servido a 555px -- 40%. Os rotulos de eixo e os numeros eram reduzidos a 40% num monitor onde sobravam 1201px vazios. Este post e "em numeros" e o numero era a coisa menos legivel da pagina. COMO, sem tocar no HTML (o gerador e de outro dono): sangria simetrica por margem negativa. A margem se calcula sozinha e vale ZERO quando nao ha o que ganhar -- nao precisa de media query e nao tem salto: sangria = max(0px, (trilho - medida) / 2) trilho = min(--dados-max, 100vw - 2 gutters) Quando a tela e estreita, `100vw - 2 gutters` fica MENOR que --measure, a subtracao da negativo, o `max(0px,...)` zera e o bloco volta a coincidir com a coluna. O eixo unico do bloco 2 fica intacto no telemovel, que era a condicao para poder mexer nisto. ⛔ POR QUE ISTO NAO PODE GERAR ROLAGEM HORIZONTAL, e nao e torcida: o trilho e limitado a `100vw - 2 * --gutter`, e o util e `100vw - barra de rolagem`. Medido neste arnes: 1920 de viewport contra 1905 de util, logo a barra pesa 15px. O gutter minimo e 20px (clamp), entao 2 gutters >= 40px > 15px em QUALQUER largura -- a folga que reservamos e sempre maior que a barra que o `100vw` ignora. A prova esta na aritmetica, mas o controle negativo a 390px foi medido na mesma. ⛔ O QUE FICA DE FORA DO TRILHO, de proposito: `.juris-cite` (a voz do tribunal e editorial, nao dado -- e o bloco 9 desta folha ja a define como o pull-quote da coluna de texto), `.cta`, `.post-nav` e `.sumario`. Se tudo alarga, "largo" deixa de significar "isto aqui e dado" e vira ruido. */ :root{ /* Teto do trilho de dados. Nao e o --maxw 1200 da casca: 1040 deixa o grafico a 1004px dentro do padding de 18px da figura, 72% da largura natural de 1388 (contra 40% antes), e ainda guarda respiro lateral numa tela de 1280. Acima de 1040 uma figura comeca a ler-se como banner. */ --dados-max:1040px; /* ⛔ TERCEIRO TERMO, `--maxw`, e ele e para a DEC-079 (unificacao no apex): hoje `.article-page` e filha direta do e nada acima dela limita largura — o trilho so responde ao viewport. Quando a fatia 1 vestir o post com a casca da aplicacao, ele passa a viver dentro de `.wrap` (`saas/app/src/app.css:205`), que e `max-width:var(--maxw)` com o MESMO `--gutter` daqui (`saas/app/src/lib/styles/brand-tokens.css:112-113`) — 1200 - 112 = 1088px de conteudo. O trilho de 1040 cabe nos 1088 com 48px de folga, mas cabia por ACIDENTE: quem subisse `--dados-max` para 1100 furaria a casca sem nada ficar vermelho. Com o termo, a casca passa a ser um limite DECLARADO e o teto degrada sozinho. ⭐ Medido: hoje isto e no-op exato (1040 < 1088 em toda largura), logo entra sem mudar um pixel — guarda que so age quando a casca chegar. */ --sangria-dados:max(0px,(min(var(--dados-max),100vw - 2 * var(--gutter),var(--maxw) - 2 * var(--gutter)) - var(--measure)) / 2); } /* `.capa-artigo` entra NOMEADA: ela e um
filho de, nao de `.body`, entao `.body figure` nunca a alcanca (medido). O corte que esconde o titulo queimado na capa e uma RAZAO (`aspect-ratio:1200/372` = 0,310, abaixo do limite 0,330 do bloco BLOG-LEVA2), e razao nao depende da largura -- alargar a capa NAO reabre aquele defeito. */ /* Imagem solta de markdown (``) chega como ` `. Quem recebe o trilho e o PARAGRAFO, nao a imagem: margem negativa num elemento inline replaced depende de como a linha e construida, e o paragrafo e um bloco -- comportamento previsivel. `:only-child` garante que so pega o paragrafo que E a imagem; paragrafo com texto e imagem junto continua na coluna, que e a degradacao certa. */ .body figure, .body>pre, .body>table, .body>p:has(>img:only-child), .capa-artigo{margin-inline:calc(-1 * var(--sangria-dados))} /* Tabela: hoje NAO existe nenhuma no blog (medido 2026-08-09: zero `
` nos 14 posts assados), entao esta regra e defensiva e foi validada com uma tabela SINTETICA injectada no DOM, nunca com conteudo real -- quem trouxer a primeira tabela confere de novo. Larga demais para o trilho, ela rola DENTRO de si em vez de empurrar a pagina. ⚠️ LIMITE HONESTO, e ele e de acessibilidade: uma regiao que rola so e alcancavel pelo teclado se for focavel, e `tabindex` e atributo de HTML -- CSS nao o cria. Enquanto o gerador nao envolver a tabela em `
`, quem navega so por teclado NAO alcanca a parte escondida. Esta na secao de achados do relatorio, com o diff proposto para o dono do gerador. ⛔ DEFEITO MEU, apanhado na medicao de 2026-08-09 e registrado porque a forma errada e mais plausivel que a certa: a primeira versao desta linha era `width:max-content;max-width:100%`. Medido, ela punha a tabela em x=432 (a borda esquerda do trilho, porque a margem negativa ja tinha aplicado) com apenas 635px de largura -- deslocada para o trilho e presa a coluna ao mesmo tempo. `100%` num bloco com margem negativa continua a resolver contra o BLOCO CONTENDOR, nunca contra a caixa alargada; e `max-content` desliga o preenchimento do trilho. `width:auto` num bloco toma a largura do contendor MAIS as margens negativas, que e o que se quer. */ .body table{display:block;width:auto;overflow-x:auto;border-collapse:collapse} /* A figura ja tem fundo e borda proprios; no trilho largo o respiro interno cresce junto, senao a imagem encosta na moldura numa caixa de 1040px. */ @media(min-width:1080px){.body figure{padding:22px}} [data-theme=light]{color-scheme:light;--bg:#faf8f2;--bg-2:#f3f0e7;--bg-3:#ebe7da;--ink:#1a1f2e;--ink-soft:#2c3242;--text:#2c3242;--muted:#555b6b;--tertiary:#5f6573;--gold:#765d16;--gold2:#6f570f;--gold-soft:#a07f1c;--hair:rgba(26,31,46,.12);--rule:rgba(138,109,26,.35);--card:rgba(26,31,46,.035);--stf:#92580a;--stj:#4a90c0;--tst:#3f9a79;--guia:#837fe3;--produto:#b673b6;--autoral:#a34a38} [data-theme=light] .site-header{background:rgba(250,248,242,.78)} [data-theme=light] .search input{background:#fff;color-scheme:light}