/* Page backgrounds share the reference's fine dot grid.
   Background paint leaves photos, cards, controls and sticky positioning intact. */
body,
.home-events,
.page-how .company-story,
.page-how :is(#metodo, #sectores, #impacto) {
  background-image: var(--mg-dots-on-white);
  background-size: var(--mg-dot-step) var(--mg-dot-step);
}

.value-proposition.value-story,
.testimonials,
.site-footer,
.legal-hero,
.thanks-hero,
.page-how :is(#valores, #conversemos) {
  background-image: var(--mg-dots-on-navy);
  background-size: var(--mg-dot-step) var(--mg-dot-step);
}

.services-details {
  background-image: var(--mg-dots-on-navy), radial-gradient(ellipse at 95% 85%, #00B7CA18, transparent 55%);
  background-size: var(--mg-dot-step) var(--mg-dot-step), auto;
  background-repeat: repeat, no-repeat;
}

.page-events .closing-cta {
  background-image: var(--mg-dots-on-white), url('../assets/brand/elements/pattern-mulberry.png');
  background-size: var(--mg-dot-step) var(--mg-dot-step), cover;
  background-position: 0 0, center;
  background-repeat: repeat, no-repeat;
}

/* The invitation uses the same fine grid as the site's white surfaces. */
.services-invitation {
  background-image: var(--mg-dots-on-white);
  background-size: var(--mg-dot-step) var(--mg-dot-step);
}

@media (max-width: 480px) {
  .page-events .closing-cta { background-image: var(--mg-dots-on-white); }
}

@media (forced-colors: active), print {
  body,
  .home-events,
  .testimonials,
  .page-how .company-story,
  .page-how :is(#metodo, #sectores, #impacto, #valores, #conversemos),
  .value-proposition.value-story,
  .site-footer,
  .legal-hero,
  .thanks-hero,
  .services-details,
  .page-events .closing-cta { background-image: none; }
  .services-invitation { background-image: none; }
}