/* =====================================================================
   Pocket Lab | Ajustes mobile (carregado por último)
   Regra: só media queries de celular e tablet. Nada aqui vale acima de 1100 px,
   então o desktop aprovado não muda. Cada bloco corrige o que corta, estoura,
   sobrepõe ou dificulta o toque, preservando cores, fontes, formas e ordem.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. LAYOUT E ENCAIXE
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* Seis etapas (home e Software House): o empilhamento previsto para o
     mobile era sobrescrito por uma regra posterior do desktop. */
  .capo__p { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 760px) {
  /* Cases empilhados: a coluna do número não pode alargar o cartão */
  .stc__in { grid-template-columns: minmax(0, 1fr); }
  .stc--cl .stc__para { font-size: min(92px, 17vw) !important; }
  .stc__frente { white-space: normal; }

  /* Pares botão + seta: o grupo respeita a largura do cartão e o rótulo quebra */
  .csk__ctas, .s2x__ctas, .stc__txt { max-width: 100%; min-width: 0; }
  .btn__arrow { flex: none; }
}

@media (max-width: 640px) {
  /* Palavra gigante dos palcos (Encontrado., Qualificado, Campanha...) */
  .mt:not(.mt--s2):not(.mt--tl) .mtp__w { font-size: min(84px, 17.5vw); }

  /* Seletor "Fornecedor de posts / Extensão do seu time" */
  .ext__sw button { white-space: normal; padding: 10px 8px; line-height: 1.2; }

  /* Abas roláveis: leve esmaecimento na borda indica que há mais opções */
  .s2t__nav { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .s2t__nav:has(li:last-child button.is-on) { -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 640px) {
  /* Rodapé: a linha legal termina acima do botão da Alba */
  .rod__legal { padding-bottom: 72px; }

}

@media (max-width: 900px) {
  /* Checklist interativo do artigo: a regra de duas colunas dos critérios
     jogava a caixa de marcar para a mesma coluna do texto */
  .pe3__corpo .pe4c label > .pe4c__ck { grid-column: 1; }
  .pe3__corpo .pe4c label > span:last-child { grid-column: 2; }
}

@media (max-width: 1100px) {
  /* Alba: depois da primeira dobra, vira só o ícone (o mesmo estado compacto
     que o desktop já usa), para não cobrir texto, botões e o rodapé */
  .alba.is-compacto:not(.is-foco):not(.is-digitando) .alba__barra-dica { display: none; }
  .alba.is-compacto:not(.is-foco):not(.is-digitando) .alba__barra { gap: 0; padding-right: 7px; }

  /* Barra fixa dos materiais (só existe até 1100 px): a Alba sobe para não
     cobrir o BAIXAR, e o rodapé ganha folga para as duas */
  body:has(.g3fx.is-on) .alba { bottom: 92px; }
  body:has(.g3fx) .rod__legal { padding-bottom: 150px; }

  /* Tempo restante do artigo: sai de cima do texto e vai para o canto
     inferior esquerdo, alinhado ao botão da Alba */
  .pe4t { top: auto; right: auto; left: 16px; bottom: calc(32px + env(safe-area-inset-bottom, 0px)); transform: translateY(6px); }
}

@media (min-width: 641px) and (max-width: 1100px) {
  /* Capa do guia no tablet: a folha de fundo crescia além do quadro e
     cobria a lista "Checklist completo"; volta à proporção do desktop */
  .g3b__ab { width: min(78%, 430px); }
}

/* ---------------------------------------------------------------------
   2. TOQUE, TIPOGRAFIA E NAVEGAÇÃO
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* Menu aberto: a Alba sai da frente até o menu fechar */
  .menu-aberto .alba { display: none; }
  /* Alvos de toque do menu com 44 px */
  .menu__link { min-height: 44px; display: flex; align-items: center; }
  .menu__seta { width: 44px; height: 44px; }
  .topo__nav .submenu a { min-height: 44px; display: flex; align-items: center; }

  /* Listas e botões que ficavam abaixo de 44 px de altura */
  .lista--rodape li > a { min-height: 44px; }
  .s2-albaq li > button, .frx__obj li > button, .es4in__ex li > button, .es4x__ops li > :is(a, button) { min-height: 44px; }
  .s2t__nav button, .g3d__abas button { min-height: 44px; }
  .ck__b button { min-height: 44px; }
  .pe3s > :is(a, button) { width: 44px; height: 44px; }
  .s2m__ctrl button { width: 44px; height: 44px; }
  .pe3__alba, .pe4o { min-height: 44px; }
  .pe4u button, .mlf button, .ifaq__chips a, .hb__nav button, .cnx__tabs button, .i7g__tabs button, .lid2__lk { min-height: 44px; }
  .post__link { min-width: 44px; }
  .filtro, .alba__sug button, .alba__ops button { min-height: 44px; }
  .ch span, .fb__sn span { min-height: 44px; display: inline-flex; align-items: center; }
  /* Títulos sem palavra solta na última linha */
  h1, h2, h3 { text-wrap: balance; }
  .kzr__sw button, .cnb__f button, .blf__f button, .fv__fr button, .ext__sw button, .s6an__tg button,
  .s6ad__tg button, .g3s__tg button, .cnb__mais, .dlh__comp { min-height: 44px; }
  .diag__campo input, .ifaq__busca input, .bll__busca input { min-height: 44px; }
  input[type=range] { min-height: 44px; }

  /* Links de texto: área de toque maior sem mudar o desenho
     (preenchimento compensado por margem negativa) */
  .migalha a, .rod__legal a, .ih__lk, .s2t__lk, .pe3a__lk a, .pe3a__n, .pe4q a,
  .ftb__copiar, .d5w__custa button, .pe4l__k button, .rxi__alt button, .fb__lk, .cgm__prox, .kzh__ficha dd > a, .rodl__links a {
    display: inline-block; padding-block: 15px; margin-block: -15px;
  }
  /* Migalha: o recorte do contêiner passa a incluir a área de toque dos links */
  .migalha { padding-block: 15px; margin-block: -15px; }
  .lg-hero__meta a, .csk__ver, .s2x__alt button { display: inline-block; padding-block: 15px; margin-block: -15px; }
  /* Logo e pausa da demonstração: área de toque invisível ao redor */
  .topo .logo, .demo__pp, .lideres__in { position: relative; }
  .topo .logo::after, .demo__pp::after { content: ""; position: absolute; inset: -8px -6px; }
  .lideres__in::after { content: ""; position: absolute; inset: -9px -4px; }
  .rod__legal a { padding-inline: 4px; margin-inline: -4px; }

  /* Aceite dos formulários: a linha inteira vira alvo de toque */
  .aceite label, .fx-aceite label { padding-block: 10px; }
  .aceite input, .fx-aceite input { width: 20px; height: 20px; flex: none; }

  /* Campos com 16 px de texto (o iPhone não dá zoom ao focar) e 48 px de altura */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select, textarea { font-size: max(16px, 1em); }
  .campo input, .campo select, .fc input, .fc select, .rxi__campo input { min-height: 48px; }
  /* Teclado virtual: o campo focado não fica colado no topo nem escondido */
  input, select, textarea { scroll-margin: 96px 0 140px; }
}

@media (max-width: 640px) {
  /* Texto corrido com no mínimo 16 px no celular */
  .pe4r li, .mt__manifesto, .fb__rq p, .hz__txt, .csk__arco li, .pe3a__c, .ftb__frase, .ftc p,
  .cr__det li, .kzv__como, .au3c__lista p, .g3b__fs, .d5k__custa, .d5w__custa p, .ext__t,
  .s2l__leitura p, .cgq, .trl__ent, .capo__no li, .capo__no p:not(.capo__rot), .lid2__bio, .lg__ajuda p, .tvs__proc p,
  .d5k__res, .d5c__conf p, .d5v__col li, .tvx__faz li, .frd5__cad li, .es4u li, .es4et li, .obp li,
  .obt__tx p, .kzh__fs dd, .kz-nao p, .kzt__leg, .fb__passo, .d5h__ex p, .i7c__cta, .qx__lead,
  .i7s__dica, .dz__case p, .pe4c__res, .mlc__dentro li, .rxh__ex p, .ftb__lista li, .i7r__vazio,
  .i7g__q, .lg__nota { font-size: 16px; }
}

/* ---------------------------------------------------------------------
   3. RECURSOS DE DESTAQUE E PERFORMANCE
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* Seções fora da tela (marcadas por mobile.js) pausam as animações contínuas */
  .pl-fora *, .pl-fora *::before, .pl-fora *::after { animation-play-state: paused !important; }

  /* Caixa de saída: com mobile.js ativo, os pontos mudam de estado por classe */
  .mail__pontos.pl-js i { animation: none; transition: background-color .24s linear, scale .24s linear; }
  .mail__pontos.pl-js i.f { background: var(--yellow); scale: 1.5; }
  .mail__pontos.pl-js i.l { background: rgba(244, 182, 63, .5); }
  /* Janela do diagnóstico aberta: a Alba não cobre o botão do formulário */
  body:has(.rx.is-gate) .alba { display: none; }
}