/* Shine effect on hero highlight — animates the existing text gradient */
span.hero-title-highlight.has-shine {
  background-image: linear-gradient(
    120deg,
    #0c3a8e 0%, #3e70ca 15%, #5893ff 30%,
    #3e70ca 42%, #89bcff 48%, #b0d4ff 50%, #89bcff 52%,
    #3e70ca 58%, #5893ff 70%, #3e70ca 85%, #0c3a8e 100%
  ) !important;
  background-size: 200% 100% !important;
  background-repeat: repeat-x !important;
  animation: hero-text-shine 3s linear infinite !important;
}

@keyframes hero-text-shine {
  from { background-position: 200% 0; }
  to { background-position: 0% 0; }
}

.home .hero-content__bottom,
.single-product_page .hero-content__bottom,
.single-landingpages .hero-content__bottom {
  display: none !important;
}

.single-landingpages .hero {
  background-image: none !important;
  background-color: transparent !important;
}

/* ===============================================================
   Hero — Figma background (face + arch).
   Mobile-first: base rules apply at all widths and carry mobile values.
   `@media (min-width: 768px)` and `@media (min-width: 1250px)` layer
   overrides on top (project convention — never use `max-width`).
   =============================================================== */

/* Hide every pre-existing bg sprite at every breakpoint — the new
   `.hero__new-bg` pair replaces them all. */
.hero .hero-background-left,
.hero .hero-background-right,
.hero .hero-background-left-768px,
.hero .hero-background-right-768px,
.hero .hero-background-left-1920px,
.hero .hero-background-right-1920px {
  display: none !important;
}

.hero .hero__new-bg {
  position: absolute !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.hero .hero__new-bg img {
  display: block !important;
  max-width: none !important;
}

/* Left face — mobile default (Figma 15780:26535: left:-107 top:29 w:204.867 h:214.872,
   inner 168.481×148.187 rotated 65.4°). Top is compensated by -120 for the hero's
   fixed-header padding since .hero__wrap is our positioning ancestor. */
.hero .hero__new-bg--left {
  left: -107px !important;
  top: -81px !important;          /* Figma 29 − 120 hero padding-top, +10 nudge */
  width: 204.867px !important;
  height: 214.872px !important;
}

.hero .hero__new-bg--left img {
  width: 168.481px !important;
  height: 148.187px !important;
  transform: rotate(65.4deg) !important;
}

/* Right arch — mobile default (Figma: right:-97 top:242 w:207 h:176.48).
   Arco 1 at 151.454×157.485, composed rotation 22.62°. */
.hero .hero__new-bg--right {
  right: -97px !important;
  top: 122px !important;          /* Figma 242 − 120 */
  width: 207px !important;
  height: 176.48px !important;
  display: block !important;       /* children are absolutely positioned */
}

.hero .hero__new-arch {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 151.454px !important;
  height: 157.485px !important;
  transform: translate(-50%, -50%) rotate(22.62deg) !important;
}

/* Figure inside the arch — composed rotation 31.3°, position as % of outer. */
.hero .hero__new-figure {
  position: absolute !important;
  left: 41.65% !important;
  top: 60.31% !important;
  width: 58px !important;
  height: 32px !important;
  transform: translate(-50%, -50%) rotate(31.3deg) !important;
  /* Figma: `opacity-6` → 0.06 (pixel-perfect to design spec) */
  opacity: 0.06 !important;
}

/* ===============================================================
   Hero bg — 768+ per Figma node 14215:58023.
   Each breakpoint uses its OWN SVG (path coords differ), so we swap
   the image via `content: url(...)` and resize the container/img.
   The 120px subtraction on top values compensates for .hero padding-top. */
@media (min-width: 768px) {
  /* Same directory as style.css → simple relative URL. */
  .hero .hero__new-bg--left img {
    content: url('camada1-768.svg?v=1') !important;
  }

  .hero .hero__new-arch {
    content: url('arco-vector-768.svg?v=1') !important;
  }

  .hero .hero__new-figure {
    content: url('arco-figure-768.svg?v=1') !important;
  }

  /* Left face — Figma: left:-186 top:9 w:386.431 h:405.304, inner 317.798×279.518 */
  .hero .hero__new-bg--left {
    left: -186px !important;
    top: -111px !important;          /* Figma 9 − 120 hero padding-top */
    width: 386.431px !important;
    height: 405.304px !important;
  }

  .hero .hero__new-bg--left img {
    width: 317.798px !important;
    height: 279.518px !important;
  }

  /* Right arch — Figma: left:618 top:104 w:253.355 h:216 (→ right:-103.355 on a 768 frame).
     Arco 1 grows to 185.37×192.752. Rotations inherit from mobile. */
  .hero .hero__new-bg--right {
    left: auto !important;
    right: -103.355px !important;
    top: -16px !important;             /* Figma 104 − 120 */
    width: 253.355px !important;
    height: 216px !important;
  }

  .hero .hero__new-arch {
    width: 185.37px !important;
    height: 192.752px !important;
  }

  /* Figure inset %/rotation stay the same — Figma's inset is relative to the arch, so
     it scales automatically. Only the size grows with the arch (×1.224). */
  .hero .hero__new-figure {
    width: 71px !important;
    height: 39px !important;
  }
}

/* ===============================================================
   Hero bg — 1250+ per Figma node 15780:26297 (1440 frame).
   At 1250+ `.hero` padding-top is 158px (from _hero.scss @include
   bpmin($desktop)), so Figma `top` values subtract 158 (not 120).
   Right `left:1141` on 1440 frame → `right: -111.37px`.
   =============================================================== */
@media (min-width: 1250px) {
  /* Hide the old curvy down-arrow — Figma 15780:26297 doesn't include it. */
  .hero .hero-arrow-down {
    display: none !important;
  }

  .hero .hero__new-bg--left img {
    content: url('camada1-1250.svg?v=1') !important;
  }

  .hero .hero__new-arch {
    content: url('arco-vector-1250.svg?v=1') !important;
  }

  .hero .hero__new-figure {
    content: url('arco-figure-1250.svg?v=2') !important;
  }

  /* Left face — Figma: left:-115.01 top:189.09 on a 1440 frame.
     `.hero` has max-width:1200 centered, so the wrap is 1200 wide and its
     left edge sits (vw-1200)/2 inside the viewport. Compensate with calc()
     so the bg's left edge lands at Figma's -115.01 measured from the viewport:
       css_left = -115.01 - (vw - 1200) / 2 = 484.99 - vw/2
     Top doesn't depend on width, so it's plain px. */
  .hero .hero__new-bg--left {
    left: calc(484.99px - 50vw) !important;
    top: 31.09px !important;           /* Figma 189.09 − 158 hero padding-top at 1250+ */
  }

  /* Right arch — Figma: left:1141 top:198 w:410.37 h:349.865 on a 1440 frame.
     Same centering compensation for right:
       wrap_right_viewport = (vw + 1200)/2
       bg_right_viewport (target) = vw + 111.37  (Figma right edge - viewport right)
       css_right = wrap_right_viewport - bg_right_viewport = 488.63 - vw/2 */
  .hero .hero__new-bg--right {
    left: auto !important;
    right: calc(488.63px - 50vw) !important;
    top: 40px !important;              /* Figma 198 − 158 */
    width: 410.37px !important;
    height: 349.865px !important;
  }

  .hero .hero__new-arch {
    width: 300.252px !important;
    height: 312.209px !important;
  }

  /* Figure — size picked to match the SVG's natural aspect (viewBox 126.98×71.0371
     ≈ 1.79:1 wider-than-tall). Matching natural aspect avoids the
     preserveAspectRatio="none" distortion. Width scales with Arco 1
     (300.252 ≈ 38% → 115×65). Rotation (31.3°) and position (41.65% / 60.31%)
     inherit unchanged. */
  .hero .hero__new-figure {
    width: 115px !important;
    height: 65px !important;
  }
}