:root {
  --linear-cradient_a: #a3d075;
  --linear-cradient_b: #115aab;
  --btn-partner: #6b9d88;
  --btn-ar: #a3d075;
  --btn-ap: #316aa0;
}

/* ========================= 1) BASE PAGE STYLES ========================= */
body {
  margin: 0;
  background: #fefefe;
  color: #eee;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


/* ======================================================
   2) SCROLL CONTAINER HANDLES SCROLL DRUTATION
   ====================================================== */
.scroll-wrapper {
  height: 300vh;
}

/* ======================================================
   3) PIN / STICKY
   ====================================================== */
.pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;

  /* NEW: scale var used by overlays (set by JS) */
  --s: 1;
}

/* NEW: make svg responsive (desktop-friendly) */
.pin > svg {
  /* width: min(1188px, 92vw); */
  height: auto;
  display: block;
}
/* 
@media screen and (max-width: 1375px) {
  .pin > svg {
    width: 80vw;
  }
} */

/* =================================== 4) SVG & ANIMATED ELEMENTS =================================== */
#infinity {
  opacity: 0;
  transition: opacity 0.25s ease;
  vector-effect: non-scaling-stroke;
  fill: none;
}

#glow-path {
  opacity: 0;
  transition: opacity 0.25s ease;
  vector-effect: non-scaling-stroke;
  fill: none;
}

.icon {
  opacity: 0.35;
  transform-origin: center;
  transition: filter 0.35s ease, opacity 0.35s ease, transform 0.7s ease;
  will-change: filter, opacity, transform;
  fill: white;
  filter: blur(1.7px) drop-shadow(0 0 12px rgba(163, 208, 117, 0.8));
}

.icon .icon_content {
  stroke: grey;
}

.icon.active {
  filter: blur(0) drop-shadow(0 0 4px rgba(27, 49, 6, 0.8));
  opacity: 1;
}

.icon.active .icon_content {
  stroke: white;
}

.icon.active path,
.icon.active rect,
.icon.active circle {
  fill: url(#iconGradient);
}

/* =================================== 5) ICON CARDS =================================== */
.icon-cards-container {
  position: absolute;
  top: 50%;
  left: 50%;

  /* keep the normal centering */
  transform: translate(-50%, -50%) translateY(var(--anchorY, 0px));

  pointer-events: none;
  z-index: 10;
  
}

/* Logo Container */
.logo-container {
  position: absolute;
  width: calc(360px * var(--s)); /* NEW */
  z-index: 5;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

.logo-container.hidden {
  opacity: 0;
  visibility: hidden;
}

.logo-image {
  max-width: calc(360px * var(--s)); /* NEW */
  height: auto;
  display: block;
}

.icon-card {
 position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);

  width: calc(360px * var(--s)); /* NEW */
  margin: 0;
  background: white;
  border-radius: calc(16px * var(--s)); /* NEW */
  padding: calc(24px * var(--s)); /* NEW */
  display: flex;
  align-items: flex-start;
  gap: calc(20px * var(--s)); /* NEW */
  box-shadow: 0 0 0 1.5px transparent, 0 8px 32px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
  will-change: opacity, visibility, transform;
  background-clip: padding-box;
}

.icon-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(16px * var(--s)); /* NEW */
  padding: calc(1.5px * var(--s)); /* NEW */
  background: linear-gradient(135deg, #a3d075 0%, #316aa0 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

.icon-card.active {
  opacity: 1;
  visibility: visible;
}

.icon-card:not(.active) {
  transform: translate(-50%, -50%) scale(0.95);
}

.card-icon-circle {
  width: calc(60px * var(--s)); /* NEW */
  height: calc(60px * var(--s)); /* NEW */
  border-radius: 50%;
  background: linear-gradient(90deg, #316aa0 0%, #a3d075 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-icon-text {
  color: white;
  font-size: calc(28px * var(--s)); /* NEW */
  font-weight: bold;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 0.5px;
}

.card-content {
  flex: 1;
  min-width: 0;
}

.card-title {
  margin: 0 0 calc(12px * var(--s)) 0; /* NEW */
  font-family: "Helvetica", Sans-serif;
  font-size: calc(18px * var(--s)); /* NEW */
  font-weight: 600;
  line-height: 1em;
  letter-spacing: -0.03em;
  color: #333333;
}

.card-text {
  margin: 0;
  font-family: "Helvetica", Sans-serif;
  font-size: calc(15px * var(--s)); /* NEW */
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: -0.03em;
  color: #a3a3a3;
}

/* (Optional) keep your existing responsive tweak — safe to keep */
@media (max-width: 768px) {
  .icon-card {
    width: 320px;
    padding: 20px;
  }

  .card-icon-circle {
    width: 60px;
    height: 60px;
  }

  .card-icon-text {
    font-size: 22px;
  }

  .card-title {
    font-size: 20px;
  }

  .card-text {
    font-size: 14px;
  }
}

/* ===================================
   BUTTONS
   =================================== */
.button {
  cursor: pointer;
  position: absolute;
  z-index: 9;

  min-width: 165px;
  padding: 8px 8px 8px 36px;
  gap: 12px;

  display: flex;
  align-items: center;
  justify-content: end;

  border-radius: 100px;
  border: 1px solid rgba(51, 51, 51, 0.08);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.05);
  background-color: white;

  font-family: "Roboto", Sans-serif;
  font-size: 19px;
  font-weight: 500;
  color: #092340;
  line-height: 46px;
  letter-spacing: -0.02em;

  transition: 0.5s ease;
}

.button p {
  margin: 0;
}

/* NEW: scale the pixel offsets with --s so they stay aligned */
.button--top {
  transform: translate(0, calc(-290px * var(--s)));
}

.button--bottom {
  transform: translate(0, calc(290px * var(--s)));
  padding: 4px 34px 4px 34px;
}

.button--left {
  transform: translate(calc(-315px * var(--s)), calc(-75px * var(--s)));
}

.button--right {
  transform: translate(calc(315px * var(--s)), calc(-75px * var(--s)));
}

.button--top:hover {
  background-color: var(--e-global-color-f72d441);
  border-color: var(--e-global-color-f697941);
  box-shadow: 0px 4px 48px 0px rgba(108.12, 157.08, 136.68, 0.4);
}

.button--left:hover {
  background-color: var(--e-global-color-f72d441);
  border-color: var(--e-global-color-7442688);
  box-shadow: 0px 4px 48px 0px rgba(163.2, 208.182, 118.218, 0.4);
}

.button--right:hover {
  background-color: var(--e-global-color-f72d441);
  border-color: var(--e-global-color-56b0547);
  box-shadow: 0px 4px 48px 0px rgba(49.1385, 106.39705, 159.9615, 0.4);
}

/* Colores SVG botones */
#partner_btn svg {
  fill: var(--btn-partner);
}

#ap_btn svg {
  fill: var(--btn-ap);
}

#ar_btn svg {
  fill: var(--btn-ar);
}