/* ==========================================================================
   3M Publicidade: CAMADA MOBILE  (assets/mobile.css)
   --------------------------------------------------------------------------
   O QUE É
   Correções de responsividade para celular/tablet. Este arquivo é carregado
   POR ÚLTIMO no <head> de cada página (depois do style.css e do <style>
   interno da página), então vence em caso de empate de especificidade.

   REGRAS DESTE ARQUIVO (leia antes de editar)
   1. TODA regra fica dentro de um @media (max-width: ...). Nada aqui pode
      alterar o desktop. Breakpoints usados:
        - 1199px → só o M9 (tablet deitado/notebook pequeno, rodapé)
        - 979px → mesmo corte do menu hambúrguer do style.css
        - 860px → corte em que a seção "Benefícios" (.whybox--split) empilha
        - 639px → celulares
   2. Não carregado nas páginas de /cases (decisão do cliente: os cases
      ficam como estão).
   3. Cada bloco tem comentário dizendo QUAL página/componente corrige e
      POR QUÊ. Ao adicionar algo, siga o mesmo padrão e registre no
      changelog de docs/RESPONSIVO.md.
   4. Para desfazer tudo: remover a linha <link ... mobile.css> das páginas
      (ver docs/RESPONSIVO.md, seção "Como reverter").

   ÍNDICE
   M1. Base: títulos e textos longos
   M2. Seção "Benefícios" (.whybox--split): coluna que estourava a tela
   M3. Gráficos animados da seção "Benefícios" (um bloco por página)
   M4. "Na prática": mockups (LinkedIn etc.)
   M5. Pacotes (home): logo do Meta
   M6. Rodapé: 1 coluna empilhada
   M7. Botão flutuante do WhatsApp
   M8. Outros ajustes pontuais (telas bem estreitas, 320px)
   M9. Tablet deitado / notebook pequeno (980px–1199px): rodapé
   --- v2 (22/09/2026): páginas mais curtas no celular ---
   M10. Carrossel horizontal (.m-carousel)
   M11. "Continuar lendo" (.m-readmore)
   M12. Rodapé: acordeão + links com área de toque de 44px
   --- v3 (22/09/2026) ---
   M13. Dobra "Onde você está / Onde você vai estar" (.bridge): respiro menor
   --- v4 (22/09/2026) ---
   M14. Dobra "Na prática": eyebrow + título centralizados no celular
   --- v5 (22/09/2026) ---
   M15. Dobras "Sobre o serviço" e "Onde você está / vai estar": cabeçalho
        centralizado no celular
   --- v6 (22/09/2026) ---
   M16. Dobra "Benefícios": texto todo centralizado no celular
   M17. Dobra "Onde você está / vai estar": só eyebrow (títulos removidos na v7)
   --- v8 (22/09/2026) ---
   M18. Dobra "Sobre o serviço": menos espaço acima no celular
   --- v9 (22/09/2026) ---
   M19. Cards de "Sobre o serviço" (.seg-card): menos espaço vazio
   --- v11 (22/09/2026) ---
   M20. Dobra "Benefícios": menos espaço entre "Continuar lendo" e o gráfico
   --- v13 (22/09/2026) ---
   M21. Rodapé: linha do CNPJ em uma linha só
   ========================================================================== */


/* --------------------------------------------------------------------------
   M1. Base: títulos e textos longos
   Os <br> fixos dos títulos foram trocados por <br class="lg"> (só desktop).
   Aqui o navegador equilibra as linhas do título no celular, evitando
   palavra sozinha na última linha, e quebra palavras gigantes se preciso.
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  /* só h1/h2: h3/h4 dentro dos gráficos animados não devem ser afetados */
  h1,h2{text-wrap:balance;overflow-wrap:break-word}
  p,li{overflow-wrap:break-word}
}


/* --------------------------------------------------------------------------
   M2. Seção "Benefícios" (.whybox--split)
   Páginas: servicos/analytics, audiovisual, blog, criacao-de-marca, design,
   ecommerce, edicao-de-video, email-marketing, gestao-de-redes-sociais,
   google-meu-negocio, landing-pages, seo, sites.

   BUG: em ≤860px o grid vira 1 coluna "1fr". Um "1fr" nunca fica menor que
   o conteúdo mais largo dentro dele, e os gráficos têm textos com
   white-space:nowrap → a coluna esticava até 480px e o texto saía da tela.
   CORREÇÃO: minmax(0,1fr) + min-width:0 nos filhos.

   Também: no celular o texto passa a ser alinhado à esquerda (parágrafos
   longos centralizados ficam difíceis de ler) e o card perde um pouco de
   padding para sobrar largura para os gráficos.
   -------------------------------------------------------------------------- */
@media (max-width:860px){
  .whybox--split{grid-template-columns:minmax(0,1fr)}
  .whybox--split > *{min-width:0}
  .whybox__visual{width:100%}
  .whybox__visual > *{max-width:100%}
}
@media (max-width:639px){
  .whybox{padding:28px 18px}
  .whybox--split,.whybox__text{text-align:left}
  /* os gráficos herdavam o text-align:center da seção */
  .whybox__visual{text-align:left}
}


/* --------------------------------------------------------------------------
   M3. Gráficos animados da seção "Benefícios"
   Cada gráfico tem o CSS original no <style> interno da própria página.
   Aqui ficam só os ajustes de celular, agrupados por página.
   -------------------------------------------------------------------------- */
@media (max-width:639px){

  /* M3.0 Todas as páginas: selo "AO VIVO" dos cards quebrava em 2 linhas. */
  .bl-live,.dg-live,.em-live,.ga-live,.ins-live,.mt-live,.rt-live,.seo-live{white-space:nowrap;flex:none}

  /* M3.1 servicos/design + servicos/audiovisual: "5 etapas, 1 processo"
     5 cards lado a lado com min-width:82px não cabem em ~300px.
     Mantém as 5 colunas, mas compactas: só ícone + nome, sem subtítulo. */
  .mt-card{padding:18px 14px}
  .mt-head{gap:8px}
  .mt-icon-btn{display:none}
  .mt-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .mt-card .role{min-width:0;padding:10px 2px}
  .mt-card .role-icon{width:30px;height:30px;margin-bottom:6px}
  .mt-card .role-icon svg{width:16px;height:16px}
  .mt-card .role-name{font-size:10px;overflow-wrap:normal;word-break:normal}
  .mt-card .role-meta{display:none}
  .mt-pipeline{flex-wrap:wrap;gap:8px}

  /* M3.2 servicos/email-marketing: envelope animado (.em-fly) ficava em
     cima do selo "AO VIVO". Sem espaço para ele no celular: escondido. */
  .em-fly{display:none}

  /* M3.3 servicos/gestao-de-redes-sociais: 3 posts lado a lado cortavam
     o @usuário; linha de stories espremida. */
  .rt-posts{gap:6px}
  .rt-post{min-width:0}
  .rt-info{padding:7px 6px}
  .rt-handle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rt-mets{gap:2px}
  .rt-met__val{font-size:.58rem;white-space:nowrap}
  .rt-stories{flex-wrap:wrap}

  /* M3.5 servicos/blog: linha "Há 2 min · 285 visualizações · 12
     comentários" quebrava cada item em 2 linhas. */
  .bl-meta{flex-wrap:wrap;gap:4px 8px}
  .bl-meta__item{white-space:nowrap}

  /* M3.4 servicos/landing-pages: caixas "1.000 cliques → leads" encostavam
     na borda. */
  .convfunnel{gap:8px;max-width:100%}
  .convfunnel__col > *{max-width:100%}
}


/* --------------------------------------------------------------------------
   M4. "Na prática": mockups
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  /* servicos/linkedin-ads: "12 comentários · 9 compartilhamentos" quebrava
     em duas linhas e desalinhava. */
  .feedmock__stats{gap:10px;padding-inline:14px;font-size:.68rem}
  .feedmock__stats span{white-space:nowrap}
}


/* --------------------------------------------------------------------------
   M5. Pacotes (home): logo do Meta
   O <img> tem width="1200" height="13" (proporção errada). Enquanto a imagem
   carrega (lazy), o navegador reserva ~1.600px de largura e o "Max" é
   empurrado para fora da tela.
   -------------------------------------------------------------------------- */
@media (max-width:979px){
  .pkg__title img{max-width:70%}
}


/* --------------------------------------------------------------------------
   M6. Rodapé: 1 coluna empilhada (pedido do cliente)
   BUG: 2 colunas + títulos com white-space:nowrap e letter-spacing largo →
   "DESENVOLVIMENTO"/"Google Analytics" empurravam a 2ª coluna para fora.
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  .footer__map{grid-template-columns:minmax(0,1fr);gap:32px}
  .footer__col h3,.footer__col h3 a{white-space:normal}
  .footer__col h3{letter-spacing:.1em}
  .footer__brand,.footer__contact,.footer__social{max-width:100%}
  .footer__contact,.footer__contact *{overflow-wrap:anywhere}
  /* espaço no fim para o botão do WhatsApp não cobrir CNPJ/links legais */
  .footer{padding-bottom:96px}
  .footer__bottom nav{gap:12px 20px}
}


/* --------------------------------------------------------------------------
   M7. Botão flutuante do WhatsApp
   No celular ele cobria CTAs e o fim dos cards. Fica menor e mais no canto.
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  .wa-float{right:14px;bottom:14px;padding:12px}
  .wa-float svg{width:22px;height:22px}
}


/* --------------------------------------------------------------------------
   M8. Outros ajustes pontuais
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  /* servicos/tiktok-ads (e onde houver .campsel-layout): mesmo problema do
     M2 (.campsel-layout e .campsel__body), a coluna "1fr" esticava com o conteúdo em telas de 320px. */
  .campsel-layout{grid-template-columns:minmax(0,1fr)}
  .campsel-layout > *{min-width:0}
}
@media (max-width:860px){
  .campsel__body{grid-template-columns:minmax(0,1fr)}
  .campsel__body > *{min-width:0}
}
@media (max-width:639px){
  /* obrigado.html: o widget do Calendly vem com style="min-width:320px"
     inline; em celulares de 320px isso estourava a tela. !important é
     necessário porque o valor está no atributo style do HTML. */
  .calendly-inline-widget{min-width:0 !important}
}


/* --------------------------------------------------------------------------
   M9. Tablet deitado / notebook pequeno (980px a 1199px)
   A partir de 980px o rodapé vira 4 colunas com gap de 75px e títulos
   nowrap; entre 980 e ~1100px a coluna "SOCIAL MEDIA" passava 20px da
   borda (ex.: iPad deitado, 1024px). Acima de 1199px nada muda.
   -------------------------------------------------------------------------- */
@media (min-width:980px) and (max-width:1199px){
  .footer__map{grid-template-columns:repeat(4,auto);justify-content:space-between;column-gap:20px}
  .footer__col h3,.footer__col h3 a{white-space:normal}
  /* "DESENVOLVIMENTO" é uma palavra só (não quebra): menos espaçamento */
  .footer__col h3{letter-spacing:.04em;font-size:.76rem}
}


/* ==========================================================================
   v2 (22/09/2026): PÁGINAS MAIS CURTAS NO CELULAR
   Componentes ativados por CLASSE no HTML. Sem a classe, nada acontece.
   No desktop essas classes não fazem nada (todo o CSS está em ≤639px).
   O JS correspondente está no main.js, bloco "[mobile v2]".
   ========================================================================== */

/* --------------------------------------------------------------------------
   M10. Carrossel horizontal: class="m-carousel" num .grid de cards/posts
   No celular os cards ficam lado a lado e o usuário arrasta com o dedo.
   Cada card ocupa 84% da largura, então o próximo "espia" na borda e
   mostra que dá para arrastar. O JS cria os pontinhos (.m-dots) abaixo.
   Usado em: 35 grids (lista em docs/RESPONSIVO.md, seção 12).
   Para usar em outro grid: adicione a classe m-carousel no <div class="grid ...">.
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  .m-carousel{
    display:flex;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* ocupa a largura toda da tela (sangra até a borda) e alinha o 1º card
       com o texto da página */
    width:auto;
    align-self:stretch;
    margin-inline:calc(var(--space-1) * -1);
    padding:6px var(--space-1) 18px;   /* respiro para sombra/hover dos cards */
    scroll-padding-inline:var(--space-1);
  }
  .m-carousel::-webkit-scrollbar{display:none}
  .m-carousel > *{
    flex:0 0 84%;
    min-width:0;
    scroll-snap-align:start;
  }
  /* a animação de entrada (.reveal) depende de o card estar na tela; os
     cards à direita nunca "entram" na vertical, então ficam sempre visíveis */
  .m-carousel > .reveal{opacity:1;transform:none}
  /* o "levantar no toque" dos cards é cortado pelo carrossel */
  .m-carousel > .card:hover,.m-carousel > .post:hover{transform:none}
  /* ícones sem moldura (Tráfego/Social Media): no carrossel ganham um card
     leve, senão os itens soltos não parecem "arrastáveis" */
  .grid--bare-icons.m-carousel > .card{
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--r-lg);padding:var(--space-1);
  }

  /* pontinhos criados pelo JS (vêm com o atributo hidden; aqui aparecem) */
  .m-dots{display:flex;justify-content:center;gap:8px;margin-top:2px}
  .m-dots button{
    width:8px;height:8px;padding:0;border:0;border-radius:999px;
    background:var(--line);cursor:pointer;
    transition:width .25s ease,background .25s ease;
    /* área de toque maior que o ponto visível */
    position:relative;
  }
  .m-dots button::before{content:"";position:absolute;inset:-10px -4px}
  .m-dots button[aria-current="true"]{width:22px;background:var(--brand)}
}

/* --------------------------------------------------------------------------
   M11. "Continuar lendo": class="m-readmore" num bloco de texto (.prose)
   No celular mostra só as 15 primeiras palavras (trecho criado pelo JS,
   .m-readmore__trecho) + o botão "Continuar lendo"; ao abrir, o trecho some
   e o texto completo aparece. Sem JS, o texto fica todo aberto. O texto
   original continua no HTML (SEO intacto). Limite: MAX_PALAVRAS no main.js.
   Usado em: parágrafos da seção "Benefícios" de 13 páginas de serviço.
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  .m-readmore.m-ready:not(.is-open) > :not(.m-readmore__trecho){display:none}
  /* [v10] trecho de até 15 palavras, criado pelo JS; some quando abre */
  .m-readmore__trecho{display:block;margin:0}
  .m-readmore.is-open > .m-readmore__trecho{display:none}
  .m-readmore-btn{
    display:inline-flex;align-items:center;gap:6px;
    margin-top:10px;min-height:44px;padding:0;
    background:none;border:0;cursor:pointer;
    font:inherit;font-weight:600;font-size:.95rem;color:var(--brand);
  }
  .m-readmore-btn svg{width:16px;height:16px;transition:transform .25s ease}
  .m-readmore-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
}

/* --------------------------------------------------------------------------
   M12. Rodapé: acordeão + área de toque
   a) Links do rodapé tinham ~20px de altura (o recomendado é 44px): cada
      link vira um bloco de 44px.
   b) Com links maiores e em 1 coluna, o rodapé passaria de ~1.700px para
      ~2.100px em TODAS as páginas. Por isso as 4 listas de links (Empresa,
      Tráfego, Desenvolvimento, Social Media) viram acordeão: o título
      continua sendo link e o botão ao lado abre/fecha a lista.
      O JS (main.js, "M12") põe a classe .m-acc e cria o botão; sem JS as
      listas ficam abertas.
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  /* a) área de toque */
  .footer__col ul{gap:0}
  .footer__col li a{display:flex;align-items:center;min-height:44px}
  .footer__contact{gap:0}
  .footer__contact > a{display:flex;align-items:center;min-height:44px}
  .footer__nap a[href^="tel"]{display:inline-block;padding:10px 0}
  .footer__gmb{min-height:44px}
  .footer__bottom nav a{display:inline-flex;align-items:center;min-height:44px}
  .footer__bottom nav{gap:0 20px}
  .footer__social{gap:14px}
  .footer__social a{width:44px;height:44px}

  /* b) acordeão */
  .footer__map{gap:0}
  .footer__col.m-acc{border-top:1px solid var(--line)}
  .footer__col.m-acc h3{
    display:flex;align-items:center;justify-content:space-between;
    min-height:52px;margin:0;
  }
  .footer__col h3 a{min-height:44px}
  .m-acc-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-right:-10px;padding:0;
    background:none;border:0;cursor:pointer;color:var(--brand);
  }
  .m-acc-btn svg{width:20px;height:20px;transition:transform .25s ease}
  .footer__col.is-open .m-acc-btn svg{transform:rotate(180deg)}
  .footer__col.m-acc:not(.is-open) > ul{display:none}
  .footer__col.m-acc.is-open > ul{padding-bottom:10px}
}


/* --------------------------------------------------------------------------
   M13. Dobra "Onde você está / Onde você vai estar" (.bridge)   [v3]
   Páginas: trafego, social-media, desenvolvimento, pacotes/google,
   pacotes/meta e 13 páginas de servicos/.
   No celular havia ~130px de espaço vazio ACIMA de "Onde você está" e
   ABAIXO do último card de "Onde você vai estar". Esse espaço era a soma
   do padding da <section> (50px) + o padding do .bridge (25px) + o padding
   da seção vizinha (50px). Aqui zeramos o padding do .bridge e deixamos só
   10px na <section>; o respiro passa a ser ~60px (o da seção vizinha).
   :has() seleciona só as <section> que contêm o .bridge, sem mexer no HTML.
   O espaço ENTRE as duas metades (75px) não foi alterado.
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  /* !important: em pacotes/google a <section> da dobra tem padding no
     atributo style="" do HTML, que só perde para !important */
  section:has(> .container > .bridge){padding-top:10px !important;padding-bottom:10px !important}
  .bridge{padding-block:0}
  /* pacotes/google: a seção ANTERIOR ("Na prática", #pratica-google) tem
     style="padding-bottom:100px" pensado para o desktop; no celular volta
     ao padrão de 50px */
  section[aria-labelledby="pratica-google"]{padding-bottom:var(--space-2) !important}
}


/* --------------------------------------------------------------------------
   M14. Dobra "Na prática": eyebrow e título centralizados   [v4]
   O style.css só centraliza .section-head--center a partir de 640px, então
   no celular 8 páginas mostravam "Na prática" alinhado à esquerda, enquanto
   as outras 10 (que usam outra marcação) já eram centralizadas.
   Páginas corrigidas: servicos/sites, landing-pages, ecommerce, google-ads,
   meta-ads, linkedin-ads, tiktok-ads e pacotes/google.
   Seleção: o título dessas dobras tem id começando com "pratica-" ou
   "anuncio-". Dobra "Na prática" nova → use <h2 id="pratica-...">.
   As demais seções com .section-head--center continuam como estavam.
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  .section-head--center:has(> h2[id^="pratica-"]),
  .section-head--center:has(> h2[id^="anuncio-"]){text-align:center}
}


/* --------------------------------------------------------------------------
   M15. Cabeçalhos centralizados no celular   [v5]
   Pedido do cliente: centralizar SÓ o cabeçalho (eyebrow + título + texto
   de apoio) destas duas dobras. O conteúdo abaixo (cards, listas) continua
   alinhado à esquerda.

   a) "Sobre o serviço": 14 páginas (13 de servicos/ + desenvolvimento).
      O título tem id começando com "incluso-". Dobra nova → <h2 id="incluso-...">.
      Exceção: pacotes/google e pacotes/meta (dobra "Google Max"/"Meta Max").
   b) "Onde você está / Onde você vai estar" (.bridge): 18 páginas. Cada
      metade tem eyebrow + título; os cards (.bridge__cards) voltam para a
      esquerda.
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  /* a) Sobre o serviço */
  /* pacotes/google e pacotes/meta também usam id "incluso-", mas a dobra lá
     se chama "Google Max"/"Meta Max" (não "Sobre o serviço"): ficam de fora */
  .section-head--center:has(> h2[id^="incluso-"]:not(#incluso-google):not(#incluso-meta)){text-align:center}

  /* b) Onde você está / vai estar */
  .bridge__grid > div{text-align:center}
  .bridge__grid .bridge__cards{text-align:left}
}


/* --------------------------------------------------------------------------
   M16. Dobra "Benefícios" (.whybox--split): texto centralizado   [v6]
   Pedido do cliente. Páginas: 13 de servicos/ (analytics, audiovisual, blog,
   criacao-de-marca, design, ecommerce, edicao-de-video, email-marketing,
   gestao-de-redes-sociais, google-meu-negocio, landing-pages, seo, sites).
   Centraliza eyebrow, título, parágrafos e o botão "Continuar lendo".
   SUBSTITUI o alinhamento à esquerda que o M2 aplicava a esse texto.
   Os gráficos animados (.whybox__visual) continuam centralizados como bloco,
   mas o texto DENTRO deles segue à esquerda (listas, números e rótulos
   centralizados desalinham os cards).
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  .whybox--split,.whybox__text{text-align:center}
  .whybox__visual{text-align:left}
}

/* --------------------------------------------------------------------------
   M17. Dobra "Onde você está / vai estar" (.bridge): só o eyebrow   [v6→v7]
   Na v7 os <h2> dessa dobra foram REMOVIDOS do HTML (todas as telas), a
   pedido do cliente; o id que a <section> usa em aria-labelledby passou
   para o eyebrow "Onde você está". Aqui fica só o ajuste do eyebrow, que
   agora encosta direto nos cards.
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  .bridge__grid > div > .eyebrow{display:block;margin-bottom:0}
}


/* --------------------------------------------------------------------------
   M18. Dobra "Sobre o serviço": menos espaço acima   [v8]
   Pedido do cliente. Entre o fim da dobra anterior ("Benefícios"; em
   desenvolvimento.html é "Percepção de Valor") e o eyebrow "Sobre o
   serviço" havia 105px no celular (50px de cada seção + 5px). O topo da
   seção cai de 50px para 15px → ~70px, no mesmo ritmo da dobra
   "Onde você está" (M13). 14 páginas (mesma seleção do M15a).
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  section:has(> .container > .section-head--center > h2[id^="incluso-"]:not(#incluso-google):not(#incluso-meta)){padding-top:15px}
}


/* --------------------------------------------------------------------------
   M19. Cards da dobra "Sobre o serviço" (.seg-card): espaço vazio   [v9]
   Pedido do cliente. 16 páginas: as 13 de servicos/ com "Sobre o serviço",
   mais google-ads, meta-ads, linkedin-ads, tiktok-ads e desenvolvimento
   (todas com o carrossel .seg-wrap__grid).
   a) Ícone → título: 50px (margin-bottom do ícone 25px + margin-top do h3
      25px do style.css). Fica 16px, zerando o margin-top do h3.
   b) Texto → borda de baixo: além do padding de 25px, o carrossel esticava
      todos os cards até a altura do mais alto (até +47px de branco). Agora
      cada card tem a altura do próprio conteúdo (align-items:flex-start).
   Os demais cards do site (.card sem .seg-card) já tinham 25px e não mudam.
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  .seg-card .card__icon{margin-bottom:16px}
  .seg-card h3{margin-top:0}
  .seg-wrap__grid.m-carousel{align-items:flex-start}
}


/* --------------------------------------------------------------------------
   M20. Dobra "Benefícios": espaço abaixo de "Continuar lendo"   [v11]
   Pedido do cliente. O espaço entre o botão e o gráfico logo abaixo era o
   gap do grid (.whybox--split, 50px) + os ~12px livres dentro do botão (ele
   tem 44px de altura mínima para o toque). Dava ~62px de branco.
   O gap passa a 26px (~38px no total); a área de toque do botão continua
   com 44px. 13 páginas de servicos/ com a dobra "Benefícios".
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  .whybox--split{row-gap:26px}
}


/* --------------------------------------------------------------------------
   M21. Rodapé: "© 2026 3M Publicidade. CNPJ ..." em UMA linha   [v13]
   Pedido do cliente. Com 13,6px o texto precisa de 344px e só cabe a partir
   de ~414px de tela, então quebrava em duas linhas em quase todos os
   celulares. A fonte passa a acompanhar a largura da tela (3,05vw), com
   piso de 9,5px e teto no tamanho atual, sempre com folga para caber em
   uma linha de 320px para cima.
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  .footer__bottom p{font-size:clamp(9.5px,3.05vw,.85rem)}
}

/* --------------------------------------------------------------------------
   M22. Cases por frente: texto de apoio colado nos botões de filtro   [v14]
   Páginas: cases/trafego, cases/desenvolvimento, cases/social-media.
   Problema: o .blogfilter nasce com margin-top:-25px (calc(var(--space-1)*-1)),
   pensado para o desktop, onde o .section-head tem 50px de margin-bottom —
   sobra 25px. No celular o style.css derruba essa margem para 25px, então
   25 - 25 = ZERO: a linha "Confira os cases..." encostava no botão "Todos".
   Solução: zerar a margem negativa quando o filtro vem logo depois do
   cabeçalho da seção, devolvendo os 25px (--space-1) de respiro. O seletor
   de irmão adjacente deixa o blog/index de fora, onde o .blogfilter vem
   depois do breadcrumb e a margem negativa continua correta.
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  .section-head--split + .blogfilter{margin-top:0}
}
