/* Agência Mestre · Home (page-home.php). Carregado só na Home, depois do site.css e do wp.css (filtro mestre_assets_modelo).
   Nenhuma regra muda fonte, cor ou texto do protótipo: elas só levam o desenho dele até a marcação real do Gravity Forms,
   que o protótipo não tinha (o CAPTCHA do formulário 1). Sem max-width em texto (regra do dono).
   O CAPTCHA em uma linha só da grade e o .help__title .nw passaram para o wp.css e o site.css novo.
   Rodada 3 (pedidos do Fabio, 26/10/2026; spec 15), diferenças do protótipo por decisão dele, no fim do arquivo: réguas da
   alternância escuro/claro, depoimentos e recomendados escuros, o bloco de cases por serviço (com o parágrafo de fatos do
   item 15, 27/10/2026, spec 18) e os números do topo maiores (item 14). */

/* Primeira dobra do desktop baixo (1366×768): o formulário do topo inteiro, com o botão, na tela. O protótipo cabe com
   folga; o reCAPTCHA visível do formulário (decisão G1: o CAPTCHA fica como está) soma ~90px e empurrava o botão para
   fora. Só quando o CAPTCHA existe e a tela é baixa: o topo e o cartão usam um respiro menor que o do .form-compact.
   Os 4 respiros abaixo descem 4px cada (cabeçalho do formulário, botão, topo da seção e o cartão), sem mexer em campo,
   fonte ou texto. Com o CAPTCHA invisível ou o Turnstile, a regra deixa de valer sozinha.
   Rodada 3: com o Turnstile invisível a regra não vale; fica para o caso de o formulário voltar ao reCAPTCHA (ex.: a troca do
   wp mestre formularios não rodar na produção). Vale também enquanto o quadro do Turnstile está à vista (a Cloudflare pediu
   interação: o tema.js marca o li com .gfield--turnstile-visivel e ele volta à grade com ~73px, como o reCAPTCHA): sem isto
   a borda de baixo do cartão passava ~8px da dobra a 1366×768. */
@media (min-width:1024px) and (max-height:820px){
  body.home .svc-hero:has(#orcamento :is(.gfield--type-captcha,.gfield--turnstile-visivel)){padding-top:.75rem}
  body.home .form-card#orcamento:has(:is(.gfield--type-captcha,.gfield--turnstile-visivel)){padding-block:1.5rem}
  body.home .form-card#orcamento:has(:is(.gfield--type-captcha,.gfield--turnstile-visivel)) .gform_wrapper{margin-top:.75rem}
  body.home .form-card#orcamento:has(:is(.gfield--type-captcha,.gfield--turnstile-visivel)) .gform_footer{margin-top:.75rem}
}

/* Últimas do Blog (bloco 10). (1) Uma imagem destacada que não carrega (404, arquivo apagado, falha de CDN) alargava a
   página para ~3.000px em qualquer tela: o sizes="auto, …" do lazy dá à imagem o contain-intrinsic-size de 3000px do
   WordPress e o cartão não encolhia; o min-width:0 segura o cartão em 1fr. (2) A linha da categoria e da data fica como no
   protótipo (sem quebra de linha: a categoria encolhe em 2 linhas e a data segue ao lado, de 768 a ~1000px). Uma categoria
   de palavra única mais longa que o espaço ("Empreendedorismo", 768 a ~920px) passava da borda e a página rolava de lado:
   a palavra quebra dentro do próprio span. Fonte, cor e texto não mudam; com as categorias de hoje, a tela é a do protótipo */
body.home .cols.c3>.card{min-width:0}
body.home .cols.c3 .card__meta>span{overflow-wrap:anywhere}

/* Clientes (bloco 3, .logos--cases): a mesma causa, nos logos. O logo que não carrega (404, arquivo apagado, falha de CDN)
   ficava com o contain-intrinsic-size de 3000px × 1500px do WordPress (sizes="auto, …" do lazy): com um só, a coluna dele ia
   a 13rem, as outras encolhiam e a seção crescia ~1.450px; com todos, a página rolava de lado em qualquer largura. Sem
   o tamanho de reserva, a imagem quebrada fica com a proporção do width/height dela, como as que carregam. O min-width:0
   segura a coluna em 1fr, como nos cartões. Fonte, cor e texto não mudam; com os logos carregados, nada muda na tela.
   Se o .logos--cases entrar em outra tela (Clientes, Cases), a regra sobe para o wp.css */
body.home .logos--cases>a{min-width:0}
body.home .logos--cases img{contain-intrinsic-size:none}

/* ---------- Rodada 3 (pedidos do Fabio, 26/10/2026; spec 15) ---------- */

/* Item 2: alternância escuro/claro até o fim da página. A régua clara (section--rule, end-form) não vem depois de uma seção
   escura; duas escuras seguidas (quando o bloco claro do meio não sai, ex. o de cases por serviço sem dado) ganham a régua
   do escuro */
body.home #conteudo>.dark+:is(.section--rule,.end-form){border-top:0}
body.home #conteudo>.dark+.dark{border-top:1px solid var(--line-d)}
/* depoimentos na faixa escura (.thanks-quotes do site.css): a barra da faixa que desliza no celular no tom do escuro */
body.home .thanks-quotes .quotes{scrollbar-color:var(--line-d) transparent}
/* frase de apoio do cabeçalho de seção dentro de seção escura (Recomendados): a regra do .section-head .t-body (cor --text)
   vinha depois da do .dark, com o mesmo peso, e a frase saía #2b2925 sobre preto */
body.home .dark .section-head .t-body{color:var(--grey-d)}

/* Item 6: cases por serviço (#cases-servicos, template-parts/home/provas.php). Os cartões claros e separados do Agradecimento
   (.cases-grid--light.cases-grid--gap), com o H3 (número + métrica), o parágrafo de fatos (item 15) e o link do rodapé. O id
   na frente vence as regras do site.css para o .case-big no celular (grade "num metric" / "foot foot") e para o último
   cartão ímpar no tablet. Celular primeiro */
#cases-servicos .prova{display:flex;flex-direction:column;align-items:stretch;grid-column:auto;row-gap:0}
#cases-servicos .prova__conta{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:1rem;align-items:center;
  font:inherit;letter-spacing:normal}
#cases-servicos .prova__conta>*{grid-area:auto;margin:0}
#cases-servicos .prova .case-big__metric b{font-weight:700}
/* o nome do serviço não quebra no meio ("cases de Inbound / Marketing publicados" a 1366 e a 1440): ele fica inteiro numa
   linha, e a quebra cai antes ou depois dele. Nenhum texto muda */
#cases-servicos .prova .case-big__metric b{white-space:nowrap}
/* Item 15 (pedido do Fabio de 27/10/2026, spec 18): o parágrafo de fatos do serviço no lugar do rótulo e da lista de
   segmentos. Corpo do texto em todas as larguras (16px, entrelinha 1,6, cor do texto): no cartão do celular e nas três
   colunas do desktop a linha fica com ~35 a 45 caracteres, e na coluna única do tablet com ~75. Largura total do cartão,
   sem max-width, com text-wrap:pretty (sem palavra sozinha na última linha). Mais perto do número que do rodapé: o texto é
   do serviço do H3, e a régua do rodapé fecha o cartão. Os vãos vêm só das margens (o row-gap:0 do cartão tira o vão de 1rem
   que o site.css dá à grade do .case-big no celular, e que somava 36px entre o número e o texto): 16px no celular, onde o
   número fica ao lado da métrica, e 20px a partir de 640px; 24px até a régua. Palavra com hífen ("e-commerce", "e-book",
   span.nw de mestre_home_provas_texto()) não parte no hífen */
#cases-servicos .prova__texto{margin:1rem 0 1.5rem;font-size:var(--fs-body);line-height:1.6;color:var(--text);text-wrap:pretty}
#cases-servicos .prova__texto .nw{white-space:nowrap}
@media (min-width:640px){#cases-servicos .prova__texto{margin-top:1.25rem}}
/* links do parágrafo como os dos fatos da Empresa (.fact__a a do site.css): tinta, sublinhado amarelo de 2px a .25em em
   repouso; no mouse a linha engrossa para 3px (wp.css, seção 1e, item 13), sem pular. Sem o id na frente: o hover do wp.css
   (.prova__texto a:hover) precisa vencer esta regra. No toque nada muda (o hover do wp.css fica no @media (hover:hover)) */
.prova__texto a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;
  text-underline-offset:.25em}
#cases-servicos .prova .case-big__foot{margin-top:auto}
/* aqui o .case-big__go é o próprio link (nos outros cartões é um span dentro do a.case-big, que não sublinha): sem o
   sublinhado do navegador, que somava uma linha fina de tinta (de papel no hover) à linha amarela de 2px do site.css */
#cases-servicos .prova .case-big__go{text-decoration:none}
/* item 15: com links no parágrafo, o cartão deixou de ser um link inteiro (saíram o ::after que esticava o "Ver os cases"
   sobre o cartão e o contorno de foco do cartão; cada link tem o seu foco). O hover e o toque do cartão claro do site.css
   (fundo e borda de tinta, métrica em papel, seta andando) não valem aqui: o cartão fica como em repouso, e a seta anda só
   com o mouse no "Ver os cases" */
#cases-servicos .prova:is(:hover,:active){background:var(--surface);color:var(--ink);border-color:var(--line);border-top-color:var(--ink)}
#cases-servicos .prova:is(:hover,:active) .case-big__metric{color:var(--text)}
#cases-servicos .prova:is(:hover,:active) .case-big__foot{border-top-color:var(--line)}
@media (hover:hover){
  #cases-servicos .prova:hover .case-big__go svg{transform:none}
  #cases-servicos .prova .case-big__go:hover svg{transform:translateX(3px)}
}
/* tablet: um cartão por linha (três em 2 colunas deixariam o último sozinho) */
@media (min-width:640px) and (max-width:1023px){#cases-servicos .cases-grid{grid-template-columns:1fr;grid-auto-rows:auto}}
/* desktop: três colunas do mesmo tamanho; número em cima da métrica, como nos outros cartões de case */
@media (min-width:1024px){
  #cases-servicos .prova__conta{display:block}
  #cases-servicos .prova__conta .case-big__metric{display:block;margin-top:.75rem}
  #cases-servicos .cases-grid--n2{grid-template-columns:repeat(2,1fr)}
  #cases-servicos .cases-grid--n1{grid-template-columns:1fr}
}
/* desktop, cartões lado a lado: título, parágrafo e rodapé alinhados de um cartão para o outro (a métrica de 2 linhas,
   "cases de Inbound Marketing publicados", descia o resto do cartão; o parágrafo mais curto deixa o vão embaixo dele, e os
   rodapés ficam na mesma altura). Cada cartão ocupa 3 linhas da grade (subgrid; eram 4 com o rótulo e a lista), sem o vão
   da grade entre elas; sem subgrid, fica a coluna flexível de cima */
@supports (grid-template-rows:subgrid){
  @media (min-width:1024px){
    #cases-servicos .cases-grid:not(.cases-grid--n1){grid-auto-rows:auto}
    #cases-servicos .cases-grid:not(.cases-grid--n1)>.prova{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
    #cases-servicos .cases-grid:not(.cases-grid--n1)>.prova>.prova__texto{grid-row:2}
    #cases-servicos .cases-grid:not(.cases-grid--n1)>.prova>.case-big__foot{grid-row:3;align-self:end}
  }
}

/* Item 14: números do topo maiores (spec 17). Pedido do Fabio (26/10/2026): o bloco de números embaixo do H1 estava
   "meio pequeno", aumentar "mais um pouquinho". Só na Home: os outros .hero-proof (Serviço, Orçamento, Contato, Empresa,
   Autor, Serviços, Agradecimento) ficam com o tamanho do protótipo. Número ~15% maior no celular (28px → 32px a 375) e
   ~25–30% no desktop (40px → ~50px a 1366, ~51px a 1440), num clamp contínuo entre os dois; métrica de 14px para 15px no
   celular e no tablet e de 13px para 16px a partir de 1024px (os tokens --fs-small e --fs-body do site.css), com a mesma
   cor, o mesmo peso e a entrelinha de 1,35 do site.css. O "+" e o "×" acompanham sozinhos (em em). Os espaços crescem na
   mesma proporção, para o bloco não ficar apertado: o vão entre número e métrica, o topo da lista e, no celular (até
   399px, um número por linha), o vão entre as linhas e a coluna do número (6,75rem → 7,75rem: o "500+" de 32px tem ~64px
   e fica a ~76px do texto; com a coluna antiga, a 320 o "eleita a melhor agência de marketing digital do país" terminava
   com "país" sozinho na linha). Com a métrica maior, a quebra das linhas fica com o text-wrap:pretty (o mesmo do
   .hub-hero no site.css): sem ele, "país" ficava sozinho na última linha em várias larguras (de 328 a 348px, de 476 a 604,
   de 1032 a 1100 e de 1172 a 1300, como 1280×720), e com ele a última linha é "do país" (mesma altura do bloco). O vão
   entre número e métrica vale também para o número sem link (o li segura o número quando o link do campo fica vazio). A
   linha divisória, o H1, o subtítulo e o formulário não mudam; no desktop o formulário continua mais alto que a coluna do
   texto e a seção não cresce. Deve voltar ao protótipo (home.html) */
.home-hero .hero-proof .num{font-size:clamp(2rem,1.4rem + 2vw,3.25rem)}
.home-hero .hero-proof__metric{font-size:var(--fs-small);text-wrap:pretty}
.home-hero .hero-proof__list{margin-top:1rem}
.home-hero .hero-proof a,.home-hero .hero-proof__list>li{gap:.25rem}
@media (min-width:1024px){
  .home-hero .hero-proof__metric{font-size:var(--fs-body)}
  .home-hero .hero-proof__list{margin-top:1.125rem}
}
@media (max-width:399px){
  .home-hero .hero-proof:not(.about-proof):not(.author-proof) .hero-proof__list{row-gap:1rem}
  .home-hero .hero-proof:not(.about-proof):not(.author-proof) .hero-proof__list>li:not(:has(>a)),
  .home-hero .hero-proof:not(.about-proof):not(.author-proof) .hero-proof__list>li>a{grid-template-columns:7.75rem minmax(0,1fr)}
}