/* Infinite Grid — fundo animado + reveal no mouse (brand tokens) */

.infinite-grid-host {
  position: relative;
  isolation: isolate;
}

.infinite-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  color: var(--color-primary, #3d5244);
}

.infinite-grid__base,
.infinite-grid__reveal {
  position: absolute;
  inset: 0;
}

.infinite-grid__base {
  opacity: 0.16;
}

.infinite-grid__reveal {
  opacity: 0.5;
  mask-image: radial-gradient(1px circle at -100px -100px, #000, transparent);
  -webkit-mask-image: radial-gradient(1px circle at -100px -100px, #000, transparent);
  will-change: mask-image;
}

.infinite-grid__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.infinite-grid__orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.infinite-grid__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.infinite-grid__orb--1 {
  right: -18%;
  top: 8%;
  width: min(42%, 22rem);
  height: min(42%, 22rem);
  background: color-mix(in srgb, var(--color-secondary, #b8895a) 42%, transparent);
}

.infinite-grid__orb--2 {
  right: 8%;
  top: 12%;
  width: min(22%, 12rem);
  height: min(22%, 12rem);
  background: color-mix(in srgb, var(--color-primary, #3d5244) 28%, transparent);
}

.infinite-grid__orb--3 {
  left: -12%;
  bottom: -18%;
  width: min(40%, 20rem);
  height: min(40%, 20rem);
  background: color-mix(in srgb, var(--color-primary-mid, #4a6352) 32%, transparent);
}

.infinite-grid-host > .container,
#metodo.infinite-grid-host > .container {
  position: relative;
  z-index: 2;
}

/* Wave permanece absolute se existir — não forçar relative */
.infinite-grid-host > .section-wave,
#metodo.infinite-grid-host > .section-wave {
  z-index: 2;
}

#metodo.infinite-grid-host::after {
  top: 0;
  background: var(--color-background-alt);
}

/* Após quote verde: sem wave/overlap (evita “bolha” verde no grid) */
#metodo.infinite-grid-host {
  margin-top: 0;
  overflow: clip;
}

@media (hover: none), (pointer: coarse) {
  .infinite-grid__reveal {
    opacity: 0.14;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .infinite-grid__base {
    opacity: 0.14;
  }

  .infinite-grid__reveal {
    opacity: 0.1;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
}