/* ============================================================
   Homepage — Custom CSS
   Conectivo
   ============================================================ */

/* ── Design tokens ──────────────────────────────────────── */

/* ── Header ─────────────────────────────────────────────── */

/* ── Hero ───────────────────────────────────────────────── */

/* ── Services ───────────────────────────────────────────── */
.home ul,
.home li {
  list-style: none;
  text-decoration: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
}

/* Left column — GSAP will pin this element while .home2 scrolls.
   height + flex centering keeps the counter visually centred in the viewport
   once GSAP makes it position:fixed. No CSS sticky needed. */
.services__left {
  height: 100vh;
  display: flex;
  align-items: center;
}

/* Right column grows to fit all stacked cards */
.services__right {
  flex: 1;
}

/* Background SVG — absolutely positioned by default (out of flow).
   ScrollTrigger toggles .is-fixed while .home2 is in the viewport,
   switching to position:fixed so it stays anchored top-right.
   No GSAP pin needed — pin-spacer would be 0×0 on an absolute element. */
.services__background {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}
.services__background.is-fixed {
  position: fixed;
  top: 0;
  right: 0;
}
/* When the section ends, anchor to bottom of section so the SVG
   doesn't snap back to top:0 (which is above the viewport at that point) */
.services__background.is-ended {
  position: absolute;
  top: auto;
  bottom: 0;
  right: 0;
}

/* Each card = one viewport height so the counter updates once per card */
.services__card {
  position: relative;
  z-index: 3;
}

/* WordPress / Bricks sometimes adds scroll-behavior: smooth which breaks
   ScrollTrigger's internal remeasuring on resize. */
html {
  scroll-behavior: auto !important;
}

.kpis__card-background {
  opacity: 0;
}

.kpis__card:hover .kpis__card-background {
  opacity: 0.6;
}

.footer .brxe-social-icons li {
  padding: 0 !important;
}