/* Agência Mestre · ajustes que só existem no WordPress (carregado depois do site.css, que é cópia sem edição do protótipo).
   Nenhuma regra muda medida, fonte ou cor do protótipo: elas levam o desenho do protótipo até a marcação que o
   Gravity Forms e o conteúdo antigo geram. Sem max-width em texto (regra do dono). Regras de modelo: assets/wp-<modelo>.css.
   Exceções da Rodada 3, por decisão do Fabio (26/10/2026): o ritmo compacto do .form-compact (seção 1, item 1) e o padrão
   de hover dos links (seção 1e, item 13). */

/* ---------- 1. GRAVITY FORMS (spec 00, 4.1) ---------- */
/* campos ocultos (UTM) e campo-isca do anti-spam: sem o CSS do GF viram linhas vazias, e a isca fica visível */
.gform_wrapper .gform_hidden,.gform_wrapper .gfield--type-hidden,.gform_wrapper .gfield_visibility_hidden,.gform_wrapper .gform_validation_container{display:none!important}
/* campos de plugins que não estão instalados ou ativos (GA Campaign do formulário 4; os dois reCAPTCHA órfãos do 25): o GF
   imprime só o rótulo ou um li vazio na grade. Spec 09, P4. A classe vem do gform_field_css_class da base, só nos formulários
   de conversão: o reCAPTCHA órfão do 15 e da cópia dele (Serviço) fica como hoje */
.gform_wrapper .gfield--orfao{display:none!important}
/* texto só para leitor de tela que o GF gera (a classe do protótipo é .sr-only) */
.gform_wrapper .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* CAPTCHA em linha inteira no formulário de duas colunas. Pelo tipo, não pelo --width-full que o GF também põe nele */
.gform_wrapper .gfield--type-captcha,.gform_wrapper .gfield--type-turnstile{grid-column:1/-1}
/* "(obrigatório)": quando o GF aninha dois .gfield_required, o espaço do ::before entraria duas vezes */
.gform_wrapper .gfield_required .gfield_required::before{content:none}
/* placeholder do select em cinza, a mesma cor do .ginput_container select:invalid do protótipo (o GF não põe required no select) */
.ginput_container select:has(>option.gf_placeholder:checked){color:var(--grey)}
/* CAPTCHA no cartão de duas colunas (a partir de 640px): o subgrid do site.css dá três linhas a cada .gfield (rótulo, campo,
   erro); o CAPTCHA não tem rótulo visível nem linha de erro, e as duas folgas sobravam embaixo do quadro (96px para 78px).
   Vale para a Home, o Serviço e o Case */
@media (min-width:640px){.form-card .gform_wrapper .gfield:is(.gfield--type-captcha,.gfield--type-turnstile){display:block;grid-row:auto}}
/* Turnstile invisível (data-appearance="interaction-only", inc/base/gravity-forms.php; Rodada 3, item 1): o li sai do fluxo da
   grade enquanto não tem nada para mostrar (contêiner de 0px), sem somar o vão entre linhas acima do botão. Nunca display:none:
   o add-on só monta o widget num contêiner visível (gform.tools.visible) e, sem widget, todo envio falha. Quando a Cloudflare
   pede interação, o tema.js marca o li (.gfield--turnstile-visivel) e ele volta ao fluxo, entre o último campo e o botão; com
   erro de validação, o GF põe .gfield_error e ele também volta. Sem ResizeObserver (navegador muito antigo), o quadro que
   aparecer cobre o pé do último campo, por cima. O position:relative vale para todo .gform_fields (sem :has(): num navegador
   sem :has() o li ficaria preso à seção e sairia do cartão); nada mais muda na tela */
.gform_wrapper .gform_fields{position:relative}
.gform_wrapper .gfield--type-turnstile:not(.gfield--turnstile-visivel):not(.gfield_error){position:absolute;inset-inline:0;bottom:0;margin:0}
/* o snippet 68878 do WPCode ("Correção da sobreposição do cloudflare nos formulários", de 06/2025, em todo o site) põe
   li.gfield--type-turnstile{z-index:-1!important;position:relative}: aqui o li ficaria atrás do fundo do cartão, e o quadro
   da Cloudflare, quando aparecesse, não poderia ser visto nem clicado. O tema devolve o z-index normal (só com !important,
   para vencer o do snippet); o position é o das regras acima */
.gform_wrapper .gfield.gfield--type-turnstile{z-index:auto!important}
/* abaixo de 340px a coluna fica mais estreita que o quadro (300px de largura mínima): ele diminui como o reCAPTCHA */
@media (max-width:339px){.gform_wrapper .cf-turnstile{transform:scale(.94);transform-origin:0 0}}
/* reCAPTCHA v2 visível (só em formulário que ainda tiver reCAPTCHA; os de orçamento em uso passaram ao Turnstile na
   Rodada 3): o script do Google só entra no primeiro uso do formulário (tema.js). O quadro tem 78px; o lugar fica guardado
   desde o início, para o botão não descer quando ele aparece */
.gform_wrapper .ginput_recaptcha:not([data-size=invisible]){min-height:78px}
/* abaixo de 340px a coluna dos campos fica mais estreita que o quadro (304px fixos; 288px a 320): o quadro diminui para a
   largura da coluna e não invade o respiro do cartão (campos alinhados). O lugar guardado (min-height) continua o mesmo */
@media (max-width:339px){.gform_wrapper .ginput_recaptcha:not([data-size=invisible])>div{transform:scale(.94);transform-origin:0 0}}
/* celular baixo (320×568, iPhone SE da 1ª geração) com o reCAPTCHA de caixa no formulário do topo (78px; decisões G1 e 09-D1):
   o protótipo mediu sem o CAPTCHA, e o botão ficava abaixo da primeira dobra (Serviço 14px, Orçamento 14px, Home 65px). Os
   respiros entre o H1 e o cartão e dentro dele diminuem mais um passo depois dos "celulares baixos" do site.css, e o quadro
   do reCAPTCHA vai a 90% (o lugar guardado acompanha). Fonte, cor, campos e o título do formulário não mudam. Vale para
   todo topo .svc-hero com o #orcamento (Home, Serviço, Orçamento); a partir de 360×640 nada muda */
@media (max-width:639px) and (max-height:600px){
  .svc-hero:has(#orcamento .gfield--type-captcha) .svc-hero__grid{gap:.5rem}
  .svc-hero #orcamento.form-card.form-compact:has(.gfield--type-captcha){padding-top:.75rem;padding-bottom:.75rem}
  .svc-hero #orcamento:has(.gfield--type-captcha) .form-head{margin-bottom:.5rem}
  .svc-hero #orcamento:has(.gfield--type-captcha) .gform_fields{gap:.375rem}
  .svc-hero #orcamento:has(.gfield--type-captcha) .gform_footer{margin-top:.5rem}
  .svc-hero #orcamento .ginput_recaptcha:not([data-size=invisible]){min-height:0;height:71px}
  .svc-hero #orcamento .ginput_recaptcha:not([data-size=invisible])>div{transform:scale(.9);transform-origin:0 0}
}
/* formulário compacto (.form-compact: topo e fim da Home, do Serviço, do Case, de Clientes, de Serviços e da Página; Rodada 3,
   item 1 do Fabio: "precisa ser compacto"). Fora o cartão de conversão (.form-conv, Orçamento e Contato), que só ganha o
   Turnstile e fica com o ritmo do protótipo (spec 15, 2.5). (1) Os controles em bloco: inline-block,
   cada um somava o vão da linha de base do contêiner (6px por linha e 13,6px no textarea a 1366). (2) A partir de 640px,
   onde os rótulos aparecem: vão entre linhas de 12px para 10px, rótulo de 13px com 16,9px por linha (era 20,8: o rótulo de
   2 linhas, "Qual é o nome da sua empresa? (obrigatório)", deixava uma linha vazia sobre o rótulo do lado) e 4px até o
   campo, e o textarea com 2 linhas visíveis (60px, o respiro interno dos outros campos). O subgrid do site.css continua
   alinhando os campos da mesma linha pela base (rótulo align-self:end). Fonte, cor e texto não mudam */
.form-compact:not(.form-conv) .ginput_container :is(input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea){display:block}
@media (min-width:640px){
  .form-compact:not(.form-conv) .gform_fields{row-gap:.625rem}
  .form-compact:not(.form-conv) .gfield_label{line-height:1.3;margin-bottom:.25rem}
  .form-compact:not(.form-conv) .ginput_container textarea{min-height:3.75rem;height:3.75rem;padding:.5rem .8rem}
}
/* campo com erro: a borda vermelha de 2px do site.css (.gfield_error input, 0,1,1) perdia para a regra do campo, mais
   específica (.ginput_container input[type=text], 0,2,1): só o select e o textarea saíam vermelhos, os campos de texto, e-mail
   e telefone ficavam com a borda de 1px. Mesma regra, com o peso do campo. Vale para todo formulário com a marcação do GF,
   inclusive o de comentários. Deve voltar ao site.css (G6) */
.gfield_error .ginput_container :is(input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],select,textarea){border-color:var(--erro);border-width:2px}
/* resumo do erro no envio: o GF põe a frase num <h2>, que pegava o tamanho e o peso de título (22,5px, 700) em vez do texto
   da caixa (fs-small, 500). Deve voltar ao site.css (G6) */
.gform_validation_errors .gform_submission_error{font:inherit;letter-spacing:inherit;color:inherit;margin:0}

/* newsletter (componente único: template-parts/componentes/newsletter.php, classe .newsletter-form). Formulário do GF só com
   e-mail (opção form_newsletter, decisão R5): o desenho é o do site.css (seção 7); aqui só o que o GF acrescenta.
   Mensagem do envio sem redirecionamento, se a confirmação mudar no GF: o texto no lugar do formulário */
.newsletter-form .gform_confirmation_message{font-size:var(--fs-small)}

/* ---------- 1b. TRILHA ---------- */
/* celular: o último item sem link (<span aria-current>, variante 'nav'/'ultimo_texto' da trilha: Página, Política, Mapa,
   Categoria e arquivos) ganha o mesmo corte com reticências que o site.css dá ao link (seção 9). Só o corte: o span já é
   bloco (item flex do li) e fica centrado nos 32px do li com a altura de linha do texto, como no protótipo (com
   line-height 2rem o texto descia 1px em relação a "Início" a 320 e 375). Deve voltar ao site.css */
@media (max-width:639px){.crumbs li:last-child>span[aria-current]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* celular, trilha de 4 itens ou mais que não cabe nem com o último item zerado (nome longo no meio: Início / Blog /
   Inteligência Artificial / …, a 320px): o penúltimo também encolhe, com reticências, em vez de passar da margem e ser
   cortado na borda da tela. O fator enorme do último faz ele encolher primeiro (o penúltimo só depois que o último chega
   a zero). O corte fica no <span> de dentro do link: o link continua o inline-flex do site.css (centrado, 2rem de altura
   mínima) e o texto fica na linha de base dos outros itens. Trilha de 2 ou 3 itens (os protótipos): como no site.css,
   só o último é cortado */
@media (max-width:639px){
  .crumbs li:last-child{flex-shrink:1000000}
  .crumbs li:nth-last-child(2):nth-child(n+3){flex:0 1 auto;min-width:0}
  .crumbs li:nth-last-child(2):nth-child(n+3)>a{min-width:0}
  .crumbs li:nth-last-child(2):nth-child(n+3)>a>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---------- 1c. CABEÇALHO ---------- */
/* o item 59342 do menu se chama "Cases de Sucesso" no banco (o protótipo foi medido com "Cases"; spec 00, 3.3): entre 1100 e
   1129px o menu quebrava em duas linhas ("Cases de Sucesso", "Materiais Ricos" e o botão). Só nessa faixa, um respiro menor
   entre os itens. Com o item renomeado no painel, esta regra pode sair */
@media (min-width:1100px) and (max-width:1129.98px){.nav a,.nav button{padding-inline:.5rem}}
/* botão "Solicitar orçamento" do cabeçalho (a partir de 1100px) na abertura de página com formulário ou chamada de orçamento
   ([data-quote-form], [data-quote-cta]): o site.js só põe o body.form-in-view quando o IntersectionObserver dele responde,
   depois da primeira pintura, e o botão ficava à vista junto com o envio do formulário do topo por 8 a 11 quadros (uns 120 a
   190 ms; mais, com o site.js fora do cache), e depois saía com o fade de 0,25s (nunca dois botões de orçamento na mesma
   vista; rodada 1 dos conferentes das 84 páginas de serviço). Aqui ele começa escondido até o tema.js pôr o body.cab-pronto,
   depois da primeira resposta do observador do site.js; a classe cab-agora tira o fade nessa troca (sem formulário na tela,
   o botão aparece pronto). Ao entrar um formulário na tela o botão sai sem fade; a volta continua com o fade do site.css.
   Sem o site.js, a base tira o .js do <html> no load e o botão volta. Navegador sem :has(): como antes */
.js body:has([data-quote-form],[data-quote-cta]):not(.cab-pronto) .header-actions .btn{opacity:0;visibility:hidden;pointer-events:none;transition:none}
.cab-agora .header-actions .btn,.form-in-view .header-actions .btn{transition:none}
/* chamada fixa do celular e do tablet (.sticky-cta, abaixo de 1100px): quando um formulário entra na tela, o site.js tira o
   is-on e ela descia com o deslize de 0,4s do site.css; rolando para cima, o "Solicitar orçamento" dela ficava à vista junto
   com o envio do formulário do topo ou do fim por 2 a 6 quadros (rodada 2 dos conferentes das 84 páginas de serviço; nunca
   dois botões de orçamento na mesma vista). Ela sai na hora, como o botão do cabeçalho acima; a entrada (is-on) continua com
   o deslize do site.css */
.sticky-cta:not(.is-on){transition:none}

/* ---------- 1d. COMPONENTES ---------- */
/* .link-arrow: a seta (svg de 1em, item flex) encolhia quando o texto do link quebra em duas linhas (nome de autor longo no
   post, "Todos os artigos de Agência Mestre": 11×15px a 320 e 14×15 a 375). Fica com 1em, como no protótipo, com o
   flex:none que o site.css já dá às setas do .btn, do .case-big__go e do .destaque__go. Link de uma linha: nada muda.
   Deve voltar ao site.css */
.link-arrow svg{flex:none}
/* .pager: reticência só do celular. Abaixo de 1024px o site.css esconde os .pager__far; quando um deles era o único número
   entre dois que ficam (página 5: o 2 entre 1 e 3; o 42 entre 41 e 43 na página 39 de 43), a lista do celular saltava sem
   reticência ("1 3 4 5 6 7 … 43"). A base (mestre_paginacao_numeros) põe ali um .pager__gap com esta classe, que some a
   partir de 1024px, onde o número aparece. Desktop: nada muda */
@media (min-width:1024px){.pager__gap--celular{display:none}}
/* rodapé: palavra com hífen dos links das colunas num span.nw (mestre_menu_rodape()), para não partir no hífen ("E-" /
   "commerce" no "Ebook: Inbound Marketing para E-commerce" a 320, 768, 1366 e 1440; rodada 2 dos conferentes das 84 páginas
   de serviço). O .svc-novo .nw do wp-servico.css não alcança o rodapé, que fica fora do main. Texto e fonte não mudam */
.site-footer .nw{white-space:nowrap}

/* ---------- 1e. LINKS: PADRÃO DE HOVER (Rodada 3, item 13) ---------- */
/* pedido do Fabio de 26/10/2026: um hover só para os links de texto, "o formato que deixa uma linha amarela, que inclusive
   está nos links do rodapé" (spec 16). O padrão: sublinhado amarelo de 2px a .3em do texto; o texto apagado em repouso vai
   para a cor cheia (papel no escuro, tinta no claro), como no rodapé; link de texto não desliza. A linha só existe com
   mouse (@media (hover:hover)): no toque não fica linha presa depois do toque. Em repouso nada muda; o foco do teclado
   continua com o contorno de sempre. O que o site.css punha fora do hover:hover e o padrão tira (o amarelo do nome da área
   e o deslizar dos itens no menu de serviços) sai também fora dele. Já estavam no padrão e não mudam: .area, .smap, FAQ
   (pergunta), .case-facts, .mat__title, .bvc-lista, a.channel, .destaque__go e o .bento__link do Contato (linha amarela
   fixa de 2px), .hero-text e .author-hero__role (o .area e o .case-facts só perdem a linha presa no toque, abaixo). Ficam
   como estão, de propósito: o link no meio do texto (.entry a: linha cinza e marca-texto; o .comments__text a, que só
   tinha a linha, ganha aqui o mesmo marca-texto), botões e cartões inteiros. Diferente do protótipo por decisão do Fabio;
   deve voltar ao site.css e ao protótipo */
@media (hover:hover){
  /* menu de cima: clareia (site.css) e ganha a linha. O item da página atual e o Serviços aberto seguem sem linha em repouso */
  .nav a:hover,.nav button:hover,
  /* menu de serviços: nome da área e itens */
  .mega__title a:hover,.mega li a:hover,
  /* menu do celular (com mouse, abaixo de 1100px), menos o botão */
  .drawer a:not(.btn):hover,.drawer summary:hover,
  /* trilha, autoria no topo do post, sumário */
  .crumbs a:hover,.byline a:hover,.toc a:hover{
    text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:.3em}
  /* números do topo sem cliente (Home: "18 anos de mercado"; Empresa: os quatro números): a linha no rótulo da métrica,
     como o nome do cliente nos outros. Regra própria: num navegador sem :has() ela cai sozinha, sem levar as de cima */
  .hero-proof a:not(:has(.hero-proof__client)):hover .hero-proof__metric{
    text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:.3em}
  /* Empresa: o rótulo cinza dos números (.hero-proof--stat) vai para o papel, como o nome do cliente (site.css) */
  .hero-proof--stat a:hover .hero-proof__metric{color:var(--paper)}
  /* nome do cliente nos números com case (Serviço): a linha amarela já existia, com a espessura automática da fonte (~1px)
     e a .25em; passa aos 2px e à .3em do padrão, os mesmos da métrica sem cliente (como no rodapé) */
  .hero-proof a:hover .hero-proof__client{text-decoration-thickness:2px;text-underline-offset:.3em}
  /* títulos dos cartões: a linha de 1px da cor do texto passa à amarela */
  .card:hover .card__title a,.pick:hover .pick__title a,.res:hover .res__title a,.case-card:hover .b{
    text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:.3em}
  /* exceção do afastamento nos links de várias linhas com entrelinha apertada (correção da rodada 4, 27/10): a .3em, a
     linha de 2px encostava no acento da maiúscula da linha de baixo (É, Ú, Ó, Á: no Outfit o acento sobe até quase 1em
     acima da linha de base) ou passava por cima dele, e no "$" de "R$". 49 títulos de post e vários H2 de sumário ("É",
     "Útil", "Única") têm maiúscula acentuada. Cada tipo fica com o maior afastamento que deixa ao menos 1px (2px na tela
     retina) entre a linha e o acento, medido com o mouse de 1024 a 1920: sumário (15px, entrelinha 1,35) a .15em; títulos
     de cartão e da Busca (17 a 20px, 1,25 a 1,3) a .12em; os três destaques menores do Blog (16 a 21px) e os recomendados
     da Home (16 a 18px, 1,25 a 1,3) a .08em. A linha continua amarela e com 2px; em repouso nada muda. Limite (conferência
     4, 27/10; spec 16, "Limite conhecido"): nos destaques menores, com a fonte fluida, a .08em arredonda para pixels
     diferentes conforme a largura, e a 1220, 1260 e 1400 a linha encosta no acento (0px na tela comum; a 1260, também na
     retina); a .07em o acento solta, mas a linha encosta nas letras do título. Nos dois tipos a .08em, o rabo do Q
     maiúsculo encosta na linha também na retina, em parte das larguras. Nenhum afastamento atende os dois lados: fica
     para o Fabio (entrelinha) */
  .toc a:hover{text-underline-offset:.15em}
  .card:hover .card__title a,.res:hover .res__title a{text-underline-offset:.12em}
  .card.feat4__item:hover .card__title a,.pick:hover .pick__title a{text-underline-offset:.08em}
  /* exceção: o título grande do destaque do Blog (.feat4__lead, até 36px com entrelinha de 1,12, a mais apertada dos
     cartões). A .3em, a linha de 2px encostava no alto das letras da linha de baixo (d, f, L: folga de 0 a 1px de 1024 a
     1440); fica a .2em, o afastamento do site.css, com ~4px de folga a 1024 e ~4,5px a 1440. Com maiúscula acentuada na
     linha de baixo, a linha encosta no acento ou passa por cima dele em qualquer afastamento de .06em para cima, como a
     de 1px do protótipo a .2em: com essa entrelinha o acento chega a ~4px da linha de base de cima. Fica a .2em */
  .card.feat4__lead:hover .card__title a{text-underline-offset:.2em}
  /* texto apagado em repouso vai para a cor cheia: itens do menu do celular (papel a 80%) e a trilha (cinza) */
  .drawer details li a:hover{color:var(--paper)}
  .crumbs a:hover{color:var(--ink)}
  .dark .crumbs a:hover{color:var(--paper)}
  /* link com seta: a borda de 1px fica amarela e a sombra de 1px logo abaixo dá a aparência de 2px, sem mexer na medida
     do link (a seta continua andando, site.css). O do mosaico do Contato (.bento__link) já tem a borda amarela de 2px e fica
     como está (com a sombra, passava a 3px). O "Responder" dos comentários é o desenho do .link-arrow sem a classe
     (wp-comentarios.css): o mesmo hover */
  .link-arrow:not(.bento__link):hover,.comments .comments__reply a:hover{
    border-bottom-color:var(--yellow);box-shadow:0 1px 0 var(--yellow)}
  /* links com o sublinhado do navegador sempre à vista: o texto do Agradecimento de infoprodutos ("preencha este
     briefing", cinza no escuro), a descrição da categoria no topo escuro (hoje só em /categoria/artigos-premium/,
     "Assine já"; correção da rodada 4) e, nos comentários, o aviso do formulário ("Sair", "Entre na sua conta"), o
     "Cancelar resposta", o "Editar", o nome do pingback e o aviso do Akismet. A linha passa à amarela de 2px, no
     afastamento de repouso (não pula), e o texto cinza vai para a cor cheia */
  .thanks-text a:hover,.cat-hero__desc a:hover,.comments__notes a:hover,.comments__cancel a:hover,.comments__edit a:hover,
  .comments__name a:hover,.comments p.akismet_comment_form_privacy_notice a:hover{
    text-decoration-color:var(--yellow);text-decoration-thickness:2px}
  .thanks-text a:hover,.cat-hero__desc a:hover{color:var(--paper)}
  .comments__edit a:hover,.comments p.akismet_comment_form_privacy_notice a:hover{color:var(--ink)}
  /* link no meio do texto dos comentários: a linha cinza fixa (wp-comentarios.css) e, no mouse, o marca-texto amarelo do
     .entry a (site.css), o desenho de leitura do post. Antes só a linha passava de cinza a tinta: era o único link de texto
     sem amarelo no mouse. Em repouso a faixa tem altura 0 (nada muda); a linha de tinta do mouse continua no
     wp-comentarios.css, como no .entry a */
  .comments__text a{transition:background-size .3s var(--ease);background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 100%/100% 0}
  .comments__text a:hover{background-size:100% 100%}
  /* atalhos da 404 e da busca sem resultado: a linha cinza fixa passa à amarela (já engrossava para 2px), em vez da tinta */
  .bvc-atalhos a:hover{text-decoration-color:var(--yellow)}
  /* rodapé: a linha amarela já existia, com a espessura automática da fonte (~1px); passa aos 2px do padrão */
  .site-footer a:hover{text-decoration-thickness:2px}
  /* links com a linha amarela fixa (fatos da Empresa, respostas do FAQ e, desde o item 15 de 27/10, o parágrafo dos cartões
     de cases por serviço da Home, .prova__texto, que copia o repouso do .fact__a): a linha fica amarela e engrossa para 3px,
     como o .hero-text e o .author-hero__role (nos fatos, ela virava tinta) */
  .fact__a a:hover,.prova__texto a:hover{text-decoration-color:var(--yellow);text-decoration-thickness:3px}
  .faq__answer a:hover{text-decoration-thickness:3px}
}
/* toque: a trilha, a autoria do post, o rodapé, o .case-card, as áreas de serviço (.area da Home e de Serviços: nome e
   itens) e os fatos do case (.case-facts) sublinhavam no :hover fora do hover:hover (site.css), e no celular o toque deixa
   o :hover preso no link tocado (a linha ficava, até ao voltar para a página). Sem mouse, sem linha; com mouse e em
   repouso, nada muda */
@media (hover:none){.crumbs a:hover,.byline a:hover,.site-footer a:hover,.case-card:hover .b,
  .area__title:hover,.area li a:hover,.case-facts a:hover{text-decoration-line:none}}
/* menu de serviços: o nome da área continua papel (o site.css o pintava de amarelo) e os itens não deslizam mais, nem no
   foco do teclado (a mesma regra do site.css) */
.mega__title a:hover{color:var(--paper)}
.mega li a:hover,.mega li a:focus-visible{transform:none}
/* sumário: o número (::before) era a 1ª coluna da grade do link, e a linha do hover passava para ele (decoração propagada
   a todo item da grade). O número sai do fluxo (float na folga de 2rem à esquerda, com a margem negativa: não encolhe as
   linhas do título) e a linha fica só no título. Mesmo desenho em repouso: número no alto da linha, título a 2rem,
   o mesmo padding-top (.6rem; .4rem na Página baixa) para os dois. O display:block vem antes para o navegador sem
   flow-root (o título é mais alto que o número; nada sai do lugar) */
.toc a{display:block;display:flow-root;padding-left:2rem}
.toc a::before{float:left;margin-left:-2rem}

/* ---------- 2. CONTEÚDO ANTIGO (spec 04, seção 8; decisões C3, C4 e C8) ---------- */
/* a coluna do texto não cresce com o conteúdo: abaixo de 1100px a grade não tem colunas definidas, e imagem, legenda,
   pre, URL e tabela mais largos que a tela alargavam a página inteira (C8; deve voltar ao site.css do protótipo) */
.post-main,.page-layout>*{min-width:0}

/* iframe: só vídeo fica em 16:9 e SlideShare na proporção dele; o resto (formulário, enquete, planilha, rede social)
   guarda a altura do próprio iframe (o tema.js devolve a altura do atributo, que o height:auto do site.css anula). C8 */
.entry iframe:not([src*="youtube" i],[src*="vimeo" i],[src*="facebook.com/plugins/video" i],[src*="slideshare" i]){aspect-ratio:auto}
.entry iframe[src*="slideshare" i]{aspect-ratio:595/485;height:auto}

/* texto dentro de section ou div (posts com <section id>, a coluna do tema antigo colada em 4 posts, caixas com style):
   o mesmo ritmo do corpo. Fica de fora o que está dentro de div com id (formulário do RD Station, [caption], [gallery])
   e de blockquote (tweet, Instagram e Threads antes do script deles) */
.entry :where(section,div:not([id])):where(:not(.entry :is(div[id],blockquote) *))>*+*{margin-top:1.25em}
.entry blockquote>*+*{margin-top:.75em}
.entry li>*+*,.entry li>:is(ul,ol){margin-top:.5em}

/* títulos que o editor gerou e o protótipo não previa: H1 com a medida do H2, H5 e H6 com a do H4 */
.entry h1{font-size:clamp(1.625rem,1.3rem + 1.3vw,2.25rem);color:var(--ink);margin-top:2.4em;line-height:1.15;letter-spacing:-.02em}
.entry h5,.entry h6{font-size:1.0625em;font-weight:700;color:var(--ink);margin-top:1.75em;line-height:1.35;letter-spacing:0;text-wrap:pretty}
.entry h1+*,.entry h5+*,.entry h6+*{margin-top:.6em}

/* URL e código compridos quebram a linha em vez de empurrar a página; caixa de largura fixa não passa da coluna */
.entry{overflow-wrap:break-word}
.entry :where(div,section,figure){max-width:100%}
/* campo de formulário colado no texto antigo (textarea com cols="80" para copiar código, 3 posts): não passa da coluna,
   senão a página rola de lado no celular (post 18081: 744px a 375px). Post, página padrão e Case */
.entry :is(textarea,input,select){max-width:100%}

/* imagem centralizada pelo parágrafo (align="center", text-align: center, <center>): aqui a imagem é bloco */
.entry :is([align=center i],[style*="text-align: center" i],[style*="text-align:center" i],center) img:not(.alignleft,.alignright){margin-inline:auto}

/* imagem alinhada pelo atributo align: igual a .alignleft e .alignright */
.entry img[align=left],.entry img[align=right]{max-width:50%}
@media (min-width:640px){
  .entry img[align=left]{float:left;margin:.35em 1.75em 1em 0}
  .entry img[align=right]{float:right;margin:.35em 0 1em 1.75em}
}
/* no celular nada flutua, nem o float escrito no style */
@media (max-width:639px){.entry img[align],.entry [style*="float"]{float:none!important;max-width:100%;margin-inline:auto}}

/* imagem com link: sem o marca-texto amarelo do link de texto (.entry a.yt continua com o fundo de tinta) */
.entry a:has(img){background:none}

/* tabela antiga (border="1", cellpadding, bgcolor, width nas células): só as réguas do protótipo */
.entry table{border:0}
.entry th,.entry td{border-inline:0;border-bottom:0}
.entry :is(table,tr,th,td)[bgcolor]{background:none}
.entry :is(th,td)[width]{width:auto}

/* Flash não roda em navegador nenhum: some a caixa vazia (o vídeo do YouTube em Flash volta como capa, no PHP). C3 */
.entry :is(object,embed){display:none}
/* iframe que continua em http (Polldaddy, planilha e formulário antigos do Google): o navegador bloqueia; some a faixa em branco. C3 */
.entry iframe[src^="http:" i]{display:none}

/* [gallery] (2 posts), sem o CSS embutido do WordPress */
.entry .gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (min-width:640px){.entry .gallery-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.entry .gallery-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.entry .gallery img{width:100%}
.entry .gallery br{display:none}

/* [gravityform] de formulário apagado (ids 65 e 61, 3 posts): sem o aviso "Opa! Não conseguimos encontrar o seu formulário." */
.entry .gform_not_found{display:none}

/* opcionais aprovados (spec 04, 8.2; decisão C4) */
/* título começa abaixo da imagem flutuante, em vez de se espremer ao lado dela */
.entry h2,.entry h3{clear:both}
/* tweet, Instagram, Threads e TikTok antes de o script carregar: sem o corpo grande da citação, para a troca não dar um salto */
.entry :is(.twitter-tweet,.instagram-media,.text-post-media,.tiktok-embed){border-left:0;padding-left:0;font-size:1em}