/* DN_MOBILE_PRICING_GUTTERS_V1_20260530
   Objetivo:
   - no mobile, os boxes/cards do pricing respeitam a mesma lógica de margem
     do FAQ / conteúdo textual
   - não mexer no desktop
*/

@media (max-width: 767px) {
  /* wrapper da seção de pricing */
  section[id*="pricing"],
  section[class*="pricing"],
  .pricing,
  .pricing-section,
  .dn-pricing,
  [data-section*="pricing"] {
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* container interno */
  section[id*="pricing"] .container,
  section[class*="pricing"] .container,
  .pricing .container,
  .pricing-section .container,
  .dn-pricing .container,
  [data-section*="pricing"] .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* cards / boxes / planos */
  section[id*="pricing"] .card,
  section[id*="pricing"] .pricing-card,
  section[id*="pricing"] .plan-card,
  section[id*="pricing"] .price-card,
  section[id*="pricing"] .pricing-box,
  section[id*="pricing"] .plan,
  section[class*="pricing"] .card,
  section[class*="pricing"] .pricing-card,
  section[class*="pricing"] .plan-card,
  section[class*="pricing"] .price-card,
  section[class*="pricing"] .pricing-box,
  section[class*="pricing"] .plan,
  .pricing .card,
  .pricing .pricing-card,
  .pricing .plan-card,
  .pricing .price-card,
  .pricing .pricing-box,
  .pricing .plan,
  .pricing-section .card,
  .pricing-section .pricing-card,
  .pricing-section .plan-card,
  .pricing-section .price-card,
  .pricing-section .pricing-box,
  .pricing-section .plan,
  .dn-pricing .card,
  .dn-pricing .pricing-card,
  .dn-pricing .plan-card,
  .dn-pricing .price-card,
  .dn-pricing .pricing-box,
  .dn-pricing .plan,
  [data-section*="pricing"] .card,
  [data-section*="pricing"] .pricing-card,
  [data-section*="pricing"] .plan-card,
  [data-section*="pricing"] .price-card,
  [data-section*="pricing"] .pricing-box,
  [data-section*="pricing"] .plan {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* se houver grid/cols, derruba para 1 coluna no mobile */
  section[id*="pricing"] .grid,
  section[id*="pricing"] .cards,
  section[id*="pricing"] .plans,
  section[id*="pricing"] .pricing-grid,
  section[class*="pricing"] .grid,
  section[class*="pricing"] .cards,
  section[class*="pricing"] .plans,
  section[class*="pricing"] .pricing-grid,
  .pricing .grid,
  .pricing .cards,
  .pricing .plans,
  .pricing .pricing-grid,
  .pricing-section .grid,
  .pricing-section .cards,
  .pricing-section .plans,
  .pricing-section .pricing-grid,
  .dn-pricing .grid,
  .dn-pricing .cards,
  .dn-pricing .plans,
  .dn-pricing .pricing-grid,
  [data-section*="pricing"] .grid,
  [data-section*="pricing"] .cards,
  [data-section*="pricing"] .plans,
  [data-section*="pricing"] .pricing-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* heading da seção alinhado com o resto */
  section[id*="pricing"] h2,
  section[id*="pricing"] h3,
  section[class*="pricing"] h2,
  section[class*="pricing"] h3,
  .pricing h2,
  .pricing h3,
  .pricing-section h2,
  .pricing-section h3,
  .dn-pricing h2,
  .dn-pricing h3,
  [data-section*="pricing"] h2,
  [data-section*="pricing"] h3 {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}