/* Recorte transparente e ilustraciones ligeras para acompañar el catálogo. */
.bag-styles-section, .howto-section { position: relative; isolation: isolate; overflow: clip; }
.packaging-decor { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; user-select: none; }
.floating-bag { --angle: -14deg; position: absolute; display: block; width: 125px; aspect-ratio: 5 / 6; background: url('images/empaques/bolsa-decorativa.svg') center / contain no-repeat; opacity: .23; animation: bagDrift 12s ease-in-out infinite alternate; }
.floating-bag--one { top: 5px; right: 30%; }
.floating-bag--two { --angle: 16deg; width: 95px; top: 475px; left: -12px; animation-delay: -5s; animation-duration: 16s; }
.floating-bag--three { --angle: -8deg; width: 110px; bottom: 18px; right: 6px; animation-delay: -8s; animation-duration: 14s; }
.howto-section .floating-bag--one { width: 105px; right: 34%; top: 0; }
.howto-section .floating-bag--two { top: auto; bottom: 15px; left: 8%; }
.wholesale-banner { background: radial-gradient(ellipse at 90% 20%, #365d49, transparent 60%), #244b3c; scroll-margin-top: 140px; }
.wholesale-banner .packaging-decor { z-index: 0; }
.wholesale-banner .floating-bag { opacity: .32; }
.wholesale-banner .floating-bag--one { width: 140px; right: 45%; top: 20px; }
.wholesale-banner .floating-bag--two { width: 110px; top: auto; bottom: 6px; left: 10px; }
.wholesale-banner .floating-bag--three { width: 100px; bottom: 15px; right: 14px; }
.wholesale-inner { position: relative; z-index: 1; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding-top: 58px; padding-bottom: 58px; gap: 50px; }
.wholesale-media { display: block; width: 100%; max-width: 530px; justify-self: center; background: transparent; box-shadow: none; padding: 0; transform: none; border-radius: 0; }
.wholesale-media img { display: block; width: 100%; height: auto; max-height: 350px; aspect-ratio: 5 / 4; object-fit: contain; background: transparent; border-radius: 0; filter: drop-shadow(0 14px 15px #102d2566); }
@keyframes bagDrift {
  from { transform: translate3d(0, 0, 0) rotate(var(--angle)); }
  to { transform: translate3d(5px, -13px, 0) rotate(calc(var(--angle) + 5deg)); }
}
@media (max-width: 760px) {
  .floating-bag { width: 75px; opacity: .18; }
  .floating-bag--one { right: 2px; top: 5px; }
  .floating-bag--two { width: 65px; top: 820px; left: -12px; }
  .floating-bag--three { width: 70px; right: -10px; }
  .howto-section .floating-bag--one { width: 75px; right: 2px; }
  .howto-section .floating-bag--two { display: none; }
  .wholesale-inner { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 42px; padding-bottom: 30px; }
  .wholesale-banner { scroll-margin-top: 115px; }
  .wholesale-content { max-width: 540px; }
  .wholesale-media { display: block; max-width: 380px; }
  .wholesale-media img { max-height: 280px; }
  .wholesale-banner .floating-bag--one { width: 100px; right: 10px; top: 10px; opacity: .24; }
  .wholesale-banner .floating-bag--two { width: 70px; left: -8px; bottom: 160px; }
  .wholesale-banner .floating-bag--three { width: 65px; right: 8px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-bag { animation: none; transform: rotate(var(--angle)); }
}