/* DN_MOBILE_TEXT_GUTTERS_V1_20260530
   Objetivo: manter as imagens como estão e alinhar os blocos de texto
   das seções mobile novas com uma margem parecida com a do FAQ.
*/

@media (max-width: 767px) {
  .dn-mobile-product-flow .dnm-section {
    width: calc(100vw - 48px) !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Recuo textual interno. Não afeta imagens. */
  .dn-mobile-product-flow .dnm-eyebrow,
  .dn-mobile-product-flow .dnm-kicker,
  .dn-mobile-product-flow .dnm-section > h2,
  .dn-mobile-product-flow .dnm-section > p,
  .dn-mobile-product-flow .dnm-cards,
  .dn-mobile-product-flow .dnm-list {
    box-sizing: border-box !important;
    width: auto !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  /* Mantém respiro vertical limpo, semelhante ao FAQ */
  .dn-mobile-product-flow .dnm-section > h2 {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }

  .dn-mobile-product-flow .dnm-section > p {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }

  .dn-mobile-product-flow .dnm-list > div {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .dn-mobile-product-flow .dnm-list strong {
    margin-bottom: 8px !important;
  }

  /* Imagens seguem sem recuo textual */
  .dn-mobile-product-flow .dnm-media {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}