/* PayPer static site — supplemental styles (design primarily via Tailwind utilities) */

html {
  overflow-x: hidden;
}

body {
  font-family: 'Inter Tight', sans-serif;
  overflow-x: hidden;
  max-width: 100%;
}

/* Clip GSAP from() translateX / scale and negative-offset badges so they
   cannot expand document scrollWidth before ScrollTrigger plays. */
#page.site {
  overflow-x: hidden;
  max-width: 100%;
}

/* Screen-reader only utility for FAQ anchor */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Soften card stack on small screens so -mt overlap doesn't crush content */
@media (max-width: 767px) {
  section.-mt-60 {
    margin-top: -4rem;
    padding-top: 3rem;
  }

  section.-mt-60 .flex-col > div {
    margin-bottom: 1rem;
    width: 100%;
  }

  .h-\[500px\],
  .h-\[550px\],
  .h-\[600px\] {
    height: 320px;
  }

  .spin-once {
    width: 8rem !important;
    height: 8rem !important;
    top: -1rem !important;
    left: -0.5rem !important;
  }

  .spin-once .text-5xl {
    font-size: 2rem;
  }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-banner,
  .animate-tarjeta-1,
  .animate-tarjeta-2,
  .animate-tarjeta-3,
  .animate-solutions,
  .animate-modernize,
  .animate-growth,
  .animate-our-services,
  .animate-img-industries,
  .spin-once,
  .animate-pay-your-way,
  .animate-why,
  .animate-hero {
    opacity: 1 !important;
    transform: none !important;
  }
}