/* =========================================================
   TELEMÓVEL · ritmo de espaçamento único (carregado por último)
   --sec   espaço no topo/fundo de cada secção
   --bloco espaço entre blocos (título+texto → cartões → botão)
   --texto espaço entre título e texto
   --cta   espaço entre texto e botão
   ========================================================= */
@media (max-width: 860px) {
  :root { --sec: 40px; --bloco: 32px; --texto: 14px; --cta: 24px; }

  /* títulos e textos: sem margens herdadas do computador */
  body main h2 { margin: 0; }
  body main .text-24, body main .text-20 { margin-top: var(--texto); }
  body main .btn { margin-top: var(--cta); }
  body main .btn + .micro, body main .micro { margin-top: 10px; }

  /* ---------- Banner (as duas páginas) ---------- */
  body .hero, body main > .rs-hero { padding-bottom: 40px; }
  body .hero .hero__text { margin-top: var(--bloco); }
  body .hero h1, body .rs-hero h1 { margin-top: 0; }
  body .rs-hero .rs-kicker + h1 { margin-top: 10px; }
  body .hero__lead, body .rs-hero__lead { margin-top: var(--texto); }
  body .hero .btn, body .rs-hero .btn { margin-top: var(--cta); }
  body .hero__list { margin-top: var(--cta); margin-bottom: 0; }
  body .hero__list li:last-child { margin-bottom: 0; }
  body .hero::after { display: none; }

  /* ---------- Fita ---------- */
  body .faixa { margin: 0; }
  body .faixa + .panel, body .faixa + .problema, body .faixa + .rs-porque { padding-top: var(--sec); }

  /* ---------- Secções ---------- */
  body .problema, body .rs-porque, body .processo, body .metodo, body .sobre,
  body .rs-foco, body .rs-lista { padding: var(--sec) 0; margin: 0; }
  body .planos { padding: var(--sec) 0 0; }
  body .faq { padding: var(--sec) 0 0; }
  body .cta-final { padding: var(--sec) 0 var(--sec); }

  /* Problema / Por quê */
  body .problema__head p { margin-top: var(--texto); }
  body .stats { margin-top: var(--bloco); gap: 14px; }
  body .problema__punch { margin-top: var(--bloco); }
  body .problema .btn { margin-top: var(--cta); }
  body .fontes { margin-top: var(--cta); }

  /* Processo */
  body .processo__grid { gap: var(--bloco); }
  body .processo__intro p.text-24 { margin-top: var(--texto); }
  body .processo__intro .btn { margin-top: var(--cta); }
  body .processo__intro p.text-20 { margin-top: 14px; }
  body .etapas { gap: 14px; }
  body .etapa { padding: 28px 24px; }
  body .etapa p { margin-top: 12px; }
  body .etapa__num { margin-top: 20px; font-size: 64px; }

  /* Método */
  body .metodo__text p { margin-top: var(--texto); }
  body .metodo__text .btn { margin-top: var(--cta); }
  body .metodo__mockups { margin-top: var(--bloco); }
  body .metodo .note--light { margin-top: 12px; }
  body .pilares { margin-top: var(--bloco); row-gap: 0; }
  body .pilar, body .pilar:nth-child(3) { padding: 24px 0; }
  body .pilar:first-child { padding-top: 0; }
  body .pilar h3, body .pilar p { margin-top: 12px; }

  /* Sobre */
  body .sobre__grid { gap: var(--bloco); }
  body .sobre__text h2 + p { margin-top: var(--texto); }
  body .sobre__text p { margin-top: 14px; }
  body .sobre__aside { padding-top: 64px; }
  body .note--tilt { top: 0; }

  /* Planos / Formatos */
  body .planos__grid { margin-top: var(--bloco); gap: 14px; }
  body .plano { padding: 28px 24px; }
  body .plano__desc { margin-top: 12px; }
  body .plano ul { margin-top: 20px; }
  body .plano li { padding-bottom: 10px; margin-bottom: 10px; }
  body .plano__cta { margin-top: 12px; }
  body .investimento { margin-top: 14px; padding: 28px 24px; gap: var(--cta); }
  body .rs-formatos__nota { margin-top: var(--cta); }

  /* FAQ */
  body .faq__list { margin-top: var(--bloco); gap: 10px; }

  /* Chamada final */
  body .cta-final p.text-24 { margin-top: var(--texto); }
  body .cta-final .btn { margin-top: var(--cta); }

  /* Página de posts */
  body .rs-foco__grid { gap: var(--texto); }
  body .rs-foco__text { padding-left: 18px; }
  body .rs-foco__text p + p { margin-top: 14px; }
  body .rs-lista__grid { gap: var(--bloco); }
  body .rs-lista h2 { margin-top: 14px; }
  body .rs-lista__intro .text-24 { margin-top: var(--texto); }
  body .rs-lista__intro .text-20 { margin-top: 10px; }
  body .rs-passos { margin-top: var(--cta); }
  body .rs-assinatura { margin-top: var(--cta); }

  /* Rodapé logo a seguir à última secção */
  body .rodape { margin-top: 0; }
}
@media (max-width: 860px) {
  body .rs-formatos { padding-bottom: var(--sec); }
  body .stat { padding: 24px 22px; }
  body .stat__text { margin-top: 12px; }
}

/* Telemóvel: secções escuras rentes às bordas, sem cantos claros à mostra */
@media (max-width: 860px) {
  body .panel { border-radius: 0; border-left: 0; border-right: 0; }
  body .faixa { margin-bottom: -1px; }
  body .faixa + .panel, body .faixa + .problema, body .faixa + .rs-porque { border-top: 0; }
}

/* Legenda dos mockups: bloco compacto, alinhado à direita, colado às imagens */
@media (max-width: 860px) {
  body .metodo .note--light {
    width: 210px; max-width: 70%;
    margin: 6px 0 0 auto;
    text-align: right; line-height: 1.3; font-size: 15px;
    text-wrap: balance;
  }
}