/*
 * Consciencia MCE — site styles.
 *
 * Loaded after the ported Elementor stylesheets, so plain declarations here
 * win on equal specificity. `!important` appears only where the ported CSS
 * uses it too, and each of those is marked with why.
 *
 * Structure:
 *   1. tokens
 *   2. base type and colour
 *   3. sections, in page order
 *   4. one mobile block at the end
 *
 * One declaration per selector. If a rule needs changing, change it in place
 * rather than appending an override.
 */

/* ═══════════════════════════ 1. TOKENS ═══════════════════════════ */

:root {
  --mce-content-width: 1140px;
  --mce-gutter: 20px;
  --mce-block-gap: clamp(28px, 4vh, 44px);

  --mce-title: #ffffff;
  --mce-body: rgb(255 255 255 / 0.72);
  --mce-accent: rgb(47 107 255);

  --mce-sans: var(--font-instrument-sans), 'Instrument Sans', sans-serif;
  --mce-serif: var(--font-instrument-serif), 'Instrument Serif', Georgia, serif;
}

/* ═══════════════════════ 2. BASE TYPE & COLOUR ═══════════════════ */

/* The ported CSS names Inter throughout; substitute the loaded face. */
body,
body button,
body input,
body select,
body textarea,
body .elementor-widget,
body .elementor-icon-box-description,
body .mce-section-title,
body .gb-hero,
body .gb-promise,
body .gb-description,
body .badge-camino,
body .btn-label,
body .ice-callout-box,
body .fp-heading,
body .fp-description,
body .mce-narrative-line,
body .mce-about-text,
body .mce-map-card-place,
body .mce-map-card-blurb {
  font-family: var(--mce-sans);
}

h1,
h2,
h3,
h4,
.mce-section-title {
  color: var(--mce-title);
}

.elementor-icon-box-description,
.gb-description,
.mce-narrative-line,
.ice-callout-detail,
.mce-about-text {
  color: var(--mce-body);
}

/* Section headings, stated once for ported and added sections alike. */
.mce-section-title,
.mce-section-title--sub {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  margin-block-end: 10px;
}

/* The promise's animated fill, carried onto every heading. */
.mce-section-title .titulo-premium {
  background: linear-gradient(
    115deg,
    #6f6f6f 0%,
    #f4f8ff 16%,
    #ffffff 28%,
    #dbe7ff 40%,
    #6392ea 50%,
    #f7faff 60%,
    #c9dbff 72%,
    #ffffff 84%,
    #6f6f6f 100%
  );
  background-size: 220% 220%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: premium-reflection 7s ease-in-out infinite;
  margin-bottom: 30px;
  margin-top: 20px;
}

/* Plain white emphasis, replacing the ported white-block treatment. */
.remarcado {
  background: none;
  /* The ported rule sets color:#000!important for its white-block
     treatment; without matching that weight the text renders black on
     black and disappears. */
  color: #fff !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-weight: 600;
}

/* Serif italic marks phrases worth slowing down on. */
.mce-club-bridge em,
.mce-chain-lead em {
  font-family: var(--mce-serif);
  font-style: italic;
  font-size: 1.12em;
  color: #fff;
  text-transform: none;
  letter-spacing: normal;
}

/* ═════════════════════════ 3. SECTIONS ═══════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────
 * The Spline backdrop is absolutely positioned and adds no height, so the
 * padding here is what gives the hero its size.
 */
/* Deliberately left below the gallery.
   `.gb-a3d` is a real 3D carousel — `transform-style: preserve-3d` with
   `backface-visibility: hidden` on each card. Compositing a 2D layer on top
   of that context makes the browser re-sort the cards every frame, and the
   near-coplanar ones flicker. Raising the hero to clear the CTA caused
   exactly that; raising the scene instead buried the button.
   Neither is a z-index problem. The hero reserves room for the CTA below
   (see `.gb-widget--no-vsl` padding) so the gallery's -80px pull never
   reaches it, which lets both stay in their natural order. */
.mce-hero {
  position: relative;
}

/* The bottom padding carries an extra 80px: that is how far `.gb-scene`
   pulls up over this section, and the CTA has to finish above that band so
   the gallery never covers it. Keeping them apart is what lets the hero stay
   under the gallery and the 3D carousel composite on its own. */
.gb-widget--no-vsl {
  position: relative;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(56px, 9vh, 120px) calc(clamp(64px, 10vh, 140px) + 80px);
  overflow: visible;
  isolation: isolate;
}

.gb-widget--no-vsl .gb-hero {
  position: relative;
  z-index: 20;
  top: auto;
  left: auto;
  transform: none;
  pointer-events: auto;
  width: min(var(--mce-content-width), 100%);
  margin-inline: auto;
  padding-inline: var(--mce-gutter);
}

.gb-promise {
  font-family: var(--mce-sans);
}

.gb-hero-cta {
  position: relative;
  z-index: 9999 !important;
  margin-top: clamp(32px, 4.5vh, 52px);
}

.orb-btn .btn-label {
  letter-spacing: normal;
}

/* The travelling border is a 500px square rotating behind the button, so its
   corners sweep much further than its sides — with a single 100°-wide flare
   the light appears to stall along the long edges. A second flare opposite
   the first keeps something on every side at all times, and widening both
   evens out the pace. The square is also sized off the button rather than
   fixed, so a full-width button on a phone stays covered. */
.orb-btn::before {
  width: max(500px, 180%);
  height: max(500px, 900%);
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    #002db3 25deg,
    #0055ff 55deg,
    #002db3 85deg,
    transparent 130deg,
    transparent 180deg,
    #002db3 205deg,
    #0055ff 235deg,
    #002db3 265deg,
    transparent 310deg,
    transparent 360deg
  );
}

.spline-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.spline-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
}

.gb-widget--no-vsl::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(0 0 0 / 0.35) 0%,
    transparent 28%,
    transparent 62%,
    rgb(0 0 0 / 0.85) 100%
  );
}

/* ── Photo carousel ──────────────────────────────────────────── */
.mce-gallery {
  position: relative;
  z-index: 99 !important;
}

/* ── Photo scene ──────────────────────────────────────────────── */
/* `isolation` keeps the 3D carousel inside its own stacking context, so
   neighbouring layers cannot be interleaved with the rotating cards — that
   interleaving is what made them flicker. */
.gb-scene {
  margin-top: -80px;
  position: relative;
  z-index: 2;
  isolation: isolate;
}

/* ── Consciencia MCE ──────────────────────────────────────────── */
.mce-club {
  position: relative;
}

.mce-club-heading {
  position: relative;
  isolation: isolate;
  padding-block: clamp(40px, 6vh, 72px) 0;
  overflow: hidden;

  /* BackgroundRippleEffect reads these; it sets them behind a `dark:`
     variant this page never matches. */
  --cell-border-color: rgb(255 255 255 / 0.08);
  --cell-fill-color: rgb(47 107 255 / 0.28);
  --cell-shadow-color: rgb(47 107 255 / 0.45);
}

/* Fades the ripple grid out from its top edge. Replaces Tailwind's
   mask-radial-* utilities, which emit only the unprefixed `mask-image` —
   Chrome on Android ignores that and renders the grid with a hard cut. */
.mce-ripple-mask {
  -webkit-mask-image: radial-gradient(
    ellipse 90% 80% at 50% 0%,
    #000 20%,
    transparent 75%
  );
  mask-image: radial-gradient(
    ellipse 90% 80% at 50% 0%,
    #000 20%,
    transparent 75%
  );
}

.mce-club-heading-content {
  position: relative;
  z-index: 4;
}

.mce-club-heading .mce-narrative {
  margin-top: 24px;
}

.mce-narrative {
  max-width: 68ch;
  margin-inline: auto;
  text-align: center;
}

.mce-narrative-line {
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 400;
  line-height: 1.6;
}

.mce-narrative-line + .mce-narrative-line {
  margin-top: 1.1em;
}

/* ── The MCE chain ────────────────────────────────────────────── */
.mce-chain {
  margin-block: var(--mce-block-gap);
  text-align: center;
}

.mce-chain-lead {
  margin-bottom: 18px;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

.mce-chain-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 18px);
  margin: 0 0 var(--mce-block-gap);
  padding: 0;
  list-style: none;
}

.mce-chain-steps li {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 18px);
}

/* Same travelling-sheen treatment as .mce-map-hint — see the note there.
   The solid background is what keeps the two pseudo-elements reading as a
   rim and a halo instead of filling the chip. */
.mce-chain-steps li span {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 600;
  color: #fff;
  background: #0b0d18;
  border: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16);
}

.mce-chain-steps li span::before,
.mce-chain-steps li span::after {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border-radius: 999px;
  z-index: -1;
  background: linear-gradient(
    45deg,
    #0b0d18,
    #141a2e,
    #1f2a48,
    #6392ea,
    #1f2a48,
    #141a2e,
    #0b0d18,
    #0b0d18
  );
  background-size: 400%;
  animation: mce-hint-steam 20s linear infinite;
}

.mce-chain-steps li span::after {
  filter: blur(14px);
  opacity: 0.55;
}

.mce-chain-steps li:not(:last-child)::after {
  content: "";
  width: clamp(16px, 2.4vw, 30px);
  height: 1px;
  background: linear-gradient(90deg, rgb(47 107 255 / 0.6), rgb(47 107 255 / 0.15));
}

.mce-chain .mce-narrative {
  margin-top: var(--mce-block-gap);
}

/* ── Iceberg ──────────────────────────────────────────────────── */
.mce-iceberg {
  width: min(var(--mce-content-width), 100%);
  margin: var(--mce-block-gap) auto;
}

.mce-iceberg-figure {
  margin: 0;
}

.mce-iceberg-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

#mce-iceberg-scenery .ice-tip,
#mce-iceberg-scenery .ice-mass {
  animation: mce-ice-drift 14s ease-in-out infinite;
}

#mce-iceberg-scenery .ice-mass {
  animation-delay: -3s;
}

@keyframes mce-ice-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.ice-callout {
  --i: 0;
}

.ice-connector {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}

.mce-iceberg-svg.is-revealed .ice-connector {
  animation: mce-connector-draw 0.75s ease-out forwards;
  animation-delay: calc(var(--i) * 190ms);
}

@keyframes mce-connector-draw {
  to { stroke-dashoffset: 0; }
}

.mce-iceberg-svg.is-armed .ice-callout foreignObject,
.mce-iceberg-svg.is-armed .ice-node-group {
  opacity: 0;
}

.mce-iceberg-svg.is-revealed .ice-callout foreignObject,
.mce-iceberg-svg.is-revealed .ice-node-group {
  animation: mce-callout-in 0.6s ease-out forwards;
  animation-delay: calc(var(--i) * 190ms + 260ms);
}

@keyframes mce-callout-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ice-node {
  fill: var(--mce-accent);
}

.ice-node-ring {
  fill: none;
  stroke: var(--mce-accent);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: mce-node-pulse 3.2s ease-out infinite;
  animation-delay: calc(var(--i) * 260ms);
}

.ice-node-ring--delayed {
  animation-delay: calc(var(--i) * 260ms + 1.1s);
}

@keyframes mce-node-pulse {
  0% { transform: scale(1); opacity: 0.85; }
  70% { opacity: 0; }
  100% { transform: scale(4.4); opacity: 0; }
}

.ice-callout-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ice-callout-box--right {
  align-items: flex-start;
  text-align: left;
}

.ice-callout-box--left {
  align-items: flex-end;
  text-align: right;
}

.ice-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mce-accent);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.08) 0%, rgb(47 107 255 / 0.06) 100%);
  border: 1px solid rgb(47 107 255 / 0.3);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  white-space: nowrap;
}

.ice-callout-detail {
  font-size: 16px;
  line-height: 1.45;
}

.mce-iceberg-fallback,
.mce-iceberg-fallback--above,
.mce-iceberg-fallback--below {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── Bridge into the Club ─────────────────────────────────────── */
.mce-club-bridge {
  max-width: 60ch;
  margin: clamp(56px, 8vh, 104px) auto clamp(64px, 9vh, 120px);
  text-align: center;
  font-family: var(--mce-sans);
  font-size: clamp(19px, 1.9vw, 22px);
  line-height: 1.5;
  color: #fff;
  text-wrap: balance;
}

/* ── Dentro del Club accedés a ────────────────────────────────── */
.mce-club-access {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(56px, 8vh, 96px);
}

.mce-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / 0.22) 1px, transparent 0);
  background-size: 5px 5px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 72%);
}

.mce-lightarc {
  position: relative;
  z-index: 1;
  width: 800px;
  max-width: 100%;
  height: auto;
  mix-blend-mode: screen;
  margin-bottom: -210px;
  pointer-events: none;
  user-select: none;
}

.mce-club-access-heading,
.mce-club-access-list {
  position: relative;
  z-index: 2;
  width: 100%;
}

.mce-club-access-heading {
  margin-top: 56px;
}

.mce-club-access-list {
  margin-top: 0;
}

.mce-club-access .fp-benefits-wrapper {
  margin-inline: auto;
}

/* One grid for all six cards. Equal-height rows come from grid itself
   (`1fr` tracks + `stretch`), so a long heading in one card lifts every card
   in its row to match instead of only its own. No gap: the cards butt up
   against each other and their 1px ring reads as a shared divider. */
.mce-club-access .fp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  width: 100%;
  gap: 0;
}

/* Hover-dim for the grid, matching the wrapper-level rule the row layout
   used to rely on. */
.mce-club-access .fp-grid:hover .fp-card:not(:hover) {
  opacity: 0.15;
}

@media (max-width: 1024px) {
  .mce-club-access .fp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .mce-club-access .fp-grid {
    grid-template-columns: 1fr;
  }
}

.mce-club-access .fp-heading {
  font-size: 20px;
  line-height: 1.3;
}

.mce-club-access .fp-description {
  font-size: 16px;
  line-height: 1.5;
}

/* ── ¿Para quién es esto? ─────────────────────────────────────── */
/* Extra breathing room off the Club above it, which ends on a dense card
   grid and otherwise runs straight into this heading. */
.mce-paths {
  margin-top: 100px;
}

.mce-paths-inner {
  --paths-heading-gap: clamp(20px, 3vh, 32px);
  width: min(var(--mce-content-width), 100%);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.mce-paths .py-20 {
  padding-block: var(--paths-heading-gap) clamp(32px, 4.5vh, 48px);
}

.mce-paths .max-w-7xl {
  max-width: var(--mce-content-width);
}

.mce-paths .grid > div > p:first-of-type {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  text-align: start;
  color: #fff;
}

.mce-paths .grid > div > p:last-of-type {
  font-size: 16px;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .mce-paths .grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .mce-paths .grid > div:nth-child(-n + 3) {
    grid-column: span 2;
  }

  .mce-paths .grid > div:nth-child(4),
  .mce-paths .grid > div:nth-child(5) {
    grid-column: span 3;
  }
}

.mce-section-cta {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(40px, 6vh, 72px);
}

/* ── ¿Quién es Santiago Gómez? ────────────────────────────────── */
.mce-about {
  width: min(var(--mce-content-width), 100%);
  margin-inline: auto;
  padding-block: clamp(48px, 7vh, 96px);
}

.mce-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 18px;
  overflow: hidden;
}

.mce-about-panel {
  padding: clamp(20px, 2.4vw, 34px);
}

.mce-about-panel--photos {
  padding-inline: 0;
}

.mce-about-panel--copy {
  border-left: 1px solid rgb(255 255 255 / 0.08);
}

/* This heading sits in the copy column beside the photos, so it aligns with
   the paragraphs under it rather than centring over its own panel. */
.mce-about-panel--copy .mce-section-title {
  margin-bottom: clamp(16px, 2vh, 24px);
  text-align: left;
}

.mce-about-text {
  margin: 0 0 1em;
  font-size: 16px;
  line-height: 1.6;
}

.mce-about-text:last-child {
  margin-bottom: 0;
}

/* ── Testimonials ─────────────────────────────────────────────── */
.mce-testimonials {
  padding-block: clamp(72px, 10vh, 128px) clamp(48px, 7vh, 88px);
}

.mce-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 28px);
  width: min(var(--mce-content-width), 100%);
  margin: clamp(28px, 4vh, 48px) auto 0;
  padding: 0;
  list-style: none;
}

.mce-testimonial {
  list-style: none;
}

.mce-testimonial-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #08080b;
  border: 1px solid rgb(255 255 255 / 0.1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 18px 40px rgb(0 0 0 / 0.45);
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.mce-testimonial-frame:hover {
  border-color: rgb(255 255 255 / 0.22);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 22px 48px rgb(0 0 0 / 0.5);
  transform: translateY(-2px);
}

.mce-testimonial-frame::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(
    from var(--sweep, 0deg),
    transparent 0deg,
    rgb(255 255 255 / 0.65) 24deg,
    transparent 60deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: opacity 0.35s ease;
}

.mce-testimonial-frame:hover::after {
  opacity: 1;
  animation: mce-border-sweep 2.6s linear infinite;
}

@property --sweep {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes mce-border-sweep {
  to { --sweep: 360deg; }
}

.mce-testimonial-frame iframe {
  position: absolute;
  /* Drive's player keeps its own aspect ratio, so an exactly-sized iframe
     letterboxes. Oversizing it and centring crops instead. */
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  display: block;
}

.mce-testimonial-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #1a1a1f, #101014);
  cursor: pointer;
  display: block;
}

.mce-testimonial-play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #16161a;
  opacity: 0.82;
  transition: opacity 0.35s ease, transform 0.6s ease;
}

.mce-testimonial-play:hover img {
  opacity: 1;
  transform: scale(1.03);
}

.mce-testimonial-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: #fff;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.28);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    inset 0 -1px 0 rgb(255 255 255 / 0.08),
    0 10px 28px rgb(0 0 0 / 0.45);
  transition: transform 0.35s ease, background-color 0.35s ease;
}

.mce-testimonial-icon svg {
  margin-left: 3px;
}

.mce-testimonial-play:hover .mce-testimonial-icon {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgb(255 255 255 / 0.2);
}

.mce-testimonial-play:focus-visible .mce-testimonial-icon {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.mce-testimonial-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 28px 16px 14px;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.82));
}

/* ── Experiences and the map ──────────────────────────────────── */

.mce-map {
  width: min(var(--mce-content-width), 100%);
  margin: 0 auto clamp(24px, 4vh, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Travelling-sheen border, after Uiverse's "steam" button. Two stacked
   pseudo-elements sit 2px outside the badge on the same oversized gradient:
   the lower one is the visible rim, the upper one is blurred into a glow.
   Both sit behind the badge's own background, which is what turns the pair
   into a border rather than a fill.
   The margin shorthand below used to follow a `margin-top … !important` and
   silently reset it; the spacing is stated once now. */
.mce-map-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: clamp(20px, 3vh, 32px) auto clamp(14px, 2vh, 22px);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.72);
  background: #0b0d18;
  border: none;
}

.mce-map-hint::before,
.mce-map-hint::after {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border-radius: 999px;
  z-index: -1;
  background: linear-gradient(
    45deg,
    #0b0d18,
    #141a2e,
    #1f2a48,
    #6392ea,
    #1f2a48,
    #141a2e,
    #0b0d18,
    #0b0d18
  );
  background-size: 400%;
  animation: mce-hint-steam 20s linear infinite;
}

/* The blurred copy is the halo; the sharp one underneath is the rim. */
.mce-map-hint::after {
  filter: blur(14px);
  opacity: 0.55;
}

@keyframes mce-hint-steam {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}

.mce-map-canvas {
  position: relative;
  width: 100%;
}

.mce-map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* The ported theme styles every <button> with a #c36 border and colour. */
.mce-map-hit,
.mce-map-hit:hover,
.mce-map-hit:focus {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  padding: 4px;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  box-shadow: none;
  cursor: pointer;
}

.mce-map-pin--left .mce-map-hit {
  flex-direction: row-reverse;
}

.mce-map-hit-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--mce-accent);
  box-shadow: 0 0 0 4px rgb(47 107 255 / 0.22), 0 0 16px rgb(47 107 255 / 0.7);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mce-map-hit:hover .mce-map-hit-dot,
.mce-map-pin.is-open .mce-map-hit-dot {
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgb(47 107 255 / 0.28), 0 0 22px rgb(47 107 255 / 0.9);
}

.mce-map-hit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.mce-map-badge {
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #dce7ff;
  background: rgb(12 12 16 / 0.72);
  border: 1px solid rgb(47 107 255 / 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.mce-map-pin.is-open .mce-map-badge {
  color: #fff;
  border-color: rgb(47 107 255 / 0.6);
}

.mce-map-card {
  position: absolute;
  bottom: calc(100% + 14px);
  width: 244px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  border-radius: 14px;
  overflow: hidden;
  background: rgb(12 12 16 / 0.92);
  border: 1px solid rgb(47 107 255 / 0.3);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 20px 44px rgb(0 0 0 / 0.55);
  transform: translateY(6px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}

.mce-map-pin--right .mce-map-card {
  left: 0;
}

.mce-map-pin--left .mce-map-card {
  right: 0;
}

.mce-map-pin.is-open .mce-map-card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mce-map-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.mce-map-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The photo fades into the body rather than cutting against it. */
.mce-map-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgb(12 12 16 / 0.95) 100%);
}

.mce-map-card-body {
  position: relative;
  margin-top: -6px;
  padding: 14px 16px 16px;
}

.mce-map-card-place {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

.mce-map-card-date {
  margin: 4px 0 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mce-accent);
}

.mce-map-card-blurb {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--mce-body);
}

.mce-map-list {
  display: none;
  margin: clamp(24px, 4vh, 40px) 0 0;
  padding: 0;
  list-style: none;
  gap: 16px;
}

/* ── Footer ───────────────────────────────────────────────────── */
.mce-footer {
  position: relative;
  padding-block: clamp(28px, 4vh, 48px) clamp(32px, 5vh, 56px);
  text-align: center;
  /* The glow below is drawn wider than the footer and must not widen the
     page — it is a backdrop, not content. */
  overflow: hidden;
  isolation: isolate;
}

/* particles.js mounts a canvas in here. The element carried no styles of its
   own, so it collapsed to zero height and the canvas never had a box to
   paint into — the particles were running, just not visible. */
.mce-footer #particles-js {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.mce-footer #particles-js canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Slow drifting white bloom behind the particles. Two offset ovals on
   different durations, so the pair never visibly repeats a position. */
.mce-footer::after {
  content: "";
  position: absolute;
  inset: -40% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      38% 46% at 28% 42%,
      rgb(255 255 255 / 0.16) 0%,
      rgb(214 230 255 / 0.07) 42%,
      transparent 72%
    ),
    radial-gradient(
      34% 40% at 74% 58%,
      rgb(47 107 255 / 0.16) 0%,
      rgb(255 255 255 / 0.05) 46%,
      transparent 74%
    );
  filter: blur(48px);
  animation: mce-footer-bloom 22s ease-in-out infinite alternate;
}

@keyframes mce-footer-bloom {
  from {
    transform: translate3d(-4%, 2%, 0) scale(1);
    opacity: 0.75;
  }
  to {
    transform: translate3d(5%, -3%, 0) scale(1.14);
    opacity: 1;
  }
}

/* Sits above the particles and the bloom. */
.mce-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: min(var(--mce-content-width), calc(100% - 40px));
  height: 1px;
  background: rgb(255 255 255 / 0.18);
}

.mce-footer-legal {
  position: relative;
  z-index: 2;
  width: min(720px, calc(100% - 40px));
  margin-inline: auto;
  font-family: var(--mce-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgb(255 255 255 / 0.38);
}

/* ── Experiences ──────────────────────────────────────────────── */
.mce-experiences {
  padding-block: clamp(40px, 6vh, 80px) 0;
}

.mce-experiences-intro {
  width: min(var(--mce-content-width), 100%);
  margin-inline: auto;
  padding-inline: var(--mce-gutter);
  text-align: center;
}

.mce-experiences-lead {
  max-width: 68ch;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mce-body);
}

/* ── GradualBlur (React Bits) ─────────────────────────────────── */
.gradual-blur {
  isolation: isolate;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

.gradual-blur-parent {
  overflow: hidden;
}

/* Safari on iOS anchors `position: fixed` to the layout viewport, which
   excludes the strip the retractable address bar sits over — `bottom: 0`
   there leaves a gap under the blur. Anchoring from the top of the dynamic
   viewport instead puts the panel against the real bottom edge on iOS while
   behaving identically everywhere else. The component sets bottom/height
   inline, hence the bang on each. */
.gradual-blur-page {
  top: auto !important;
  bottom: 0 !important;
  height: var(--gradual-blur-height, 56px) !important;
}

@supports (height: 100dvh) {
  .gradual-blur-page {
    top: calc(100dvh - var(--gradual-blur-height, 56px)) !important;
    bottom: auto !important;
  }
}

.gradual-blur-inner {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.gradual-blur-inner > div {
  -webkit-backdrop-filter: inherit;
  backdrop-filter: inherit;
}

@supports not (backdrop-filter: blur(1px)) {
  .gradual-blur-inner > div {
    background: rgb(0 0 0 / 0.3);
    opacity: 0.5;
  }
}
/* ── Club benefit cards ───────────────────────────────────────────────────
 * Reproduced from frontpackpro.com as published: the dots, icon rings and
 * connecting lines are all part of that structure. Only the two font
 * variables are repointed at the faces this project loads.
 */
/* Custom properties the card rules read. */
:root {
  --fpcomponentscardsdotscolor: #fff;
  --fpcomponentscardscardsborder: #1B1D33;
  --fpcomponentscardsbackground: #11132952;
  --fpcomponentscardslinesbackcolor: #1f1538;
  --fpcomponentscardsdotcirclescolor: #1C2037;
  --fpcomponentscardscircleoutborder: #1C2037;
  --fpcomponentscardscircleoutboxshadow: #060918;
  --fpcomponentscardscircleoutbackground: #151a31;
  --fpcomponentscardscircleinsidebackground: #1F253B;
  --fpcomponentscardscircleinsideanimatedborder: #7f93b8;
  --fpcomponentscardscircleinsidebackfroundout: linear-gradient(to top, #030618, #232a4e);
  --fpcomponentscardsheadcolor: #fff;
  --fpcomponentscardsheadfont: var(--font-instrument-sans), "Instrument Sans", sans-serif;
  --fpcomponentscardsdescriptioncolor: #9496aa;
  --fpcomponentscardsdescriptionfont: var(--font-instrument-sans), "Instrument Sans", sans-serif;
}

.fp-icon-fa {
 font-size: 21px;
 color: #ffffff;
}

.fp-benefits-wrapper {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 1140px;
 -webkit-tap-highlight-color: transparent;
 margin-top: 50px;
 z-index: 5;
}

@media(max-width: 1160px) {
.fp-benefits-wrapper, .tabs-widget{
 width: 90%;
}
}

.fp-card {
 height: 100%;
 display: flex;
 flex-direction: column;
 width: 100%;
 background: var(--fpcomponentscardsbackground);
 box-shadow: 0px 0px 0px 1px var(--fpcomponentscardscardsborder);
 transition: 1s;
 justify-content: start;
 align-items: start;
 position: relative;
 box-sizing: border-box;
 user-select: none;
}

.fp-benefits-wrapper:hover .fp-card:not(:hover) {
 opacity: 0.15;
}

.fp-content {
 flex: 1 1 auto;
 display: flex;
 flex-direction: column;
 justify-content: start;
 align-items: start;
 width: 100%;
 gap: 15px;
 padding: 40px 30px;
 box-sizing: border-box;
}

.fp-heading {
 color: var(--fpcomponentscardsheadcolor);
 font-family: var(--fpcomponentscardsheadfont);
 font-size: 21px;
 font-weight: 500;
 text-align: start;
 margin: 0;
 word-break: break-word !important;
}

.fp-description {
 color: var(--fpcomponentscardsdescriptioncolor);
 font-family: var(--fpcomponentscardsdescriptionfont);
 font-size: 14px;
 line-height: 1.2em;
 text-align: start;
 font-weight: 400;
 width: 100%;
 margin: 0;
 word-break: break-word;
}

@media(max-width: 1024px) {
.fp-heading {
 font-size: 24px;}
.fp-description {
 font-size: 14px;}
}

.fp-icon-line-wrapper {
 display: flex;
 align-items: center;
 justify-content: start;
 position: relative;
 width: 100%;
 padding-top: 30px;
 padding-left: 40px;
 box-sizing: border-box;
}

.fp-icon-line-wrapper::before,
.fp-icon-line-wrapper::after {
 content: "";
 position: absolute;
}

.fp-icon-line-wrapper::before {
 top: 65%;
 left: 50%;
 width: 100%;
 height: 1px;
 background: linear-gradient(to right, transparent -20%, var(--fpcomponentscardslinesbackcolor) 20%, transparent 95%);
 transform: translate(-50%, -50%);
}

.fp-icon-line-wrapper::after {
 top: 25px;
 left: 79px;
 width: 1px;
 height: 50%;
 background: linear-gradient(to bottom, transparent 5%, var(--fpcomponentscardslinesbackcolor) 50%);
 transform: translate(-50%, -50%);
}

.fp-icon-main {
 width: 80px;
 height: 80px;
 background: var(--fpcomponentscardscircleoutbackground);
 border-radius: 50%;
 border: 3px solid var(--fpcomponentscardscircleoutborder);
 box-shadow: inset 0 0 20px var(--fpcomponentscardscircleoutboxshadow);
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 z-index: 5;
}

.fp-icon-inner {
 width: 60px;
 height: 60px;
 background: var(--fpcomponentscardscircleinsidebackground);
 border-radius: 50%;
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
}

.fp-icon-inner::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 45%;
 width: 63px;
 height: 63px;
 transform: translate(-50%, -50%);
 background: conic-gradient(from 0deg at 50.12% 50%, transparent 0deg, var(--fpcomponentscardscircleinsideanimatedborder) 60deg, transparent 60.1deg),
 conic-gradient(from 0deg at 50.12% 50%, transparent 190deg, var(--fpcomponentscardscircleinsideanimatedborder) 250deg, transparent 250.1deg);
 animation: complete-line 2s linear infinite;
 transform: translate(-50%, -50%) rotate(0deg);
}

.fp-card:hover .fp-icon-inner::before {
 animation-duration: 0.4s !important;
}

.fp-icon-core {
 width: 56px;
 height: 56px;
 background: var(--fpcomponentscardscircleinsidebackfroundout);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 1;
}

.fp-dot1, .fp-dot2, .fp-dot3, .fp-dot4 {
 position: absolute;
}

.fp-dot1 { top: 0; left: 0; }

.fp-dot2 { top: 0; right: 0; }

.fp-dot3 { bottom: 0; right: 0; }

.fp-dot4 { bottom: 0; left: 0; }

.fp-dot1::before, .fp-dot2::before, .fp-dot3::before, .fp-dot4::before,
.fp-dot1::after, .fp-dot2::after, .fp-dot3::after, .fp-dot4::after {
 content: "";
 background: var(--fpcomponentscardsdotscolor);
 position: absolute;
}

.fp-dot1::before, .fp-dot2::before, .fp-dot3::before, .fp-dot4::before {
 width: 2px;
 height: 10px;
 top: -5px;
 left: -1px;
}

.fp-dot1::after, .fp-dot2::after, .fp-dot3::after, .fp-dot4::after {
 width: 10px;
 height: 2px;
 top: -1px;
 left: -5px;
}

.fp-dot1xy, .fp-dot2xy, .fp-dot3xy, .fp-dot4xy {
 position: absolute;
 background: var(--fpcomponentscardsdotcirclescolor);
 width: 6px;
 height: 6px;
 border-radius: 10px;
}

.fp-dot1xy { top: -5px; left: -5px; }

.fp-dot2xy { top: -5px; right: -5px; }

.fp-dot3xy { bottom: -5px; right: -5px; }

.fp-dot4xy { bottom: -5px; left: -5px; }

/* The ported CSS stated this across two identical media queries and three
   rules, one of them for .fp-row — a row wrapper the card grid no longer
   uses. Consolidated into one. */
@media (max-width: 1024px) {
  .fp-benefits-wrapper {
    width: 100%;
    align-items: center;
  }
}

.fp-icon-fa svg{
  fill: rgba(218, 240, 255, 0.637);
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
}

.popupfp .fp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 99999;
}

.popupfp .fp-row > :nth-child(3) {
  grid-column: 1 / -1; 
}

.popupfp .fp-heading {
  font-size: 16px;
}

.popupfp .fp-description {
  font-size: 14px;
}

.popupfp .fp-card:hover{
  background: rgb(24, 30, 54) !important;
}

@media(max-width: 1024px) {
.popupfp .fp-row {
  display: grid;
  grid-template-columns: 1fr;
  z-index: 99999;
}
.popupfp .fp-content{
  padding: 20px 20px;
}
.popupfp .fp-description {
  font-size: 12px;
}
.popupfp .fp-heading {
  font-size: 14px;
}
}

@media(max-width: 1024px) {
.popupfpcontentinside .fp-content{
  padding: 25px;
}
}

@keyframes complete-line {
 0%{ transform: translate(-50%, -50%) rotate(0deg); }
 100%{ transform: translate(-50%, -50%) rotate(360deg); }
}

/* The reference icons are solid paths styled with `fill`; lucide draws with
   strokes, so the colour has to move to the stroke for them to show. */
.fp-icon-fa .mce-fp-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: rgba(218, 240, 255, 0.85);
  stroke-width: 1.7;
}

/* ── Scroll entrances ─────────────────────────────────────────────────────
 * Tag an element with a direction class and scroll-reveal.js adds `.ativo`
 * when it reaches 85% of the viewport. The offset state is scoped to
 * `.reveal-ready`, which that script sets on <html> only once it has GSAP —
 * without it nothing is ever hidden, so a script failure degrades to a plain
 * page rather than a blank one.
 */
.reveal-ready .scroll-bottom,
.reveal-ready .scroll-top,
.reveal-ready .scroll-left,
.reveal-ready .scroll-right,
.reveal-ready .scroll-bottom2 {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
  filter: blur(10px) brightness(200%);
  -webkit-filter: blur(10px) brightness(200%);
  will-change: transform, opacity, filter;
}

.reveal-ready .scroll-bottom,
.reveal-ready .scroll-bottom2 {
  transform: translateY(30px);
}

.reveal-ready .scroll-top {
  transform: translateY(-30px);
}

.reveal-ready .scroll-left {
  transform: translateX(-30px);
}

.reveal-ready .scroll-right {
  transform: translateX(30px);
}

/* Revealed. `will-change` is dropped here: kept on every element for the
   life of the page it costs memory for an animation that has already run. */
.reveal-ready .ativo {
  opacity: 1;
  transform: translate(0, 0);
  filter: blur(0) brightness(100%);
  -webkit-filter: blur(0) brightness(100%);
  will-change: auto;
}

/* Staggers the cards in a row so they arrive in sequence rather than as one
   block. Depth is capped — past a handful the wait stops reading as rhythm. */
.reveal-stagger > *:nth-child(2) {
  transition-delay: 0.08s;
}

.reveal-stagger > *:nth-child(3) {
  transition-delay: 0.16s;
}

.reveal-stagger > *:nth-child(4) {
  transition-delay: 0.24s;
}

.reveal-stagger > *:nth-child(5) {
  transition-delay: 0.32s;
}

.reveal-stagger > *:nth-child(n + 6) {
  transition-delay: 0.4s;
}

/* ═══════════════════════════ 4. RESPONSIVE ═══════════════════════
 * Two blocks only: tablet, then phone. Type is in vw so it scales with the
 * device instead of stepping between breakpoints.
 *
 * `!important` appears where the ported CSS uses it for the same property —
 * .gb-promise is 8vw!important there, .gb-description 3.8vw!important — and
 * where Elementor zeroes .e-con-inner's inline padding with a two-class
 * selector.
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .mce-testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  /* The in-drawing callouts give way to lists: what sits above the waterline
     reads above the ice, the rest below it. */
  .mce-iceberg-svg .ice-callout {
    display: none;
  }

  /* The drawing carries this section on a phone, so it takes the full width
     the gutters allow rather than being capped. */
  /* The view box reserves the width either side of the ice for the callouts,
     which are hidden at this size, so well over half of it is empty. The
     drawing is widened past the viewport and the overflow clipped by
     .mce-iceberg, which crops that empty width away and leaves the ice
     filling the screen. */
  .mce-iceberg-svg {
    max-width: none;
    width: 215%;
    margin-inline: -57.5%;
    position: relative;
    z-index: 1;
  }


  /* One continuous rail from "Lo visible" down through the ice to the last
     stratum. It lives on the figure — the only ancestor spanning the list
     above, the drawing and the list below — because a line owned by any one
     of those three could not cross the other two. Above the ice, not behind
     it: the strata are what the section is about. */
  /* Clips the oversized drawing above. */
  .mce-iceberg {
    overflow: hidden;
  }

  .mce-iceberg-figure {
    position: relative;
    /* How far into the gutter the rail and its nodes sit, measured from the
       copy's left edge. Stated once so the line and the dots cannot drift
       apart. */
    --mce-rail-offset: 13px;
  }

  .mce-iceberg-figure::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--mce-rail-offset));
    top: 8px;
    bottom: 8px;
    width: 1px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgb(47 107 255 / 0.6),
      rgb(47 107 255 / 0.6) 70%,
      rgb(47 107 255 / 0.25)
    );
  }

  .mce-iceberg-fallback--above,
  .mce-iceberg-fallback--below {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .mce-iceberg-fallback--above {
    margin-bottom: 18px;
  }

  .mce-iceberg-fallback--below {
    margin-top: 22px;
  }

  /* No left padding: the strata line up with the section's other copy. The
     rail and its nodes sit in the gutter to the left of that edge instead
     of indenting the text away from it. */
  .mce-iceberg-fallback--above,
  .mce-iceberg-fallback--below {
    position: relative;
    z-index: 4;
    padding-left: 0;
  }

  /* Badge above its text, so every row starts on the same left edge
     regardless of how wide the badge happens to be. */
  .mce-iceberg-fallback li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 16px;
  }

  /* Node where each stratum meets the rail — "Lo visible" included, so the
     tip reads as the first stop on the same line rather than as a caption
     sitting apart from it. */
  .mce-iceberg-fallback--below li::before,
  .mce-iceberg-fallback--above li::before {
    content: "";
    position: absolute;
    /* Centred on the rail: half the node's width back from the line. */
    left: calc(-1 * var(--mce-rail-offset) - 5px);
    top: 9px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    z-index: 4;
    background: var(--mce-accent);
    box-shadow: 0 0 0 3px rgb(47 107 255 / 0.18), 0 0 12px rgb(47 107 255 / 0.6);
  }

  .mce-iceberg-fallback--above li {
    padding-bottom: 0;
  }

  .mce-iceberg-fallback--below li:last-child,
  .mce-iceberg-fallback--above li {
    border-bottom: 0;
    padding-bottom: 0;
  }

  /* Santiago: panels stack. */
  .mce-about-grid {
    grid-template-columns: 1fr;
  }

  .mce-about-panel--copy {
    border-left: 0;
  }

  /* The dots are too small to tap, so the cards move below the map. The pins
     stay, since their badges are what name the destinations. */
  .mce-map-hint {
    display: none;
  }

  .mce-map-canvas {
    opacity: 1;
  }

  .mce-map {
    width: 100%;
    max-width: none;
  }

  /* The map reads wider than its column so the arc is legible. */
  /* The map reads wider than its column so the arc is legible. */
  .mce-map-canvas {
    width: calc(100% + 2 * var(--mce-gutter));
    margin-inline: calc(-1 * var(--mce-gutter));
  }

  .mce-map-card {
    display: none;
  }

  .mce-map-hit {
    pointer-events: none;
    padding: 2px;
  }

  .mce-map-badge {
    font-size: 10px;
    padding: 2px 7px;
  }

  .mce-map-hit-dot {
    width: 9px;
    height: 9px;
  }

  /* The map is cropped at this width, so the pins move with it. */
  .mce-map-pin {
    --pin-x: var(--pin-mobile-x);
    --pin-y: var(--pin-mobile-y);
  }

  .mce-map-list li:last-child {
    margin-bottom: clamp(24px, 4vh, 40px);
  }

  /* Narrower than the column and centred, so the two destinations read as
     cards rather than as full-width bands. */
  .mce-map-list {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    width: 100%;
  }

  .mce-map-list li {
    width: min(300px, 100%);
  }

  .mce-map-list li {
    list-style: none;
    border-radius: 14px;
    overflow: hidden;
    background: rgb(255 255 255 / 0.03);
    border: 1px solid rgb(255 255 255 / 0.1);
  }

  .mce-lightarc {
    width: 500px;
    margin-bottom: -140px;
  }
}

@media (max-width: 767px) {
  /* ── Gutters ────────────────────────────────────────────────────
   * Elementor sets `.e-con > .e-con-inner { padding-inline: 0 }`, so these
   * need the extra class and the bang to land.
   */
  .e-con.mce-club > .e-con-inner,
  .e-con.mce-testimonials > .e-con-inner,

  .mce-club-inner,
  .mce-testimonials-inner,
  .mce-paths-inner,
  .mce-about,
  .mce-map,
  .mce-club-bridge,
  .mce-chain,
  .mce-iceberg,
  .mce-club-access-list {
    padding-inline: var(--mce-gutter);
  }

  /* The ripple grid is `absolute inset-0` inside this block, so padding on
     an ancestor shrinks the block and clips the grid with it. The heading
     takes the gutter back out to the full viewport width and re-applies it
     to its own content instead, which keeps the backdrop edge-to-edge. */
  .mce-club-heading {
    width: calc(100% + 2 * var(--mce-gutter));
    margin-inline: calc(-1 * var(--mce-gutter));
    padding-inline: 0;
  }

  .mce-club-heading .mce-club-heading-content {
    padding-inline: var(--mce-gutter);
  }

  .mce-club-access-list,
  .mce-testimonial-grid {
    width: 100%;
    box-sizing: border-box;
  }

  /* ── Type ───────────────────────────────────────────────────── */
  .mce-section-title,
  .mce-section-title--sub {
    font-size: 6vw !important;
    line-height: 1.2;
  }

  .mce-footer-legal {
    font-size: 3.4vw;
  }

  .gb-hero .gb-promise {
    font-size: 7vw !important;
  }

  .gb-hero .gb-description {
    font-size: 4vw !important;
  }

  .mce-narrative-line,
  .mce-about-text,
  .mce-testimonial-name,
  .mce-paths .grid > div > p:last-of-type {
    font-size: 4vw !important;
  }

  .mce-paths .grid > div > p:first-of-type {
    font-size: 5vw !important;
  }

  .mce-iceberg-fallback .ice-badge {
    font-size: 3vw !important;
    padding: 4px 8px;
  }

  .mce-iceberg-fallback .ice-callout-detail {
    font-size: 4vw !important;
    line-height: 1.4;
  }

  /* ── Alignment ──────────────────────────────────────────────────
   * Running copy reads left; the chain and the bridge are statements and
   * stay centred.
   */
  .mce-narrative,
  .mce-narrative-line,
  .mce-about-panel--copy,
  .mce-about-text,
  /* Each stratum's detail lines up with the badge above it, both in the
     list below the ice and in the "Lo visible" item above it. */
  .mce-iceberg-fallback li,
  .mce-iceberg-fallback .ice-callout-detail {
    text-align: left !important;
  }

  /* The chain reads as a vertical sequence, its arrows turning upright. */
  .mce-chain-steps {
    flex-direction: column;
    gap: 12px;
  }

  .mce-chain-steps li {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .mce-chain-steps li span {
    width: 100%;
    justify-content: center;
  }

  .mce-chain-steps li:not(:last-child)::after {
    width: 1px;
    height: 18px;
    background: linear-gradient(180deg, rgb(47 107 255 / 0.6), rgb(47 107 255 / 0.15));
  }

  /* The Club heading centres with room above it. */
  .mce-club-access-heading {
    margin-top: 20px;
    text-align: center;
  }

  .mce-chain,
  .mce-chain-lead,
  .mce-club-bridge {
    text-align: center !important;
  }

  /* The notes under the chain are running copy, so they read left. */
  .mce-chain .mce-narrative,
  .mce-chain .mce-narrative-line {
    text-align: left !important;
  }

  /* ── Hero ───────────────────────────────────────────────────── */
  .gb-widget--no-vsl .gb-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .gb-hero .gb-logo,
  .gb-hero .gb-promise,
  .gb-hero .gb-description {
    margin: 0 !important;
  }

  .gb-hero-cta {
    margin-top: 10px;
    width: 100%;
  }

  .gb-hero-cta .orb-btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .gb-scene {
    margin-top: -80px;
  }

  /* ── Club ───────────────────────────────────────────────────── */
  .mce-club-access .fp-grid {
    grid-template-columns: 1fr;
  }

  /* ── Qualifying cards ───────────────────────────────────────── */
  .mce-paths .py-20 {
    padding-block: 0 !important;
  }

  .mce-paths .grid {
    gap: 12px;
  }

  .mce-paths .grid > div {
    padding: 18px;
  }

  /* ── Santiago: all four photos per row fit the width ────────── */
  .mce-about-grid {
    border: 0;
    border-radius: 0;
    gap: 20px;
  }

  .mce-about-panel {
    padding: 0;
  }

  .mce-about-panel--copy {
    border-top: 0;
  }

  .mce-about-panel--photos > div {
    gap: 10px;
  }

  .mce-about-panel--photos .flex-row {
    margin-left: 0;
    justify-content: space-between;
    width: 100%;
  }

  .mce-about-panel--photos .flex-row > div {
    margin-right: 0;
    margin-top: 0;
    flex: 1 1 0;
    min-width: 0;
  }

  .mce-about-panel--photos img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  /* ── Testimonials ───────────────────────────────────────────── */
  .mce-testimonial-grid {
    grid-template-columns: 1fr;
  }

  .mce-testimonial-icon {
    width: 50px;
    height: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spline-container,
  .mce-map-pin,
  .ice-trace {
    animation: none;
  }

  /* Entrances resolve instantly. scroll-reveal.js also reveals everything up
     front in this case; this covers the moment before it runs. */
  .reveal-ready .scroll-bottom,
  .reveal-ready .scroll-top,
  .reveal-ready .scroll-left,
  .reveal-ready .scroll-right,
  .reveal-ready .scroll-bottom2 {
    opacity: 1;
    transform: none;
    filter: none;
    -webkit-filter: none;
    transition: none;
  }

  .reveal-stagger > * {
    transition-delay: 0s;
  }

  #mce-iceberg-scenery .ice-tip,
  #mce-iceberg-scenery .ice-mass,
  .ice-node-ring,
  .mce-testimonial-frame:hover::after,
  .mce-footer::after,
  .mce-map-hint::before,
  .mce-map-hint::after,
  .mce-section-title .titulo-premium {
    animation: none;
  }

  .ice-connector {
    stroke-dashoffset: 0;
  }

  .mce-iceberg-svg.is-armed .ice-callout foreignObject,
  .mce-iceberg-svg.is-armed .ice-node-group {
    opacity: 1;
  }

  .spline-container {
    display: none;
  }
}