/* Acabamento mobile (≤767px). Nada aqui vale no desktop.
   Escopo: conteúdo das páginas (main e dobras com data-screen-label). Header, footer e popup ficam de fora. */
@media (max-width: 767px) {
  /* Padrão 1 + 2: duas colunas texto/mídia viram uma; mídia vai para baixo do texto */
  :where(main, section[data-screen-label]) [style*="grid-template-columns: minmax(0px"] { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  :where(main, section[data-screen-label]) [style*="grid-template-columns: minmax(0px"] > :not(:has(h1, h2, h3, p, ul, form)) { order: 2; }

  /* Padrão 1: linha "título + setas/botão" quebra em vez de espremer o título */
  :where(main, section[data-screen-label]) [style*="justify-content: space-between"][style*="align-items: flex-end"] { flex-wrap: wrap !important; row-gap: 20px !important; }

  /* Grades de 3 cards de conteúdo (Blog dos Segmentos, "Leia também") em uma coluna */
  section[data-screen-label="Leia também"] [style*="grid-template-columns: repeat(3"],
  section[data-screen-label="Blog"] [style*="grid-template-columns: repeat(3"] { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }

  /* Cards da Teca (Home): ícone acima do texto */
  .teca-card { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }

  /* Padrão 3: botões com altura fixa crescem com o texto */
  :where(main, section[data-screen-label]) a[style*="display: inline-flex"][style*="height:"]:not([style*="width:"]),
  :where(main, section[data-screen-label]) button[style*="height:"]:not([style*="width:"]):not([aria-label]) {
    height: auto !important; min-height: 48px; padding-top: 13px !important; padding-bottom: 13px !important;
    white-space: normal !important; text-align: center; line-height: 1.3 !important; max-width: 100%; box-sizing: border-box; justify-content: center;
  }

  /* Padrão 5: respiro vertical único, 56px no topo e na base de cada dobra */
  section[data-screen-label]:not([data-screen-label^="Hero"]):not([data-screen-label="Footer"]) > div:first-child[style*="padding"],
  section[data-screen-label="CTA final"] > .sec-pad,
  .esteira-numeros,
  section[data-screen-label="Integrações"] > div > div[style*="padding: 64px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  .rt-sec { margin-top: 56px !important; margin-bottom: 56px !important; }
}

/* Listas de ícone em grade (casas-grid, sp-tipos, kds-tipos): sem recuo alternado no celular.
   Causa: regras de tablet/desktop com :nth-child(3n+1) davam padding-left a itens 1, 4, 7… e venciam a regra mobile. */
@media (max-width: 767px) {
  .casas-grid > div:nth-child(n):nth-child(n),
  .sp-tipos > div:nth-child(n):nth-child(n),
  .kds-tipos > div:nth-child(n):nth-child(n) { padding-left: 0 !important; padding-right: 0 !important; border-left: none !important; }
}