/* Agência Mestre · modelo Serviço (servicos-interna.php). Só nas páginas do modelo (filtro mestre_assets_modelo), depois do
   site.css e do wp.css. Dados reais que o protótipo não mostra (spec 02, 9.3 e risco 3; decisões S9, S13 e G1). Nenhuma regra muda medida,
   fonte ou cor do protótipo; sem max-width em texto. Se o Fabio aprovar, voltam ao site.css do protótipo. No fim, a seção da estrutura
   nova da página (spec 19, pedido do Fabio de 27/10/2026), montada só com tokens e peças do tema. Exceção: as outras frentes na
   faixa escura (decisão do Fabio de 31/10/2026) trocam as cores claras do bloco do protótipo pelas peças do escuro do tema e
   ficam aqui, porque o site.css não muda; o protótipo de serviço ainda mostra o bloco claro. */

/* página sem formulário no topo: topo em uma coluna */
@media (min-width:1024px){.page-template-servicos-interna .svc-hero__grid--solo{grid-template-columns:1fr}}

/* linha do repetidor sem ilustração (72372; 26574 e 26576, que apontam para um post): texto em largura total */
@media (min-width:900px){.page-template-servicos-interna .feature.feature--texto{grid-template-columns:1fr}}

/* topo sem subtítulo e sem números (41 páginas): no celular e no tablet o cartão do formulário não encosta na seção
   seguinte (o respiro de 2,5rem é o que o .svc-hero__more dá quando existe) */
@media (max-width:1023px){.page-template-servicos-interna .svc-hero:not(:has(.svc-hero__more)){padding-bottom:2.5rem}}

/* CAPTCHA em uma linha só da grade do cartão: regra da base (wp.css), vale também para a Home e o Case */
/* computador de tela baixa (1366×768) com o reCAPTCHA de caixa no formulário do topo: o cartão inteiro, borda de baixo
   incluída, fica na primeira dobra também com o título do formulário em duas linhas ("Solicite um orçamento de Inbound
   Marketing"). A frase de apoio sai e o cartão fica com o 1,75rem em cima e embaixo do .orc-hero nas telas baixas; os respiros
   internos são os dos celulares baixos do protótipo (título, linhas de campos e botão). Fonte, cor e campos não mudam; o
   título fica sempre. Rodada 3: só com o reCAPTCHA (formulário que voltar a ele) ou com o quadro do Turnstile à vista (a
   Cloudflare pediu interação: .gfield--turnstile-visivel do tema.js, ~73px na grade; sem isto a borda de baixo passava da
   dobra, até ~40px com o título em duas linhas). No estado normal o Turnstile invisível não ocupa lugar e o cartão cabe com
   a frase de apoio e os respiros do protótipo */
@media (min-width:1024px) and (max-height:820px){
  .page-template-servicos-interna .svc-hero #orcamento:has(.gfield--type-captcha,.gfield--turnstile-visivel){padding-block:1.75rem}
  .page-template-servicos-interna .svc-hero #orcamento:has(.gfield--type-captcha,.gfield--turnstile-visivel) .form-head__text{display:none}
  .page-template-servicos-interna .svc-hero #orcamento:has(.gfield--type-captcha,.gfield--turnstile-visivel) .gform_wrapper{margin-top:.625rem}
  .page-template-servicos-interna .svc-hero #orcamento:has(.gfield--type-captcha,.gfield--turnstile-visivel) .gform_fields{row-gap:.5rem}
  .page-template-servicos-interna .svc-hero #orcamento:has(.gfield--type-captcha,.gfield--turnstile-visivel) .gform_footer{margin-top:.75rem}
}
/* título longo (72345): a coluna de texto passa da altura do cartão e o centro da grade empurrava o formulário para baixo da
   dobra. O cartão sobe para o topo da grade; quando ele é a coluna mais alta (as outras páginas), nada muda */
@media (min-width:1024px){.page-template-servicos-interna .svc-hero__grid>#orcamento{align-self:start}}
/* formulário do fim de 45115 (só ela desde a decisão do Fabio de 01/11/2026, parte 2; a 28356 tem o formulário normal): a
   cópia do formulário 15 tem 11 campos e o cartão passa de 1.100px; centrada contra ele,
   a coluna do título começava ~377px abaixo do topo do cartão. Título alinhado ao topo do cartão, como no topo do Orçamento do
   protótipo (.orc-hero); a classe vem do template-parts/servico/formulario-fim.php (o ID da cópia muda de um banco para outro).
   Com a cópia do formulário 1 nada muda. O 15 saiu do topo dessas duas páginas (decisão do Fabio de 01/11/2026: "curto no
   topo, longo no fim"), e com ele a regra que alinhava a coluna de texto do topo ao cartão de 11 campos (decisão S1) */
@media (min-width:1024px){.page-template-servicos-interna .end-form__grid--longo>div:first-child{align-self:start}}

/* celular (até 639px): o site.css esconde os rótulos e deixa o placeholder como guia. Campo sem placeholder: o rótulo aparece
   (nos formulários 1 e 29 todos têm, nada muda; era o campo 41 da cópia do 15, que virava uma caixa vazia, hoje coberto também
   pela regra seguinte) */
@media (max-width:639px){
  .page-template-servicos-interna .form-compact .gfield:has(>.ginput_container>:is(textarea,input:not([type=hidden])):is(:not([placeholder]),[placeholder=""]))>.gfield_label{
    position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
}
/* celular (até 639px), formulário longo do fim (.end-form__grid--longo: a cópia do 15, só em 45115): os rótulos aparecem em
   todos os campos, como a partir de 640px. O placeholder não basta como guia nesse formulário: o do YouTube é só "https://"
   (sem dizer que o campo é o canal) e o do textarea 40 é um exemplo de resposta, não a pergunta. Texto, fonte e cor do rótulo
   não mudam; a entrelinha e o vão até o campo são os do wp.css a partir de 640px. Nome e Sobrenome continuam lado a lado
   (site.css): cada campo é uma coluna que encosta embaixo, e com rótulos de alturas diferentes os dois campos da linha ficam
   na mesma base (sem o subgrid do site.css a partir de 640px: as 3 linhas por campo somavam dois vãos vazios por campo, e o
   li vazio do reCAPTCHA órfão, campo 33, afastava o botão ~20px; com erro do GF num dos dois, a regra seguinte). Os outros
   campos ocupam a linha inteira. Regra separada da
   de cima (com :has(), se o navegador não a entender, esta continua valendo) */
@media (max-width:639px){
  .page-template-servicos-interna .end-form__grid--longo .form-compact .gfield{display:flex;flex-direction:column;justify-content:flex-end}
  .page-template-servicos-interna .end-form__grid--longo .form-compact .gfield_label{
    position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;line-height:1.3;margin-bottom:.25rem}
  /* textarea 40 com a altura de um campo de uma linha (44px a 320: o exemplo de resposta aparecia cortado ao meio embaixo do
     rótulo); a mesma altura do wp.css a partir de 640px, duas linhas inteiras */
  .page-template-servicos-interna .end-form__grid--longo .form-compact .ginput_container textarea{min-height:3.75rem;height:3.75rem;padding:.5rem .8rem}
}
/* o mesmo formulário com erro do GF no Nome ou no Sobrenome (li.gfield_error + a mensagem depois do campo; os dois são
   obrigatórios): na coluna que encosta embaixo, a mensagem empurrava para cima só o campo com erro, e o outro ficava 50px
   abaixo a 320 (28px a 375). Com o erro, os dois campos da linha dividem as três linhas (rótulo, campo, mensagem) pelo
   subgrid, como o site.css faz a partir de 640px: rótulos na mesma base, campos na mesma linha, a mensagem embaixo do campo
   com erro. Só com o erro: sem ele a terceira linha fica vazia e somaria meio vão (4 a 5px) embaixo da linha do Nome, e o
   ritmo do formulário sem erro não muda. Sem :has() ou sem subgrid, fica a regra de cima */
@supports (grid-template-rows:subgrid){@media (max-width:639px){
  .page-template-servicos-interna .end-form__grid--longo .form-compact .gform_fields:has(>.gfield_error:nth-child(-n+2))>.gfield:nth-child(-n+2){
    display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
  .page-template-servicos-interna .end-form__grid--longo .form-compact .gform_fields:has(>.gfield_error:nth-child(-n+2))>.gfield:nth-child(-n+2)>.gfield_label{align-self:end}
}}

/* introdução ou texto de apoio em uma coluna (.entry) que abre com título (H2 em 72345, 69504, 27924, chatgpt-ads; H4 em
   70884): o margin-top do título (2,4em no H2) somava com o padding da seção e o topo ficava com o dobro do respiro das
   outras seções (150px em vez de 63px em 1440). O primeiro elemento encosta no padding, como o parágrafo do protótipo */
.page-template-servicos-interna .section>.container>.entry>:first-child{margin-top:0}
/* o mesmo na linha do repetidor dos planos sem subtítulo (as 3 fases de /servicos/inbound-marketing/, que abrem com H3 no
   texto): o .entry é o primeiro filho e a margem dele (1,25rem) colapsava com a do H3 (2em), e o título ficava ~42px abaixo do
   padding a 375 (~50px a 1440, o bloco centrado descia). Como o H2 das outras linhas, o primeiro elemento encosta no padding;
   com H2 o .entry não é o primeiro filho e nada muda */
.page-template-servicos-interna .feature>div>.entry:first-child,
.page-template-servicos-interna .feature>div>.entry:first-child>:first-child{margin-top:0}

/* ilustração dos planos que não carrega (arquivo apagado, 404, bloqueio): sem a imagem, a coluna da grade interna do .illus
   media a largura pela proporção do width/height (447x219 dava 746px num quadro de 483px) e a página rolava de lado no
   desktop (/servicos/trafego-pago/ com 1624px em 1366). Coluna presa à largura do quadro; com a imagem carregada nada muda
   (365x365 nas 6 ilustrações) */
.page-template-servicos-interna .illus{grid-template-columns:minmax(0,1fr)}

/* chamada fixa no celular e no tablet (template-parts/servico/chamada-fixa.php, regra do site.css; some a partir de 1100px):
   no fim da rolagem ela ficava por cima da última linha do rodapé e "Política de Privacidade" e "Mapa do Site" não podiam ser
   clicados (rodada 3 dos conferentes; no Serviço também a 768 e 1024, porque as outras frentes vêm depois do formulário do
   fim e a chamada volta à tela). O rodapé ganha embaixo a altura da chamada, 73px (0,75rem + botão de 3rem + 0,75rem e a
   régua de 1px), além da área segura que já tinha. Só na página que tem a chamada; fonte, cor e rodapé não mudam */
@media (max-width:1099px){.page-template-servicos-interna:has(.sticky-cta) .site-footer{padding-bottom:calc(4.5rem + 1px + env(safe-area-inset-bottom))}}

/* depoimento com mais de um parágrafo (27916, 66709 e 66823): o protótipo só desenha um <p> e o reset do site.css zera a margem,
   então o segundo parágrafo colava no primeiro. Espaço entre os blocos igual ao das citações do post (.entry blockquote, wp.css);
   fonte, cor e medida não mudam, e o depoimento de um parágrafo só (<p itemprop="reviewBody">) fica como está */
.page-template-servicos-interna .testimonial div[itemprop=reviewBody]>*+*{margin-top:.75em}

/* outras frentes (template-parts/servico/frentes.php) com a última linha incompleta: 17 filhas em Inbound Marketing, 5 em
   Business Intelligence, 4 em Gestão de Redes Sociais e 1 em Automações de WhatsApp. A sobra deixava à mostra o fundo da grade
   (a cor que desenha as linhas entre os blocos: var(--line) no claro, var(--line-d) no escuro de agora), um bloco com cara de
   cartão quebrado (rodada 4 dos conferentes). O último bloco ocupa o resto da linha, a mesma regra do Autor (wp-autor.css) e da
   grade incompleta do Contato. Abaixo de 640px a grade tem uma coluna e, com a linha cheia (12 filhas na SEO e no Tráfego
   Pago, 6 em Criação), nada muda */
@media (min-width:640px) and (max-width:1023px){.page-template-servicos-interna .subs-section .helps>.help:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:1024px){
  .page-template-servicos-interna .subs-section .helps>.help:last-child:nth-child(3n+1){grid-column:1/-1}
  .page-template-servicos-interna .subs-section .helps>.help:last-child:nth-child(3n+2){grid-column:span 2}
}

/* outras frentes na faixa escura (decisão do Fabio de 31/10/2026): sem a faixa de cases, o fim da página volta a alternar claro
   e escuro como na Home, nos dois desenhos: perguntas E (no de reserva, o último bloco de conteúdo C) · formulário do fim C ·
   outras frentes E · rodapé E. O frentes.php põe o .dark na seção; só a classe deixava o subtítulo em #2b2925 sobre preto (a
   .subs-head .t-body do site.css vem depois da .dark .t-body) e os cartões em papel (rodada 4). Peças do escuro do tema:
   subtítulo no cinza do escuro (o .section-head da Home escura, wp-home.css), linhas da grade em var(--line-d) (as réguas do FAQ
   escuro e do rodapé), cartão em tinta com nome e seta em papel, quadrado do ícone do .value__icon da Empresa (tom de tinta,
   borda #3a3a3a, ícone amarelo); cartão e linhas iguais aos da grade escura de cases da Home (.cases-grid). No mouse e no toque,
   o #121212 do .case-big escuro (site.css), e não o papel: com 12 a 17 cartões, o papel acendia blocos claros na faixa preta
   (rodada 1 dos conferentes), e o quadrado fica amarelo com o ícone em tinta (o do .help claro); no mouse, a seta também anda
   (site.css). No toque, o fundo sozinho quase não mudava (#0a0a0a para #121212, 1,06:1) e o site.css tira o realce de toque do
   navegador: o quadrado amarelo é o sinal (rodada 2 dos conferentes). Foco: o contorno amarelo do .dark, com o bloco acima dos
   vizinhos (site.css). Contraste: subtítulo 6,2:1, nome e seta 17,7:1, ícone amarelo no quadrado 12:1, contorno do foco 13:1; no
   mouse e no toque, nome e seta 16,7:1 e ícone em tinta no amarelo 13:1. As linhas da grade (1,4:1; no claro, 1,35:1) só
   separam: o cartão se reconhece pelo nome, pelo ícone e pela seta. Só na tela (@media screen): na impressão, o .dark do
   site.css põe a faixa em branco e texto preto, e as cores fixas do cartão passavam por cima dele (nome em papel, seta apagada
   sem os fundos); lá vale o .help claro do site.css, como antes da faixa escura. Separação do rodapé: a régua de 1px
   var(--line-d) do .site-footer (site.css), a mesma do .dark + .dark da Home; se uma faixa escura vier antes das frentes (página
   sem formulário do fim), a mesma régua entre as duas */
@media screen{
  .page-template-servicos-interna .subs-section.dark .subs-head .t-body{color:var(--grey-d)}
  .page-template-servicos-interna .subs-section.dark .helps{background:var(--line-d);border-color:var(--line-d)}
  .page-template-servicos-interna .subs-section.dark .help{background:var(--ink);color:var(--paper)}
  .page-template-servicos-interna .subs-section.dark .help__icon{background:var(--tone-ink);border:1px solid #3a3a3a;color:var(--yellow);
    transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
  @media (hover:hover){
    .page-template-servicos-interna .subs-section.dark .help:hover{background:#121212;color:var(--paper)}
    .page-template-servicos-interna .subs-section.dark .help:hover .help__icon{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
  }
  .page-template-servicos-interna .subs-section.dark .help:active{background:#121212;color:var(--paper)}
  .page-template-servicos-interna .subs-section.dark .help:active .help__icon{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
}
.page-template-servicos-interna #conteudo>.dark+.subs-section.dark{border-top:1px solid var(--line-d)}

/* ---------- Estrutura nova da página de serviço (pedido do Fabio de 27/10/2026, spec 19) ---------- */
/* Só com o conteúdo novo (classe .svc-novo no <main>, mestre_servico_novo()); a página sem conteúdo novo continua no desenho
   de cima (reserva). Ordem e fundos: topo E · introdução C · três blocos C (réguas dos .feature) · depoimento E · entregáveis
   C · perguntas E · formulário do fim C · outras frentes E · rodapé E (régua var(--line-d)). O fim alterna como na Home:
   outras frentes na faixa escura, decisão do Fabio de 31/10/2026 (regras logo acima, que valem também para o desenho de
   reserva). Fora do topo nada aqui muda fonte, cor ou componente do tema: os blocos usam o .feature, o cartão junta o topo do
   Case em miniatura às peças do .case-big (número, métrica, rodapé e "Ver o case"), o depoimento é o .testimonial, as
   perguntas são o mestre_faq() e os entregáveis seguem a lista de réguas da Empresa (.facts__list) com o quadrado da ficha do
   Case (.case-facts__icon). Celular primeiro; sem max-width em texto; text-wrap:pretty */

/* alternância escuro/claro (a da Home, wp-home.css): a régua clara não vem depois de uma seção escura; duas escuras seguidas
   (quando o bloco claro do meio não sai) ganham a régua do escuro */
.svc-novo>.dark+:is(.section--rule,.end-form){border-top:0}
.svc-novo>.dark+.dark{border-top:1px solid var(--line-d)}

/* B1. Celular baixo (320×568, iPhone SE da 1ª geração): a página abre no H1 e no formulário inteiro (regra do Fabio). Com o
   nome curto no título do formulário em 2 ou 3 linhas ("Solicite um orçamento de Posicionamento no Google") ou com o H1 de 3
   linhas, o botão ficava até 4px abaixo da dobra. Os respiros entre o H1 e o cartão e dentro dele diminuem um passo, como a
   regra de celular baixo do wp.css faz com o reCAPTCHA (lá só com ele, aqui em toda página do modelo): uns 25px. Fonte,
   cor, campos e títulos não mudam; a partir de 601px de altura nada muda */
@media (max-width:639px) and (max-height:600px){
  .page-template-servicos-interna .svc-hero .svc-hero__grid{gap:.5rem}
  .page-template-servicos-interna .svc-hero #orcamento.form-card.form-compact{padding-top:.75rem;padding-bottom:.75rem}
  .page-template-servicos-interna .svc-hero #orcamento .form-head{margin-bottom:.5rem}
  .page-template-servicos-interna .svc-hero #orcamento .gform_fields{gap:.375rem}
  .page-template-servicos-interna .svc-hero #orcamento .gform_footer{margin-top:.5rem}
}
/* métrica dos números do topo com text-wrap:pretty, como no .home-hero (wp-home.css) e no .hub-hero (site.css). Rodada 2 dos
   conferentes: os números agora saem nas 84 páginas e, sem isto, a última linha ficava com uma palavra só ("relacionados à /
   IA", "em um / ano", "na Black / Friday"). Vale também para a página sem o conteúdo novo; fonte e medida não mudam */
.page-template-servicos-interna .svc-hero .hero-proof__metric{text-wrap:pretty}
/* o nome do cliente também (rodada 2 dos conferentes das 84 páginas): "Setor de SaaS e Hospedagem de Sites" (26572) deixava
   "Sites" sozinha na última linha a 1366 e a 1440. Fonte, cor e texto não mudam */
.page-template-servicos-interna .svc-hero .hero-proof__client{text-wrap:pretty}

/* B3. Blocos com case: texto e cartão do case, no celular nessa ordem. No computador o lado alterna ao contrário dos planos
   (pedido: texto à esquerda no 1º e no 3º, case à esquerda no 2º); o texto fica com 7/12 e o cartão com 5/12. Bloco sem case
   publicado: sem feature--case e com feature--texto (regra de cima, largura total) */
@media (min-width:900px){
  .page-template-servicos-interna .feature--case{grid-template-columns:7fr 5fr}
  .page-template-servicos-interna .feature--case:nth-of-type(even){grid-template-columns:5fr 7fr}
  .page-template-servicos-interna .feature--case:nth-of-type(even)>.svc-case{order:-1}
}
/* itens das listas do texto dos blocos com text-wrap:pretty, como o resto do texto novo (rodada 2 dos conferentes: "campanhas
   de / mídia." terminava com a palavra sozinha a 768 e a 1024) */
.svc-novo .feature li{text-wrap:pretty}

/* cartão do case: uma faixa de tinta com a foto do case em cinza e o logo do cliente (o topo do Case em miniatura:
   .case-hero__media) e, embaixo, o corpo claro dos cartões de case da vitrine (fundo de cartão, borda de 1px): número e
   métrica, a frase do cartão (case_frase) e "Ver o case". Case sem imagem: a faixa fica só com o logo ou o nome, baixa. O
   cartão inteiro é o link (nele não há outro link; os links do texto ficam na coluna ao lado, sem aninhar). No mouse: borda
   em tinta, foto 3,5% maior e a seta anda (o dos cartões de post e de case), sem inverter o cartão.
   Rodada 1 dos conferentes: com a foto em cinza a 60% sobre a tinta, os banners que já vêm escurecidos para texto branco
   (Fretadão, Benatti, Madel, JumboCDP, Zamboni, Construtora União) ficavam 98% a 100% quase pretos, um retângulo vazio. A foto
   agora passa pelo filtro SVG #svc-case-tom (blocos.php: cinza e uma curva de gama que clareia o escuro e segura o claro),
   sem opacidade, e o degradê de tinta fica só na metade de baixo, atrás do logo: os 9 banners das pilotos ficam entre 41 e
   71 de luminância média (de 255; antes 11 a 30). O logo, maior (2,25rem) e branco (a inversão do tema com brilho: os logos
   de cor média, como Benatti e Construtora União, viravam cinza), lê a 4,8:1 ou mais sobre a foto nas 6 larguras (mediana
   dos pixels do logo; antes 2,3:1 na Construtora União). A parte visível do logo continua começando 32 a 54px depois da
   coluna do número: é a margem transparente de cada PNG (sem correção por CSS; precisa do logo recortado) */
/* Rodada 2 dos conferentes, limites que ficam (sem correção por CSS, dependem de outro arquivo de logo): a margem transparente
   muda de PNG para PNG (265x55), e a parte visível do logo vai de 16px (Fretadão) a 36px (JumboCDP) de altura; o logo da
   Madel vem numa caixa vermelha com letras brancas e a inversão o faz uma placa branca com letras pretas, o negativo da marca.
   Saída: uma versão do logo recortada e branca para fundo escuro (campo do case, preenchido no lançamento), ou, com o sim do
   Fabio, só a troca do logo da Madel */
.svc-case{display:flex;flex-direction:column;min-width:0;background:var(--surface);color:var(--ink);text-decoration:none;
  border:1px solid var(--line);transition:border-color .3s var(--ease)}
.svc-case__band{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:4.5rem;padding:1.25rem clamp(1.25rem,1rem + 1vw,2rem);
  background:var(--ink);color:var(--paper);overflow:hidden}
.svc-case__band:has(>.svc-case__foto){aspect-ratio:5/2}
.svc-case__tom{position:absolute;width:0;height:0;overflow:hidden}
.svc-case__foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:url(#svc-case-tom);
  transition:transform .8s var(--ease)}
.svc-case__band:has(>.svc-case__foto)::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,10,10,.8),rgba(10,10,10,0) 55%)}
.svc-case .case-big__logo{height:2.25rem;opacity:1;filter:grayscale(1) invert(1) brightness(1.8) contrast(1.3)}
.svc-case__band .vcase__client{color:var(--paper);font-size:var(--fs-body)}
.svc-case__body{display:flex;flex-direction:column;flex:1;padding:clamp(1.25rem,1rem + 1vw,2rem)}
.svc-case .case-big__num{font-size:clamp(2.5rem,1.9rem + 2.2vw,4rem)}
.svc-case .case-big__metric{margin:.5rem 0 0;font-size:var(--fs-read);line-height:1.4;font-weight:500;color:var(--ink);text-wrap:pretty}
.svc-case__frase{display:block;margin:1rem 0 1.5rem;font-size:var(--fs-body);line-height:1.6;color:var(--text);text-wrap:pretty}
.svc-case .case-big__foot{border-top-color:var(--line)}
@media (hover:hover){
  .svc-case:hover{border-color:var(--ink)}
  .svc-case:hover .svc-case__foto{transform:scale(1.035)}
  .svc-case:hover .case-big__go svg{transform:translateX(3px)}
}
.svc-case:active{border-color:var(--ink)}
/* tablet (coluna única, cartão em toda a largura): faixa à esquerda e corpo à direita, para a faixa não passar de 280px de
   altura embaixo do texto */
@media (min-width:640px) and (max-width:899px){
  .svc-case:has(>.svc-case__band>.svc-case__foto){display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
  .svc-case:has(>.svc-case__band>.svc-case__foto)>.svc-case__band{aspect-ratio:auto}
}

/* B4. Depoimento: o .testimonial do protótipo; o link para o case fecha a coluna da citação. A citação fica sempre na fonte
   do protótipo (a regra .testimonial--longo, que baixava a fonte acima de 90 palavras, saiu na rodada 1 dos conferentes: só
   volta com o sim do Fabio; o depoimento longo se resolve com um trecho mais curto) */
.testimonial__quote>.link-arrow{margin-top:1.5rem}

/* B5. Principais entregáveis: lista em 1, 2 e 3 colunas; cada linha da grade abre com a régua de 2px em tinta (a lista da
   Empresa, .facts__list) e os outros itens com a régua de 1px. Marca: o quadrado de tinta com o visto amarelo da ficha do
   Case (.case-facts__icon, 2rem com o ícone de 1rem, no próprio span), sem hover: nada aqui é link */
.entregas{list-style:none;display:grid;column-gap:2rem;margin-top:var(--s3)}
.entregas>li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.875rem;align-items:start;padding-block:1rem;
  border-top:1px solid var(--line);font-size:var(--fs-read);line-height:1.4;font-weight:500;color:var(--ink);text-wrap:pretty}
.entregas>li:first-child{border-top:2px solid var(--ink)}
/* o texto começa na altura do centro do quadrado (2rem) */
.entregas__texto{padding-top:.25rem}
/* palavra com hífen não se parte ("e- / mail marketing", "palavras- / chave", "público- / alvo"): o PHP põe a palavra num
   span.nw, como no .help__title e no parágrafo dos cases por serviço da Home. Em toda a estrutura nova: entregáveis, frase do
   cartão e, desde a rodada 1 dos conferentes, títulos, introdução, texto dos blocos, depoimento e perguntas e respostas */
.svc-novo .nw{white-space:nowrap}
/* última linha sem casa vazia: o item que sobra sozinho (9 itens em 2 colunas, 7 em 3) ocupa a linha inteira, como o campo que
   ficaria sozinho na linha do formulário; com 2 itens na última linha de 3 colunas (8 itens, cerca de um terço das páginas;
   rodada 2 dos conferentes) os dois dividem a linha ao meio. A partir de 1024px a grade tem 6 colunas e cada item ocupa 2: a
   largura dos itens é a mesma das 3 colunas (381px a 1366) e os dois da sobra ficam com 3 cada. As réguas de 2px da primeira
   linha não mudam */
@media (min-width:640px){
  .entregas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .entregas>li:nth-child(-n+2){border-top:2px solid var(--ink)}
}
@media (min-width:640px) and (max-width:1023px){.entregas>li:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:1024px){
  .entregas{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:3rem}
  .entregas>li{grid-column:span 2}
  .entregas>li:nth-child(-n+3){border-top:2px solid var(--ink)}
  .entregas>li:last-child:nth-child(3n+1){grid-column:1/-1}
  .entregas>li:nth-last-child(2):nth-child(3n+1),.entregas>li:last-child:nth-child(3n+2){grid-column:span 3}
}

/* B6. Perguntas frequentes na faixa escura (mestre_faq( $pid, [ 'classe' => 'dark faq-servico' ] )): o .faq da Home com as
   cores do escuro; resposta em cinza do escuro (6,2:1), links e negrito em papel */
.faq-servico .faq__list{border-top-color:var(--paper)}
.faq-servico .faq__item{border-bottom-color:var(--line-d)}
.faq-servico .faq__answer{color:var(--grey-d);font-weight:500}
.faq-servico .faq__answer :is(a,strong,b){color:var(--paper)}

/* foco não encoberto pela chamada fixa (WCAG 2.4.11; rodadas 2 e 3 dos conferentes da faixa escura das outras frentes): abaixo
   de 1100px a chamada fixa amarela cobre o pé da janela, e o Tab rolava o cartão das outras frentes (e qualquer outro campo)
   para trás dela. A rolagem do foco para antes da altura da chamada. Vale para a página inteira do modelo. */
@media (max-width: 1099px) {
  html { scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}