:root {
  color-scheme: dark;
  --orange: #ff6300;
  --orange-hot: #ff7a1a;
  --orange-soft: rgba(255, 99, 0, 0.12);
  --ink: #050505;
  --ink-2: #0a0a0b;
  --panel: #0f0f11;
  --white: #f7f7f4;
  --muted: #a3a3a3;
  --line: rgba(255, 255, 255, 0.11);
  --linestrong: #ff6200dd;
  --shell: min(1180px, calc(100vw - 48px));
  --display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--white);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.menu-open {
  overflow-x: hidden;
  overflow-y: auto;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  background: var(--orange);
  color: #050505;
  transform: translateY(-140%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }
.section-shell { width: var(--shell); margin-inline: auto; }

.site-header {
  position: fixed;
  z-index: 100;
  top: 14px;
  left: 50%;
  width: min(700px, calc(100vw - 40px));
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(18, 18, 20, .56), rgba(5, 5, 6, .34));
  box-shadow:
    0 18px 55px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  isolation: isolate;
  transition:
    border-color .62s cubic-bezier(.22,.61,.36,1),
    box-shadow .68s cubic-bezier(.22,.61,.36,1),
    backdrop-filter .68s cubic-bezier(.22,.61,.36,1),
    -webkit-backdrop-filter .68s cubic-bezier(.22,.61,.36,1);
}

/* Cross-fade the darker header material instead of swapping gradients abruptly. */
.site-header::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(16, 16, 18, .88), rgba(5, 5, 6, .76));
  opacity: 0;
  transition: opacity .68s cubic-bezier(.22,.61,.36,1);
}

/* A very soft internal orange sheen travels through the glass during the change. */
.site-header::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1px;
  border-radius: calc(24px - 1px);
  pointer-events: none;
  background:
    linear-gradient(
      105deg,
      transparent 10%,
      rgba(255, 99, 0, 0) 28%,
      rgba(255, 99, 0, .075) 48%,
      rgba(255, 255, 255, .045) 55%,
      rgba(255, 99, 0, 0) 72%,
      transparent 90%
    );
  background-size: 220% 100%;
  background-position: 115% 50%;
  opacity: 0;
  transition:
    opacity .42s ease,
    background-position .9s cubic-bezier(.22,.61,.36,1);
}

.site-header > * {
  position: relative;
  z-index: 1;
}

.site-header.is-scrolled {
  border-color: rgba(255, 255, 255, .16);
  box-shadow:
    0 22px 65px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(255, 99, 0, .025),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.site-header.is-scrolled::before {
  opacity: 1;
}

.site-header.is-scrolled::after {
  opacity: .82;
  background-position: -15% 50%;
}
.header-inner {
  width: 100%;
  height: 70px;
  padding-inline: 22px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; }
.brand-symbol {
  width: 34px;
  aspect-ratio: 1;
  display: block;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 0 28px rgba(255, 99, 0, .25);
}
.brand-symbol img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.brand-word {
  display: inline-flex;
  align-items: center;
  height: 20px;
  flex: 0 0 auto;
}
.brand-word img {
  display: block;
  width: auto;
  height: 100%;
  object-fit: contain;
}
.brand-division {
  margin-left: 3px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.22);
  color: #bcbcbc;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition:
    color .58s cubic-bezier(.22,.61,.36,1),
    border-color .58s cubic-bezier(.22,.61,.36,1);
}
.desktop-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.desktop-nav a, .login-link {
  color: #b8b8b8;
  font-size: 14px;
  transition: color .58s cubic-bezier(.22,.61,.36,1);
}
.desktop-nav a:hover, .login-link:hover { color: #fff; }

/* Hero header: on desktop/tablet-landscape the initial glass header uses
   white secondary text. Once the header switches to its scrolled state,
   restore the original muted colours. */
@media (min-width: 1024px) {
  .site-header:not(.is-scrolled) .brand-division,
  .site-header:not(.is-scrolled) .login-link {
    color: #fff;
  }

  .site-header.is-scrolled .brand-division { color: #bcbcbc; }
  .site-header.is-scrolled .login-link { color: #b8b8b8; }
}

.header-actions { display: flex; align-items: center; gap: 22px; }
.button {
  min-height: 52px;
  padding: 0 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  border: 1px solid var(--orange);
  border-radius: 3px;
  background: var(--orange);
  color: #080808;
  font-weight: 750;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(255, 99, 0, .14);
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.button:hover { background: var(--orange-hot); transform: translateY(-2px); box-shadow: 0 16px 38px rgba(255,99,0,.22); }
.button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.button-small { min-height: 42px; padding-inline: 18px; font-size: 15px; border-radius: 999px;}
.menu-button {
  display: none;
  width: 42px;
  height: 42px;
  padding: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.menu-button span {
  display: block;
  width: 22px;
  height: 1.5px;
  margin: 0;
  border-radius: 999px;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}
.menu-button span:nth-child(1) { opacity: .38; }
.menu-button span:nth-child(2) { opacity: .68; }
.menu-button span:nth-child(3) { opacity: 1; }
.menu-button[aria-expanded="true"] span:nth-child(1) {
  opacity: 1;
  transform: translateY(6.5px) rotate(45deg);
}
.menu-button[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(.25);
}
.menu-button[aria-expanded="true"] span:nth-child(3) {
  opacity: 1;
  transform: translateY(-6.5px) rotate(-45deg);
}
.mobile-nav { display: none; }

.hero {
  position: relative;
  min-height: 700px;
  padding-top: 100px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.hero-backdrop {
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,5,5,.46) 0%, rgba(5,5,5,.72) 43%, rgba(5,5,5,.72) 100%),
    url("assets/background-numbux.webp") center/cover no-repeat;
  opacity: .72;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at 76% 43%, rgba(255,99,0,.19), transparent 26%),
    linear-gradient(180deg, transparent 68%, #050505 100%);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .12;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, #000, transparent 74%);
}
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 42px; }
.eyebrow {
  margin: 0 0 20px;
  color: #d0d0d0;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.eyebrow span { display: inline-block; width: 28px; height: 1px; margin: 0 10px 4px 0; background: var(--orange); box-shadow: 0 0 12px var(--orange); }
.hero h1, .section-intro h2, .difference-copy h2, .contact-copy h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -.062em;
  line-height: .98;
}
.hero h1 { max-width: 720px; font-size: clamp(3.6rem, 5.7vw, 6.3rem); }
h1 em, h2 em { color: var(--orange); font-style: normal; }
.hero-lead { max-width: 650px; margin: 28px 0 0; color: #c5c5c5; font-size: 19px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.text-link { display: inline-flex; align-items: center; gap: 26px; color: #ececec; font-weight: 650; font-size: 14px; }
.text-link span { color: var(--orange); transition: transform .2s ease; }
.text-link:hover span { transform: translate(3px, -2px); }
.hero-proof { margin-top: 52px; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-proof span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.12); background: rgba(8,8,8,.5); color: #a7a7a7; font-size: 12px; backdrop-filter: blur(8px); }

.hero-visual { position: relative; min-height: 540px; }
.school-stage { position: absolute; z-index: 3; width: 112%; left: -5%; bottom: 36px; filter: drop-shadow(0 28px 38px rgba(0,0,0,.65)); }
.school-stage img { position: relative; z-index: 2; width: 100%; }
.school-aura { position: absolute; inset: 18% 12% 3%; border-radius: 50%; background: rgba(255,99,0,.18); filter: blur(42px); animation: breathe 5s ease-in-out infinite; }
.visual-orbit { position: absolute; z-index: 1; border: 1px solid rgba(255,99,0,.28); border-radius: 50%; transform: rotate(-12deg); }
.orbit-one { width: 530px; height: 240px; left: 0; bottom: 78px; }
.orbit-two { width: 610px; height: 310px; left: -38px; bottom: 43px; opacity: .56; }
.visual-beam { position: absolute; z-index: 0; width: 4px; height: 75%; left: 50%; bottom: 8%; background: linear-gradient(transparent, var(--orange), transparent); filter: blur(5px); opacity: .65; }
.value-chip {
  position: absolute;
  z-index: 6;
  min-width: 146px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(8,8,9,.76);
  backdrop-filter: blur(14px);
  color: #e8e8e8;
  font-size: 13px;
  font-weight: 650;
  box-shadow: 0 15px 35px rgba(0,0,0,.3);
  animation: float 5s ease-in-out infinite;
}
.value-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 14px var(--orange); }
.chip-power { top: 130px; left: 2%; }
.chip-adapt { top: 128px; right: -2%; animation-delay: -1s; }
.chip-connect { bottom: 84px; right: -4%; animation-delay: -2s; }
.chip-value { bottom: 80px; left: 4%; animation-delay: -3s; }
.nx-core img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.hero-foot { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 12px; color: #858585; font-size: 14px; }
.hero-foot p { margin: 0; }
.hero-foot strong { color: #f2f2f2; font-weight: 650; }

.value-section, .capabilities-section, .process-section, .faq-section { padding-block: 100px; }
.section-intro { max-width: 770px; }
.section-intro h2, .difference-copy h2, .contact-copy h2 { font-size: clamp(2.7rem, 4.7vw, 5.2rem); }
.section-intro > p:last-child, .difference-copy > p, .contact-copy > p { max-width: 660px; margin: 28px 0 0; color: var(--muted); font-size: 18px; line-height: 1.7; }
.section-intro-centered { margin-inline: auto; text-align: center; }
.section-intro-centered > p:last-child { margin-inline: auto; }
.section-intro-centered .eyebrow span { display: none; }
.value-grid { margin-top: 76px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.value-card { --hover-lift: 0px; position: relative; min-height: 200px; padding: 0px 28px 30px; display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(160deg, rgba(255,255,255,.026), transparent 70%); overflow: hidden; transition: background .3s ease, transform .3s ease; }
.value-card:not(.scroll-flip-card) { transform: translateY(var(--hover-lift)); }
.value-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -100px; bottom: -100px; border: 1px solid rgba(255,99,0,.18); border-radius: 50%; transition: transform .4s ease; }
.value-card:hover { --hover-lift: -4px; background: rgba(255,255,255,.048); }
.scroll-flip-card:hover { transform: translate3d(0, calc(var(--flip-y) + var(--hover-lift)), 0) rotateX(var(--flip-rotate-x)) rotateY(var(--flip-rotate-y)) scale(var(--flip-scale)); }
.value-card:hover::after { transform: scale(1.35); }
.value-card-featured { background: linear-gradient(160deg, rgba(255,99,0,.16), rgba(255,99,0,.025) 70%); }
.card-index { color: #777; font-size: 12px; letter-spacing: .14em; }
.card-icon { width: 52px; height: 52px; margin-top: 50px; display: grid; place-items: center; border: 1px solid rgba(255,99,0,.36); color: var(--orange); background: rgba(255,99,0,.06); }
.card-icon svg, .panel-icon svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.value-card h3 { margin: 24px 0 11px; font-size: 25px; letter-spacing: -.035em; }
.value-card p { margin: 0; color: #9e9e9e; font-size: 15px; line-height: 1.7; }
.card-note { margin-top: auto; padding-top: 28px; color: #e3e3e3; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }


/* Scroll-linked 3D flip entrance for the value proposition cards. */
.value-grid {
  perspective: 1400px;
  perspective-origin: 50% 35%;
}

.scroll-flip-card {
  --flip-y: 120px;
  --flip-rotate-x: 72deg;
  --flip-rotate-y: 0deg;
  --flip-scale: .90;
  --flip-opacity: 0;
  --flip-blur: 5px;

  transform-origin: 50% 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity, filter;
  opacity: var(--flip-opacity);
  filter: blur(var(--flip-blur));
  transform:
    translate3d(0, calc(var(--flip-y) + var(--hover-lift)), 0)
    rotateX(var(--flip-rotate-x))
    rotateY(var(--flip-rotate-y))
    scale(var(--flip-scale));
}

/* Keep the premium hover treatment without fighting the scroll transform. */
.scroll-flip-card:hover {
  background: rgba(255,255,255,.048);
}

.scroll-flip-card.value-card-featured:hover {
  background: linear-gradient(160deg, rgba(255,99,0,.19), rgba(255,99,0,.04) 70%);
}

.ecosystem-section { padding-block: 70px; background: #f2f1ed; color: #111; }
.ecosystem-section .eyebrow { color: #565656; }
.ecosystem-section .section-intro > p:last-child { color: #676767; }
.ecosystem-map { position: relative; height: 470px; margin-top: 70px; overflow: hidden; border: 1px solid rgba(0,0,0,.11); background: linear-gradient(135deg, #e9e8e4 0%, #f8f7f4 50%, #e9e8e4 100%); }
.ecosystem-map::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(0,0,0,.12) .7px, transparent .7px); background-size: 18px 18px; opacity: .38; }
.eco-plug { width: 140px !important; }
.map-glow { position: absolute; z-index: 0; width: 430px; height: 430px; left: calc(56% - 215px); top: 20px; border-radius: 50%; background: rgba(255,99,0,.12); filter: blur(60px); }
.map-lines { position: absolute; z-index: 1; inset: 25px 0; width: 100%; height: calc(100% - 50px); overflow: visible; }
.map-lines path { fill: none; stroke-linecap: round; }
.base-line { stroke: rgba(0,0,0,.18); stroke-width: 2; }
.live-line { stroke: url(#lineGradient); stroke-width: 3; stroke-dasharray: 7 22; animation: flow 2.4s linear infinite; }
.branch-line { stroke: rgba(255,99,0,.36); stroke-width: 1.5; stroke-dasharray: 5 10; }
.map-node, .map-hub, .family-cluster, .layer-stack { position: absolute; z-index: 3; }
.map-school { left: 4%; top: 110px; width: 230px; text-align: center; }
.map-school img { width: 200px; height: 135px; margin-inline: auto; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(0,0,0,.18)); }
.map-node small, .family-label small, .map-hub small { display: block; margin-top: 7px; color: #777; font-size: 10px; font-weight: 750; letter-spacing: .14em; }
.map-node strong, .family-label strong { font-size: 16px; }
.layer-stack { left: 27%; top: 108px; display: grid; gap: 8px; }
.layer-stack span { min-width: 145px; padding: 8px 12px; border: 1px solid rgba(0,0,0,.1); background: rgba(255,255,255,.73); color: #565656; font-size: 12px; box-shadow: 0 8px 22px rgba(0,0,0,.05); }
.map-hub { left: calc(57% - 58px); top: calc(50% - 66px); width: 116px; text-align: center; }
.map-hub img { position: relative; z-index: 2; width: 92px; aspect-ratio: 1; margin-inline: auto; object-fit: cover; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 16px 38px rgba(255,99,0,.26); }
.hub-ring { position: absolute; left: 50%; top: 46px; transform: translate(-50%,-50%); border: 1px solid rgba(255,99,0,.36); border-radius: 50%; animation: ripple 3s ease-out infinite; }
.ring-a { width: 125px; height: 125px; }
.ring-b { width: 165px; height: 165px; animation-delay: -1.5s; }
.family-cluster { right: 3.6%; top: 63px; width: 170px; height: 330px; }
.family-avatar { position: absolute; width: 74px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(255,99,0,.28); border-radius: 50%; background: #fff; box-shadow: 0 14px 28px rgba(0,0,0,.09); }
.family-avatar img { width: 47px; }
.avatar-one { left: 2px; top: 0; }
.avatar-two { right: 0; top: 110px; }
.avatar-three { left: 0; top: 220px; }
.family-label { position: absolute; width: 180px; top: 151px; left: -128px; text-align: right; }
.signal-dot { position: absolute; z-index: 5; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 14px var(--orange); animation: signal 4s linear infinite; }
.signal-one { left: 19%; top: 50%; }
.signal-two { left: 45%; top: 50%; animation-delay: -1.6s; }
.signal-three { left: 72%; top: 50%; animation-delay: -2.8s; }
.boundary-note { max-width: 890px; margin: 32px auto 0; display: flex; align-items: center; gap: 18px; color: #555; font-size: 15px; }
.boundary-note p { margin: 0; }
.boundary-note strong { color: #111; }
.boundary-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #111; color: var(--orange); }

.capabilities-section .section-intro { max-width: 900px; }

/* Four impact areas assemble together; scrolling triggers one short snap event. */
.capability-panels {
  position: relative;
  isolation: isolate;
  overflow: visible;
  margin-top: 75px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.capability-panels::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(50vw, 620px);
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,99,0,.56), rgba(255,99,0,.18) 36%, transparent 70%);
  filter: blur(56px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.46);
}
.capability-panel {
  --start-x: 0px;
  --start-y: 0px;
  position: relative;
  z-index: 1;
  min-height: 430px;
  padding: 34px 38px 38px;
  border: 3px solid rgba(255,99,0,.38);
  background: linear-gradient(145deg, #111113, #080809);
  transform: translate3d(var(--start-x), var(--start-y), 0);
  box-shadow: 0 0 0 rgba(255,99,0,0), inset 0 0 0 rgba(255,99,0,0);
  transition: border-color .18s ease, box-shadow .2s ease;
  will-change: transform;
}
.capability-panel:nth-child(1) { --start-x: -78px; --start-y: -58px; }
.capability-panel:nth-child(2) { --start-x: 78px; --start-y: -58px; border-left: 0; }
.capability-panel:nth-child(3) { --start-x: -78px; --start-y: 58px; border-top: 0; }
.capability-panel:nth-child(4) { --start-x: 78px; --start-y: 58px; border-left: 0; border-top: 0; }
.capability-panel:hover { border-color: rgba(255,99,0,.45); }

.panel-top {
  position: relative;
  min-height: 54px;
  display: grid;
  place-items: center;
  padding-inline: 64px;
}
.panel-top h3 {
  width: 100%;
  margin: 0;
  justify-self: stretch;
  text-align: left;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -.045em;
  margin-left: 6px;
}
.panel-icon {
  position: absolute;
  left: 0;
  right: auto;
  top: 50%;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: var(--orange);
  border: 1px solid rgba(255,99,0,.27);
  border-radius: 50%;
  transform: translateY(-50%);
}
.capability-panel > p { max-width: 500px; margin: 46px 0 0; color: #9d9d9d; }
.capability-panel ul { margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; list-style: none; }
.capability-panel li { position: relative; padding-left: 18px; color: #d0d0d0; font-size: 14px; }
.capability-panel li::before { content: ""; position: absolute; left: 0; top: .66em; width: 6px; height: 2px; background: var(--orange); }
@media (min-width: 561px) {
  .capability-panel li.benefit-right-column { grid-column: 2; }
}



.capability-panels.is-assembled .capability-panel {
  transform: translate3d(0, 0, 0);
  border-color: var(--linestrong);
  box-shadow: 0 0 22px rgba(255,99,0,.10), inset 0 0 22px rgba(255,99,0,.035);
  animation: puzzle-piece-snap .42s cubic-bezier(.12,1.08,.28,1) both;
}
.capability-panels.is-assembled::before {
  animation: puzzle-center-glow .9s cubic-bezier(.2,.8,.25,1) .08s both;
}
@keyframes puzzle-piece-snap {
  0% { transform: translate3d(var(--start-x), var(--start-y), 0); }
  65% { transform: translate3d(calc(var(--start-x) * -0.06), calc(var(--start-y) * -0.06), 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes puzzle-center-glow {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.42); }
  42% { opacity: .98; transform: translate(-50%, -50%) scale(.96); }
  100% { opacity: .22; transform: translate(-50%, -50%) scale(1); }
}
.difference-section { padding-block: 0px; padding-bottom: 100px; padding-top: 30px; background: var(--orange); color: #090909; overflow: hidden; }
.difference-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start; }
.difference-section .eyebrow { 
  color: #272727; 
  margin-top: 70px;
  margin-bottom: 50px;

}
.difference-section .eyebrow span { background: #080808; box-shadow: none; }
.difference-copy h2 em { color: #fff; }
.difference-copy > p { color: rgba(0,0,0,.69); }
.text-link-light { margin-top: 32px; color: #0a0a0a; border-bottom: 1px solid rgba(0,0,0,.3); padding-bottom: 5px; }
.text-link-light span { color: #fff; }
.difference-list { align-self: start; margin-top: 139px; border-top: 1px solid rgba(0,0,0,.23); }
.difference-list article { display: grid; grid-template-columns: 45px 1fr; gap: 18px; padding: 25px 0; border-bottom: 1px solid rgba(0,0,0,.23); }
.difference-list article > span {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: .13em;
  place-self: center;
  text-align: center;
}
.difference-list h3 { margin: 0 0 5px; font-size: 20px; letter-spacing: -.03em; }
.difference-list p { margin: 0; color: rgba(0,0,0,.67); font-size: 14px; }

.process-list { position: relative; margin: 35px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; }
.process-list::before { content: ""; position: absolute; left: 0; right: 0; top: 45px; height: 1px; background: linear-gradient(90deg, var(--orange), rgba(255,99,0,.16)); }
.process-list li { position: relative; padding: 0 30px 0 0; }
.process-number { color: #656565; font-size: 11px; letter-spacing: .16em; }
.process-dot { position: relative; z-index: 2; width: 13px; height: 13px; margin: 39px 0 32px; border: 3px solid #050505; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 1px var(--orange), 0 0 20px rgba(255,99,0,.4); }
.process-list h3 { margin: 0 0 10px; font-size: 23px; letter-spacing: -.035em; }
.process-list p { margin: 0; color: #999; font-size: 14px; line-height: 1.7; }

.contact-section { position: relative; padding-block: 130px; overflow: hidden; background: #0a0a0b; border-block: 1px solid var(--line); }
.contact-section::before { content: ""; position: absolute; inset: 0; opacity: .08; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 58px 58px; }
.contact-glow { position: absolute; width: 650px; height: 650px; left: -250px; top: -90px; border-radius: 50%; background: rgba(255,99,0,.13); filter: blur(85px); }
.contact-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 86px; align-items: center; }
.contact-copy > p { max-width: 550px; }
.contact-points { margin-top: 31px; display: grid; gap: 10px; color: #c6c6c6; font-size: 14px; }
.contact-points i { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: rgba(255,99,0,.12); color: var(--orange); font-style: normal; font-size: 11px; }
.contact-email { margin-top: 36px; display: inline-flex; align-items: center; gap: 45px; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.22); font-size: 17px; font-weight: 700; }
.contact-email span { color: var(--orange); }
.form-card { padding: 34px; border: 1px solid rgba(255,255,255,.15); background: rgba(16,16,18,.88); box-shadow: 0 28px 70px rgba(0,0,0,.38); backdrop-filter: blur(14px); }
.form-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 30px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.form-heading small { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.form-heading h3 { margin: 5px 0 0; font-size: 24px; letter-spacing: -.04em; }
.form-status { color: #888; font-size: 11px; white-space: nowrap; }
.form-status i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 9px var(--orange); }
.form-card form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-card label { display: grid; gap: 7px; }
.form-card label > span { color: #b6b6b6; font-size: 12px; }
.form-card input:not([type="checkbox"]), .form-card textarea { width: 100%; border: 1px solid rgba(255,255,255,.13); border-radius: 2px; background: #0a0a0b; color: #fff; padding: 13px 14px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.form-card input:not([type="checkbox"]) { height: 49px; }
.form-card textarea { resize: vertical; min-height: 110px; }
.form-card input::placeholder, .form-card textarea::placeholder { color: #575757; }
.form-card input:focus, .form-card textarea:focus { border-color: rgba(255,99,0,.78); box-shadow: 0 0 0 3px rgba(255,99,0,.08); }
.privacy-check { display: flex !important; grid-template-columns: 18px 1fr; align-items: flex-start; gap: 10px !important; }
.privacy-check input { margin: 3px 0 0; accent-color: var(--orange); }
.privacy-check a { color: #eee; text-decoration: underline; text-underline-offset: 3px; }
.button-full { width: 100%; margin-top: 2px; }

.form-card input[aria-invalid="true"],
.form-card textarea[aria-invalid="true"] {
  border-color: #ff6300;
  box-shadow: 0 0 0 3px rgba(255,99,0,.10);
}

.privacy-check input[aria-invalid="true"] {
  outline: 2px solid #ff6300;
  outline-offset: 3px;
}

.form-feedback {
  min-height: 22px;
  margin: -4px 0 0;
  color: #8d8d8d;
  font-size: 12px;
  line-height: 1.5;
}

.form-feedback.is-success { color: #ff6300; }
.form-feedback.is-error { color: #ffb2a0; }
.form-feedback.is-info { color: #b9b9b9; }

.field-counter {
  display: none;
  margin-top: -2px;
  justify-self: end;
  color: #ff6300;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .02em;
}


.field-counter.is-limit {
  display: block;
}

.form-card input.is-at-char-limit,
.form-card textarea.is-at-char-limit {
  border-color: rgba(255,99,0,.78);
  box-shadow: 0 0 0 3px rgba(255,99,0,.08);
}

.form-card .button[disabled] {
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.form-card .button.is-submitting {
  opacity: .72;
}

.form-card .button.is-cooldown {
  opacity: .58;
  background: rgba(255,99,0,.35);
  border-color: rgba(255,99,0,.55);
  color: #d8d8d8;
}

.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

.faq-section { display: grid; grid-template-columns: .72fr 1.28fr; gap: 90px; align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  position: relative;
  padding: 25px 48px 25px 0;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 650;
  -webkit-tap-highlight-color: rgba(255, 98, 0, 0.519);
  transition: background-color .14s ease, color .14s ease;
}

.faq-list summary:focus-visible {
  outline: 2px solid #ff6300;
  outline-offset: 3px;
}

.faq-list summary:active {
  background: rgba(255, 99, 0, .08);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { position: absolute; right: 4px; top: 24px; color: var(--orange); font-size: 22px; font-weight: 400; transition: transform .25s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 650px; margin: -6px 0 25px; padding-right: 30px; color: #969696; font-size: 15px; line-height: 1.75; }

.site-footer { padding: 70px 0 25px; background: #020202; border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; padding-bottom: 65px; }
.footer-brand > p { max-width: 390px; margin: 25px 0 0; color: #777; font-size: 14px; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer-links div { display: grid; align-content: start; gap: 10px; }
.footer-links small { margin-bottom: 9px; color: #656565; font-size: 10px; font-weight: 750; letter-spacing: .16em; }
.footer-links a { color: #b5b5b5; font-size: 14px; }
.footer-links a:hover { color: var(--orange); }
.footer-bottom { padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: #5d5d5d; font-size: 11px; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.25,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes breathe { 0%,100% { opacity: .52; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes flow { to { stroke-dashoffset: -29; } }
@keyframes ripple { 0% { opacity: .6; transform: translate(-50%,-50%) scale(.72); } 75%,100% { opacity: 0; transform: translate(-50%,-50%) scale(1.2); } }
@keyframes signal { 0% { opacity: 0; transform: translateX(-30px) scale(.5); } 16% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; transform: translateX(90px) scale(1); } }

@media (max-width: 1200px) and (min-width: 801px) {

  .hero {
    min-height: 600px;
  }

  .hero-grid {
    transform: translateY(-30px) scale(0.9) !important;
    transform-origin: top center;
  }

  .hero-visual {
    min-height: 480px;
  }

  .value-section {
    padding-top: 0px;
  }
}

@media (max-width: 800px) {
  .difference-list { margin-top: 0; }

  .desktop-nav { display: none; }
  .menu-button { display: flex; }
  .mobile-nav {
    position: absolute;
    inset: calc(100% + 2px) 0 auto;
    max-height: calc(100vh - 112px);
    padding: 26px 24px;
    display: grid;
    align-content: start;
    gap: 0;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    background: rgba(8, 8, 9, .94);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .46);
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
    transform: translateY(-12px) scale(.985);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity .25s ease, transform .3s cubic-bezier(.2,.75,.25,1), visibility .25s ease;
  }

    /* Remove ONLY the panel behind the buttons */
  .mobile-nav {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Keep Iniciar Sesión as a dark button */
  .mobile-nav .mobile-nav-login {
    background: rgba(15, 15, 17, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow:
      0 10px 30px rgba(0, 0, 0, .28),
      inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  }

  .mobile-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .mobile-nav a { padding: 0px 0; font-size: 18px; font-weight: 600; text-align: center;}
  .mobile-nav .button-small {
    display: none;
  }
  .hero { padding-top: 140px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { position: relative; z-index: 4; }
  .hero h1 { max-width: 820px; }
  .hero-visual { max-width: 700px; width: 100%; margin: -45px auto 0; min-height: 500px; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .difference-grid, .contact-grid { gap: 50px; }
  .ecosystem-map { height: 440px; }
  .map-school { width: 190px; left: 2%; }
  .map-school img { width: 170px; }
  .layer-stack { left: 23%; }
  .family-label { display: none; }
}

@media (max-width: 800px) {
  :root { --shell: min(100% - 32px, 680px); }
  .site-header { top: 10px; width: min(500px, calc(100vw - 40px)); border-radius: 21px; }
  .header-inner { height: 64px; padding-inline: 14px; }
  .brand-division, .login-link { display: none; }
  .mobile-nav { max-height: calc(100vh - 94px); border-radius: 20px; }
  .hero { min-height: auto; padding: 125px 0 36px; }
  .hero h1 { font-size: clamp(3rem, 13.2vw, 5rem); }
  .hero-lead { font-size: 17px; }
  .hero-proof { margin-top: 36px; }
  .hero-visual { min-height: 410px; margin-top: -16px; }
  .school-stage { width: 108%; left: -4%; transform: translateY(10%)}
  .orbit-one { width: 90%; height: 180px; }
  .orbit-two { width: 106%; height: 240px; }
  .chip-power { top: 58px; }
  .chip-adapt { top: 112px; right: 0; }
  .chip-connect { bottom: 65px; right: 0; }
  .chip-value { left: 0; bottom: 22px; }
  .hero-foot { display: block; }
  .hero-foot strong { display: block; margin-top: 5px; }
  .value-section, .capabilities-section, .process-section, .faq-section { padding-block: 65px; padding-bottom:100px;}
  .ecosystem-section, .difference-section, .contact-section { padding-block: 95px; }
  .value-grid { margin-top: 52px; }
  .value-card { min-height: 350px; }
  .capability-panels { grid-template-columns: 1fr; }
  .capability-panel:nth-child(n) { border:21px solid var(--linestrong); --start-x: 0px; --start-y: 34px; }
  .capability-panel:nth-child(n+2) { border-top: 0; }
  .capability-panel:nth-child(even) { --start-x: 18px; }
  .capability-panel:nth-child(odd) { --start-x: -18px; }
  .panel-top { padding-inline: 58px; }
  .difference-grid, .contact-grid, .faq-section, .footer-top { grid-template-columns: 1fr; }
  .difference-grid, .contact-grid, .faq-section, .footer-top { gap: 55px; }
  .process-list { grid-template-columns: 1fr 1fr; gap: 45px 0; }
  .process-list::before { display: none; }

  /* From 800px downward, place each title directly to the right of its orange point. */
  .process-list li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    grid-template-areas:
      "dot title"
      ". description";
    column-gap: 14px;
    align-items: center;
  }

  .process-dot {
    grid-area: dot;
    margin: 0;
    align-self: center;
  }

  .process-list h3 {
    grid-area: title;
    margin: 0;
    align-self: center;
  }

  .process-list p {
    grid-area: description;
    margin-top: 10px;
  }
  .ecosystem-map { height: 620px; }
  .map-lines { display: none; }
  .map-school { left: calc(50% - 100px); top: 35px; width: 200px; }
  .layer-stack { left: calc(50% - 79px); top: 197px; }
  .map-hub { left: calc(50% - 58px); top: 340px; }
  .family-cluster { right: calc(50% - 85px); top: 465px; height: 110px; width: 170px; }
  .family-avatar { width: 64px; }
  .family-avatar img { width: 39px; }
  .avatar-one { left: 0; top: 18px; }
  .avatar-two { left: 53px; top: 0; }
  .avatar-three { left: 106px; top: 18px; }
  .signal-dot { display: none; }
  .boundary-note { align-items: flex-start; }

  .ecosystem-map.eco-architecture {
    --eco-tablet-center-x: 49%;
    --eco-tablet-center-y: 10%;
  }

  .eco-school-node,
  .eco-layer-ring {
    left: var(--eco-tablet-center-x) !important;
    top: var(--eco-tablet-center-y) !important;
  }

  .eco-family-node {
    top: 85% !important;
    left: 49% !important;
  }

  .eco-layer-ring-1 { width: 250px !important; }
  .eco-layer-ring-2 { width: 400px !important; }
  .eco-layer-ring-3 { width: 600px !important; }
  .eco-layer-ring-4 { width: 800px !important; }
  .eco-layer-ring-5 { width: 1250px !important; }

  .eco-layer-card-1 {
    top: 6% !important;
    left: 26% !important;
  }

  .eco-layer-card-2 {
    top: 27% !important;
    left: 28% !important;
  }

  .eco-layer-card-3 {
    top: 35% !important;
    left: 80% !important;
  }

  .eco-layer-card-4 {
    top: 53% !important;
    left: 23% !important;
  }

  .eco-layer-card-5 {
    top: 83% !important;
    left: 77% !important;
  }

  .eco-plug {
    width: 120px !important;
  }
}

@media (max-width: 560px) {
  .header-actions { gap: 8px; }
  .header-actions .button-small { display: none; }
  .site-header {
    left: 0 !important;
    right: 0 !important;
    margin-inline: auto !important;
    transform: none !important;

    width: min(250px, calc(100vw - 40px));
  }
  .mobile-nav a { padding: 0px 0;; font-size: 16px; font-weight: 600; margin: 12px}
  .mobile-nav .button-small {
    display: inline-flex;
  }
  .brand-word { height: 18px; }
  .hero { padding-top: 112px; }
  .eyebrow { margin-bottom: 16px; }
  .hero h1 {
    font-size: clamp(2.5rem, 12.5vw, 3.8rem);
  }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-proof span { font-size: 11px; }
  .hero-visual { min-height: 350px; margin-top: 0px;}
  .value-chip { min-width: 125px; padding: 8px 10px; font-size: 11px; }
  .chip-power { top: 102px; }
  .chip-adapt { top: 85px; }
  .chip-connect { bottom: 64px; }
  .chip-value { bottom: 44px; }
  .nx-core { width: 52px; left: calc(50% - 26px); }
  .hero-visual {
    transform: translateY(5%) !important;
  }
  .section-intro h2, .difference-copy h2, .contact-copy h2 { font-size: clamp(2.45rem, 12vw, 3.5rem); }
  .section-intro > p:last-child, .difference-copy > p, .contact-copy > p { font-size: 16px; }
  .value-grid { grid-template-columns: 1fr; }
  .value-card { min-height: 330px; }
  .capability-panel { min-height: auto; padding: 27px 24px 30px; }
  .panel-top h3 { font-size: 27px; }
  .capability-panel ul { grid-template-columns: 1fr; }
  .process-list { grid-template-columns: 1fr; }
  .process-list li { padding-right: 0; }
  .form-card { padding: 25px 20px; }
  .form-heading { display: block; }
  .form-status { display: block; margin-top: 10px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: 1fr 1fr; gap: 35px; }
  .footer-bottom { display: grid; gap: 8px; }

  .eco-school-node, .eco-family-node, .eco-hub-core{
    scale: 0.7 !important;
  }

  .ecosystem-map.eco-architecture {
  --eco-school-x: 45%;
  --eco-school-y: 7%;

  --eco-layers-x: 50%;
  --eco-layers-y: 10%;
  }

  .eco-school-node {
    left: var(--eco-school-x) !important;
    top: var(--eco-school-y) !important;
  }

  .eco-layer-ring {
    left: var(--eco-layers-x) !important;
    top: var(--eco-layers-y) !important;
  }

  .eco-family-node {
    top: 85% !important;
    left: 45% !important;
  }

  .eco-layer-ring-1 { width: 200px !important; }
  .eco-layer-ring-2 { width: 350px !important; }
  .eco-layer-ring-3 { width: 500px !important; }
  .eco-layer-ring-4 { width: 700px !important; }
  .eco-layer-ring-5 { width: 1100px !important; }

  .eco-layer-card-1 {
    top: 6% !important;
    left: 18% !important;
  }

  .eco-layer-card-2 {
    top: 27% !important;
    left: 18% !important;
  }

  .eco-layer-card-3 {
    top: 40% !important;
    left: 75% !important;
  }

  .eco-layer-card-4 {
    top: 55% !important;
    left: 15% !important;
  }

  .eco-layer-card-5 {
    top: 84% !important;
    left: 80% !important;
  }

  .eco-plug {
    width: 120px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .scroll-flip-card {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}


/* Move “Descubrir el ecosistema” below the hero visual on small phones. */
.ecosystem-link-mobile {
  display: none !important;
}

@media (max-width: 480px) {

  .hero-grid {
    row-gap: 0;
  }

  .hero-visual {
    min-height: 260px;
  }

  .ecosystem-link-desktop {
    display: none !important;
  }

  .ecosystem-link-mobile {
    display: inline-flex !important;
    grid-column: 1 / -1;
    justify-self: center;
    align-items: center;
    width: max-content;
    position: relative;
    z-index: 5;

    margin-top: 0;
    margin-bottom: 0;
  }

  .hero {
    padding-bottom: 20px;
  }

  .value-chip{
    scale: 0.8;
  }

  .site-header{
    scale: 1;
  }

  .value-section, .capabilities-section, .process-section, .faq-section { padding-block: 65px; padding-bottom: 100px;}

  .eco-layer-card-1 {
    scale: 0.7 !important;
    top: 6% !important;
    left: 13% !important;
  }

  .eco-layer-card-2 {
    scale: 0.7 !important;
    top: 28% !important;
    left: 15% !important;
  }

  .eco-layer-card-3 {
    scale: 0.7 !important;
  }

  .eco-layer-card-4 {
    scale: 0.7 !important;
  }

  .eco-layer-card-5 {
    scale: 0.7 !important;
    top: 84% !important;
    left: 78% !important;
  }

  .eco-plug {
    width: 100px !important;
  }

  .eco-orbit-1 {
    inset: 14% !important;
  }

  .eco-orbit-2 {
    inset: 8% !important;
  }
}

@media (max-width: 500px) {
  /* Dedicated portrait artwork: no desktop-style crop or oversizing on phones. */
  .edu-hero-picture {
    inset: 0;
  }
  .edu-hero-image {
    inset: 0;
    left: 0;
    top: 0;
    bottom: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transform: translate3d(var(--hero-image-x), var(--hero-image-y), 0) scale(1.012) !important;
    transform-origin: 50% 58%;
  }
}
@media (max-width: 400px) {
  .hero-visual {
    transform: translateY(-2%) !important;
  }
  .ecosystem-link-mobile {
    margin-top: -20px;
  }

  .eco-school-node, .eco-family-node, .eco-hub-core{
    scale: 0.6 !important;
  }

  .ecosystem-map.eco-architecture {
  --eco-school-x: 41%;
  --eco-school-y: 4%;

  --eco-layers-x: 50%;
  --eco-layers-y: 8%;
  }

  .eco-school-node {
    left: var(--eco-school-x) !important;
    top: var(--eco-school-y) !important;
  }

  .eco-layer-ring {
    left: var(--eco-layers-x) !important;
    top: var(--eco-layers-y) !important;
  }

  .eco-family-node {
    top: 86% !important;
    left: 40% !important;
  }
  
  .eco-layer-card-1 {
    scale: 0.6 !important;
    top: 6% !important;
    left: 7% !important;
  }

  .eco-layer-card-2 {
    scale: 0.6 !important;
    top: 28% !important;
    left: 15% !important;
  }

  .eco-layer-card-3 {
    scale: 0.6 !important;
    top: 40% !important;
    left: 68% !important;
  }

  .eco-layer-card-4 {
    scale: 0.6 !important;
    top: 54% !important;
    left: 8% !important;
  }

  .eco-layer-card-5 {
    scale: 0.6 !important;
    top: 82.5% !important;
    left: 73% !important;
  }

  .eco-plug {
    width: 80px !important;
  }

  .eco-orbit-1 {
    inset: 18% !important;
  }

  .eco-orbit-2 {
    inset: 12% !important;
  }
}

@media (max-width: 330px) {
  .hero-visual {
    transform: translateY(-15%) !important;
  }
  .ecosystem-link-mobile {
    margin-top: -70px;
  }
}

@media (min-width: 801px) and (max-width: 900px) {
  .hero-grid {
    position: relative;
    top: 40px;
  }
}

/* Premium mobile navigation actions */
@media (max-width: 800px) {
  .mobile-nav {
    padding: 12px;
    gap: 10px;
    background:
      linear-gradient(145deg, rgba(20,20,22,.96), rgba(7,7,8,.94));
    border: 1px solid rgba(255,255,255,.13);
    box-shadow:
      0 28px 70px rgba(0,0,0,.52),
      inset 0 1px 0 rgba(255,255,255,.055);
  }

  .mobile-nav a {
    width: 100%;
    min-height: 52px;
    margin: 0 !important;
    padding: 0 14px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-align: left;
    transition:
      transform .2s ease,
      border-color .2s ease,
      background .2s ease,
      box-shadow .2s ease,
      color .2s ease;
  }

  .mobile-nav .mobile-nav-cta {
    border: 1px solid var(--orange);
    background: linear-gradient(135deg, #ff6300, #ff7617);
    color: #080808;
    box-shadow:
      0 12px 28px rgba(255,99,0,.18),
      inset 0 1px 0 rgba(255,255,255,.22);
  }

  .mobile-nav .mobile-nav-cta::after,
  .mobile-nav .mobile-nav-login::after {
    content: "↗";
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
    transition: transform .2s ease, background .2s ease;
  }

  .mobile-nav .mobile-nav-cta::after {
    background: rgba(5,5,5,.12);
    border: 1px solid rgba(5,5,5,.14);
  }

  .mobile-nav .mobile-nav-login {
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    color: #f2f2f2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  }

  .mobile-nav .mobile-nav-login::after {
    color: var(--orange);
    background: rgba(255,99,0,.08);
    border: 1px solid rgba(255,99,0,.18);
  }

  .mobile-nav .mobile-nav-cta:hover,
  .mobile-nav .mobile-nav-login:hover {
    transform: translateY(-1px);
  }

  .mobile-nav .mobile-nav-cta:hover {
    background: linear-gradient(135deg, #ff7114, #ff6300);
    box-shadow: 0 15px 34px rgba(255,99,0,.24);
  }

  .mobile-nav .mobile-nav-login:hover {
    border-color: rgba(255,99,0,.34);
    background: rgba(255,255,255,.07);
  }

  .mobile-nav .mobile-nav-cta:hover::after,
  .mobile-nav .mobile-nav-login:hover::after {
    transform: translate(2px, -2px);
  }
}


/* --------------------------------------------------------------------------
   Premium value proposition cards
   -------------------------------------------------------------------------- */
.value-grid {
  margin-top: 58px;
  gap: 14px;
  border-top: 0;
  border-left: 0;
}

.value-card {
  min-height: 300px;
  padding: 24px 24px 22px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.014) 55%, rgba(255,99,0,.018)),
    #0a0a0b;
  box-shadow:
    0 22px 55px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.045);
  isolation: isolate;
  overflow: hidden;
  transition:
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease,
    transform .28s ease;
}

.value-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  opacity: .72;
}

.value-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 230px;
  height: 230px;
  right: -120px;
  top: -125px;
  bottom: auto;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,99,0,.14), rgba(255,99,0,.035) 38%, transparent 70%);
  filter: blur(2px);
  opacity: .62;
  transition: transform .4s ease, opacity .35s ease;
}

.value-card:hover {
  border-color: rgba(255,99,0,.30);
  background:
    linear-gradient(145deg, rgba(255,255,255,.068), rgba(255,255,255,.018) 52%, rgba(255,99,0,.034)),
    #0a0a0b;
  box-shadow:
    0 28px 68px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,99,0,.025),
    inset 0 1px 0 rgba(255,255,255,.065);
}

.value-card:hover::after {
  transform: scale(1.12);
  opacity: .92;
}

.value-card-featured {
  border-color: rgba(255,99,0,.25);
  background:
    linear-gradient(145deg, rgba(255,99,0,.145), rgba(255,99,0,.036) 48%, rgba(255,255,255,.018)),
    #0a0a0b;
  box-shadow:
    0 24px 62px rgba(0,0,0,.28),
    0 0 38px rgba(255,99,0,.055),
    inset 0 1px 0 rgba(255,255,255,.075);
}

.value-card-featured::before {
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, var(--orange) 45%, rgba(255,99,0,.28) 82%, transparent);
  opacity: .9;
}

.value-card-featured:hover {
  border-color: rgba(255,99,0,.42);
  background:
    linear-gradient(145deg, rgba(255,99,0,.18), rgba(255,99,0,.05) 50%, rgba(255,255,255,.02)),
    #0a0a0b;
}

.card-icon {
  width: 48px;
  height: 48px;
  margin-top: 0;
  margin-bottom: 22px;
  border: 1px solid rgba(255,99,0,.30);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,99,0,.14), rgba(255,99,0,.035));
  color: var(--orange);
  box-shadow:
    0 12px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.075);
}

.value-card-featured .card-icon {
  border-color: rgba(255,99,0,.48);
  background: linear-gradient(145deg, rgba(255,99,0,.26), rgba(255,99,0,.075));
  box-shadow:
    0 10px 28px rgba(255,99,0,.10),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.card-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.65;
}

.value-card h3 {
  margin: 0 0 11px;
  color: #f5f5f2;
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -.04em;
}

.value-card p {
  margin: 0;
  color: #a9a9aa;
  font-size: 14px;
  line-height: 1.62;
}

.card-note {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);

  color: var(--orange);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.card-note::before {
  display: none !important;
  content: none !important;
}

/* Keep the scroll-flip transforms intact while using the new hover finish. */
.scroll-flip-card:hover {
  border-color: rgba(255,99,0,.30);
  box-shadow:
    0 28px 68px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,99,0,.025),
    inset 0 1px 0 rgba(255,255,255,.065);
}

@media (max-width: 800px) {
  .value-grid {
    gap: 12px;
    margin-top: 48px;
  }

  .value-card {
    min-height: 285px;
    padding: 22px 22px 20px;
    border-radius: 20px;
  }

  .card-icon {
    margin-bottom: 19px;
  }
}

@media (max-width: 560px) {
  .value-grid {
    gap: 12px;
  }

  .value-card {
    min-height: 270px;
    padding: 21px 20px 19px;
    border-radius: 18px;
  }

  .card-icon {
    width: 45px;
    height: 45px;
    margin-bottom: 18px;
    border-radius: 13px;
  }

  .card-icon svg {
    width: 21px;
    height: 21px;
  }

  .value-card h3 {
    font-size: 23px;
  }

  .value-card p {
    font-size: 14px;
    line-height: 1.58;
  }

  .card-note {
    padding-top: 16px;
    font-size: 9.5px;
  }
}

/* --------------------------------------------------------------------------
   Ecosistema CE · versión clara inspirada en hub-nx
   -------------------------------------------------------------------------- */
.ecosystem-section {
  background: #f5f4f0;
}

.ecosystem-map.eco-architecture {
  --eco-cycle: 13s;
  position: relative;
  isolation: isolate;
  height: 590px;
  margin-top: 70px;
  overflow: hidden;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 28px;
  background:
    radial-gradient(circle at 69% 50%, rgba(255,99,0,.075), transparent 23%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,247,243,.98));
  box-shadow:
    0 34px 90px rgba(24,20,16,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
  transition: border-color .7s ease, box-shadow .7s ease;
}

.ecosystem-map.eco-architecture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .26;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0,0,0,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.055) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(90deg, #000 0 78%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 78%, transparent 100%);
}

.eco-map-glow {
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 420px;
  left: 53%;
  top: 50%;
  border-radius: 50%;
  background: rgba(255,99,0,.12);
  filter: blur(80px);
  opacity: .52;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition:
    width .75s cubic-bezier(.22,.75,.22,1),
    height .75s cubic-bezier(.22,.75,.22,1),
    left .75s cubic-bezier(.22,.75,.22,1),
    background .75s ease,
    filter .75s ease,
    opacity .75s ease;
}

/* Orange energy wash while the two plugs are connected to the NX hub.
   JS toggles .is-plugged using the actual CSS plug animation timeline. */
.ecosystem-map.eco-architecture::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 67% 50%, rgba(255,99,0,.34) 0%, rgba(255,99,0,.20) 18%, rgba(255,99,0,.085) 40%, transparent 68%),
    radial-gradient(ellipse at 86% 50%, rgba(255,99,0,.16) 0%, rgba(255,99,0,.07) 34%, transparent 66%),
    linear-gradient(90deg, transparent 0%, rgba(255,99,0,.025) 30%, rgba(255,99,0,.105) 63%, rgba(255,99,0,.055) 92%, transparent 100%);
  transition: opacity .7s ease;
}

.ecosystem-map.eco-architecture.is-plugged {
  border-color: rgba(255,99,0,.23);
  box-shadow:
    0 34px 90px rgba(24,20,16,.08),
    0 0 58px rgba(255,99,0,.10),
    inset 0 0 115px rgba(255,99,0,.085),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.ecosystem-map.eco-architecture.is-plugged::after {
  opacity: .92;
}

.ecosystem-map.eco-architecture.is-plugged .eco-map-glow {
  width: 620px;
  height: 500px;
  left: 61%;
  background: rgba(255,99,0,.34);
  filter: blur(92px);
  opacity: .88;
}

.eco-connection-line {
  position: absolute;
  z-index: 2;
  top: 52%;
  left: 9%;
  width: 83%;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}

.eco-line-base,
.eco-line-live {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  border-radius: 999px;
  transform: translateY(-50%);

  /*
   * The visual cable is already drawn inside each plug SVG. Mask the shared
   * connection line while it passes through the complete plug + NX assembly,
   * otherwise a straight line becomes visible in the small space between the
   * prongs and the hub. JS updates these two cut points from the real rendered
   * plug bounds, so the join remains exact while the plugs animate and while
   * the layout changes responsively.
   */
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0,
    #000 var(--eco-line-cut-start, 44%),
    transparent var(--eco-line-cut-start, 44%),
    transparent var(--eco-line-cut-end, 56%),
    #000 var(--eco-line-cut-end, 56%),
    #000 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0,
    #000 var(--eco-line-cut-start, 44%),
    transparent var(--eco-line-cut-start, 44%),
    transparent var(--eco-line-cut-end, 56%),
    #000 var(--eco-line-cut-end, 56%),
    #000 100%
  );
}

.eco-line-base {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(24,24,24,.20) 7%, rgba(24,24,24,.13) 92%, transparent);
}

.eco-line-live {
  height: 3px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--orange) 8%, #ffd8bd 52%, var(--orange) 92%, transparent);
  box-shadow: 0 0 8px rgba(255,99,0,.5), 0 0 26px rgba(255,99,0,.18);
  transform-origin: left center;
  animation: eco-line-live var(--eco-cycle) ease infinite;
}

.eco-signal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  opacity: 0;
  background: #fff;
  border: 1px solid rgba(255,99,0,.7);
  box-shadow: 0 0 6px #fff, 0 0 16px rgba(255,99,0,.9), 0 0 28px rgba(255,99,0,.5);
  animation: eco-signal-flow var(--eco-cycle) linear infinite;
}

.eco-signal-b { animation-delay: .7s; }
.eco-signal-c { animation-delay: 1.4s; }
.eco-signal-d { animation-delay: 2.1s; }

.eco-school-node,
.eco-family-node,
.eco-bridge,
.eco-layers {
  position: absolute;
}

.eco-school-node,
.eco-family-node {
  z-index: 5;
  pointer-events: none;
}

.eco-school-node {
  top: 52%;
  left: 10%;
  display: grid;
  justify-items: center;
  transform: translate(-50%, -50%);
  scale: 0.9;
}

.eco-school-shell,
.eco-family-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: 176px;
  aspect-ratio: 1;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 27%, rgba(255,255,255,.98), transparent 38%),
    rgba(255,255,255,.83);
  box-shadow:
    inset 0 0 34px rgba(255,99,0,.035),
    0 22px 45px rgba(24,20,16,.12),
    0 0 0 9px rgba(255,255,255,.32),
    0 0 52px rgba(255,99,0,.08);
  backdrop-filter: blur(14px);
}

.eco-school-orbit,
.eco-family-orbit {
  position: absolute;
  inset: -11px;
  border: 1px solid rgba(255,99,0,.42);
  border-radius: 50%;
}

.eco-school-orbit {
  border-right-color: transparent;
  border-bottom-color: rgba(17,17,17,.08);
  animation: eco-spin 12s linear infinite reverse;
}

.eco-family-orbit {
  border-top-color: transparent;
  border-left-color: rgba(17,17,17,.08);
  animation: eco-spin 12s linear infinite;
}

.eco-endpoint-halo {
  position: absolute;
  z-index: -1;
  top: 45%;
  left: 50%;
  width: 120%;
  aspect-ratio: 1.7;
  border-radius: 50%;
  background: rgba(255,99,0,.14);
  filter: blur(45px);
  opacity: .35;
  transform: translate(-50%, -50%);
}

.eco-school-icon {
  position: relative;
  z-index: 2;
  width: 82%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-5px);
  filter: drop-shadow(0 8px 14px rgba(255,99,0,.12));
}

.eco-school-fill { fill: rgba(255,99,0,.045); stroke: none; }
.eco-school-primary { stroke-width: 3; }
.eco-school-windows rect { fill: rgba(255,255,255,.7); stroke: rgba(17,17,17,.68); stroke-width: 1.8; }
.eco-school-sign { fill: #fff; stroke: var(--orange); stroke-width: 2; }
.eco-school-word {
  fill: #151515;
  stroke: none;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1px;
  text-anchor: middle;
}
.eco-school-flag,
.eco-school-entrance { stroke: var(--orange); stroke-width: 2.5; }

.eco-endpoint-title {
  position: absolute;
  z-index: 8;
  display: grid;
  gap: 4px;
  width: max-content;
  text-align: center;
}

.eco-endpoint-title small,
.eco-bridge-caption small {
  color: var(--orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

.eco-endpoint-title strong,
.eco-bridge-caption strong {
  color: #151515;
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -.035em;
}

.eco-school-title {
  top: calc(100% + 22px);
  left: 50%;
  transform: translateX(-50%);
}

.eco-layers {
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.eco-layer-ring {
  position: absolute;
  top: 52%;
  left: 11%;
  aspect-ratio: 1;
  border: 2px solid rgba(255,99,0,.21);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  box-shadow: inset 0 0 24px rgba(255,99,0,.018), 0 0 22px rgba(255,99,0,.035);
}

.eco-layer-ring-1 { width: 300px; animation: eco-ring-one var(--eco-cycle) ease infinite; }
.eco-layer-ring-2 { width: 600px; animation: eco-ring-two var(--eco-cycle) ease infinite; }
.eco-layer-ring-3 { width: 900px; animation: eco-ring-three var(--eco-cycle) ease infinite; }
.eco-layer-ring-4 { width: 1300px; animation: eco-ring-four var(--eco-cycle) ease infinite; }
.eco-layer-ring-5 { width: 1800px; animation: eco-ring-five var(--eco-cycle) ease infinite; }

.eco-layer-card {
  position: absolute;
  z-index: 7;
  display: grid;
  grid-template-columns: 38px auto;
  align-items: center;
  gap: 10px;
  min-width: 210px;
  padding: 10px 14px 10px 10px;
  border: 1px solid rgba(17,17,17,.10);
  border-left: 3px solid var(--orange);
  border-radius: 15px;
  background: rgba(255,255,255,.92);
  box-shadow:
    0 16px 38px rgba(34,28,22,.10),
    0 0 0 1px rgba(255,255,255,.75) inset;
  backdrop-filter: blur(12px);
  transform: translate(-50%, -50%);
  scale: 0.8;
}

.eco-layer-card-1 { top: 32%; left: 9.5%; animation: eco-card-one var(--eco-cycle) ease infinite; }
.eco-layer-card-2 { top: 25%; left: 30%; animation: eco-card-two var(--eco-cycle) ease infinite; }
.eco-layer-card-3 { top: 82%; left: 45%; animation: eco-card-three var(--eco-cycle) ease infinite; }
.eco-layer-card-4 { top: 15%; left: 62%; animation: eco-card-four var(--eco-cycle) ease infinite; }
.eco-layer-card-5 { top: 85%; left: 85%; animation: eco-card-five var(--eco-cycle) ease infinite; }

.eco-layer-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,99,0,.24);
  border-radius: 11px;
  color: var(--orange);
  background: rgba(255,99,0,.055);
}

.eco-layer-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eco-layer-card div { display: grid; gap: 2px; }
.eco-layer-card small {
  color: #88847f;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .12em;
}
.eco-layer-card strong {
  color: #171717;
  font-size: 14px;
  font-weight: 720;
  white-space: nowrap;
}

.eco-bridge {
  z-index: 4;
  top: 52%;
  left: 67.5%;
  width: 355px;
  height: 190px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.eco-hub {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 144px;
  aspect-ratio: 1;
  transform: translate(-78%, -50%);
}

.eco-plug {
  position: absolute;
  z-index: 0;
  top: 50%;
  width: 178px;
  filter: drop-shadow(0 12px 14px rgba(35,31,28,.18));
  will-change: transform;
}
.eco-plug svg { display: block; width: 100%; overflow: visible; }
.eco-plug-left { right: 50%; transform: translate(-44%, -50%); animation: eco-plug-left var(--eco-cycle) cubic-bezier(.7,0,.22,1) infinite; }
.eco-plug-right { left: 50%; transform: translate(44%, -50%); animation: eco-plug-right var(--eco-cycle) cubic-bezier(.7,0,.22,1) infinite; }
.eco-plug-cable { fill: none; stroke: rgba(66,66,66,.40); stroke-width: 7; stroke-linecap: round; }
.eco-plug-neck { fill: #e8e7e3; stroke: rgba(17,17,17,.20); }
.eco-plug-body { stroke: rgba(17,17,17,.20); stroke-width: 1.4; }
.eco-plug-ridge { fill: none; stroke: rgba(17,17,17,.12); stroke-width: 2; }
.eco-prong { stroke: rgba(17,17,17,.28); stroke-width: 1; }

.eco-hub-core {
  position: relative;
  z-index: 3;
  width: 82%;
  aspect-ratio: 1;
  padding: 5px;
  overflow: hidden;
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 9px rgba(255,99,0,.055),
    0 0 38px rgba(255,99,0,.20),
    0 18px 32px rgba(44,35,28,.14);
  animation: eco-hub-connect var(--eco-cycle) ease infinite;
  scale: 0.9;
}

.eco-hub-core img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.eco-orbit {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(255,99,0,.40);
  border-radius: 50%;
}
.eco-orbit-1 { inset: 5%; border-right-color: transparent; animation: eco-spin 9s linear infinite; }
.eco-orbit-2 { inset: -3%; border-left-color: transparent; border-top-color: rgba(17,17,17,.10); animation: eco-spin 14s linear infinite reverse; }

.eco-impact {
  position: absolute;
  z-index: 1;
  inset: 22%;
  border: 1px solid rgba(255,99,0,.78);
  border-radius: 50%;
  opacity: 0;
}
.eco-impact-1 { animation: eco-impact var(--eco-cycle) ease-out infinite; }
.eco-impact-2 { animation: eco-impact var(--eco-cycle) ease-out .14s infinite; }

.eco-bridge-caption {
  position: absolute;
  left: 50%;
  top: calc(50% + 91px);
  display: grid;
  place-items: center;
  gap: 3px;
  width: 144px;
  text-align: center;
  /* Match the NX hub's horizontal positioning exactly. */
  transform: translateX(-78%);
}

.eco-family-node {
  top: 52%;
  right: 2.4%;
  display: grid;
  justify-items: center;
  transform: translateY(-50%);
  scale: 0.9;
}

.eco-family-shell {
  width: 176px;
  animation: eco-family-glow var(--eco-cycle) ease infinite;
}

.eco-family-icon {
  display: block;
  width: 68%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  transform: translateY(-2%);
  filter: drop-shadow(0 8px 16px rgba(255,99,0,.16));
}

.eco-family-title {
  top: calc(100% + 22px);
  left: 50%;
  transform: translateX(-50%);
}

@keyframes eco-ring-one {
  0%, 7%, 94%, 100% { border-color: rgba(255,99,0,.21); box-shadow: inset 0 0 24px rgba(255,99,0,.018), 0 0 22px rgba(255,99,0,.035); }
  11%, 86% { border-color: rgba(255,99,0,.68); box-shadow: inset 0 0 30px rgba(255,99,0,.05), 0 0 30px rgba(255,99,0,.09); }
}
@keyframes eco-ring-two {
  0%, 15%, 94%, 100% { border-color: rgba(255,99,0,.21); box-shadow: inset 0 0 24px rgba(255,99,0,.018), 0 0 22px rgba(255,99,0,.035); }
  19%, 86% { border-color: rgba(255,99,0,.68); box-shadow: inset 0 0 30px rgba(255,99,0,.05), 0 0 30px rgba(255,99,0,.09); }
}
@keyframes eco-ring-three {
  0%, 23%, 94%, 100% { border-color: rgba(255,99,0,.21); box-shadow: inset 0 0 24px rgba(255,99,0,.018), 0 0 22px rgba(255,99,0,.035); }
  27%, 86% { border-color: rgba(255,99,0,.68); box-shadow: inset 0 0 30px rgba(255,99,0,.05), 0 0 30px rgba(255,99,0,.09); }
}
@keyframes eco-ring-four {
  0%, 31%, 94%, 100% { border-color: rgba(255,99,0,.21); box-shadow: inset 0 0 24px rgba(255,99,0,.018), 0 0 22px rgba(255,99,0,.035); }
  35%, 86% { border-color: rgba(255,99,0,.68); box-shadow: inset 0 0 30px rgba(255,99,0,.05), 0 0 30px rgba(255,99,0,.09); }
}
@keyframes eco-ring-five {
  0%, 39%, 94%, 100% { border-color: rgba(255,99,0,.21); box-shadow: inset 0 0 24px rgba(255,99,0,.018), 0 0 22px rgba(255,99,0,.035); }
  43%, 86% { border-color: rgba(255,99,0,.68); box-shadow: inset 0 0 30px rgba(255,99,0,.05), 0 0 30px rgba(255,99,0,.09); }
}

@keyframes eco-card-one {
  0%, 7%, 94%, 100% { opacity: .78; border-color: rgba(17,17,17,.10); transform: translate(-50%,-50%) scale(.985); }
  11%, 86% { opacity: 1; border-color: rgba(255,99,0,.35); transform: translate(-50%,-50%) scale(1); }
}
@keyframes eco-card-two {
  0%, 15%, 94%, 100% { opacity: .78; border-color: rgba(17,17,17,.10); transform: translate(-50%,-50%) scale(.985); }
  19%, 86% { opacity: 1; border-color: rgba(255,99,0,.35); transform: translate(-50%,-50%) scale(1); }
}
@keyframes eco-card-three {
  0%, 23%, 94%, 100% { opacity: .78; border-color: rgba(17,17,17,.10); transform: translate(-50%,-50%) scale(.985); }
  27%, 86% { opacity: 1; border-color: rgba(255,99,0,.38); transform: translate(-50%,-50%) scale(1); }
}
@keyframes eco-card-four {
  0%, 31%, 94%, 100% { opacity: .78; border-color: rgba(17,17,17,.10); transform: translate(-50%,-50%) scale(.985); }
  35%, 86% { opacity: 1; border-color: rgba(255,99,0,.42); transform: translate(-50%,-50%) scale(1); }
}
@keyframes eco-card-five {
  0%, 39%, 94%, 100% { opacity: .78; border-color: rgba(17,17,17,.10); transform: translate(-50%,-50%) scale(.985); }
  43%, 86% { opacity: 1; border-color: rgba(255,99,0,.42); transform: translate(-50%,-50%) scale(1); }
}

@keyframes eco-plug-left {
  0%, 31%, 100% { transform: translate(-44%, -50%); }
  41%, 88% { transform: translate(22%, -50%); }
  97% { transform: translate(-44%, -50%); }
}
@keyframes eco-plug-right {
  0%, 31%, 100% { transform: translate(44%, -50%); }
  41%, 88% { transform: translate(-22%, -50%); }
  97% { transform: translate(44%, -50%); }
}
@keyframes eco-line-live {
  0%, 40%, 95%, 100% { opacity: 0; transform: translateY(-50%) scaleX(.02); }
  49%, 88% { opacity: 1; transform: translateY(-50%) scaleX(1); }
}
@keyframes eco-signal-flow {
  0%, 46% { left: 0; opacity: 0; }
  50% { opacity: 1; }
  82% { opacity: 1; }
  89%, 100% { left: 100%; opacity: 0; }
}
@keyframes eco-hub-connect {
  0%, 38%, 90%, 100% { transform: scale(1); box-shadow: 0 0 0 9px rgba(255,99,0,.055), 0 0 38px rgba(255,99,0,.20), 0 18px 32px rgba(44,35,28,.14); }
  42% { transform: scale(1.08); box-shadow: 0 0 0 15px rgba(255,99,0,.10), 0 0 72px rgba(255,99,0,.50), 0 18px 32px rgba(44,35,28,.14); }
  51%, 86% { transform: scale(1.02); box-shadow: 0 0 0 11px rgba(255,99,0,.08), 0 0 58px rgba(255,99,0,.34), 0 18px 32px rgba(44,35,28,.14); }
}
@keyframes eco-impact {
  0%, 40%, 100% { opacity: 0; transform: scale(.55); }
  42% { opacity: .82; }
  53% { opacity: 0; transform: scale(2.55); }
}
@keyframes eco-family-glow {
  0%, 48%, 92%, 100% { box-shadow: inset 0 0 34px rgba(255,99,0,.035), 0 22px 45px rgba(24,20,16,.12), 0 0 0 9px rgba(255,255,255,.32), 0 0 52px rgba(255,99,0,.08); }
  58%, 86% { box-shadow: inset 0 0 36px rgba(255,99,0,.055), 0 22px 45px rgba(24,20,16,.12), 0 0 0 9px rgba(255,99,0,.035), 0 0 72px rgba(255,99,0,.28); }
}
@keyframes eco-spin { to { transform: rotate(360deg); } }

/* ipad air */
@media (max-width: 1200px) and (min-width: 801px) {
  .ecosystem-map.eco-architecture { height: 545px; }
  .eco-school-node, .eco-layer-ring { left: 18%; }
  .eco-school-shell, .eco-family-shell { width: 154px; }
  .eco-layer-ring-1 { width: 210px; }
  .eco-layer-ring-2 { width: 288px; }
  .eco-layer-ring-3 { width: 365px; }
  .eco-layer-ring-4 { width: 445px; }
  .eco-layer-ring-5 { width: 525px; }
  .eco-layer-card { min-width: 180px; grid-template-columns: 34px auto; gap: 8px; padding: 9px 11px 9px 9px; }
  .eco-layer-icon { width: 34px; height: 34px; }
  .eco-layer-card strong { font-size: 12.5px; }
  .eco-layer-card small { font-size: 7.5px; }
  .eco-layer-card-1 { left: 30%; }
  .eco-layer-card-2 { left: 35%; }
  .eco-layer-card-3 { left: 38%; }
  .eco-layer-card-4 { left: 35%; }
  .eco-layer-card-5 { left: 30%; }
  .eco-bridge { left: 66%; width: 310px; }
  .eco-hub { width: 126px; }
  .eco-bridge-caption { width: 126px; }
  .eco-plug { width: 154px; }
  .eco-family-node { right: 1%; }
  .eco-endpoint-title strong, .eco-bridge-caption strong { font-size: 16px; }
}

/* laptop 1024 */
@media (max-width: 1100px) and (min-width: 801px) {

  .eco-school-node,
  .eco-layer-ring {
    left: 10%;
  }

  .eco-layer-card-1 {
    top: 32%;
    left: 8.5%;
  }

  .eco-layer-card-2 {
    top: 25%;
    left: 35%;
  }

  .eco-layer-card-3 {
    top: 82%;
    left: 50%;
  }

  .eco-layer-card-4 {
    top: 15%;
    left: 67%;
  }

  .eco-layer-card-5 {
    top: 85%;
    left: 83%;
  }

  .eco-layer-ring-1 { width: 300px; }
  .eco-layer-ring-2 { width: 608px; }
  .eco-layer-ring-3 { width: 900px; }
  .eco-layer-ring-4 { width: 1200px; }
  .eco-layer-ring-5 { width: 1500px; }

}

@media (max-width: 800px) {
  .ecosystem-map.eco-architecture {
    height: 800px;
    border-radius: 24px;
  }
  .eco-connection-line {
    top: 10%;
    bottom: 10%;
    left: 50%;
    width: 18px;
    height: auto;
    transform: translateX(-50%);
  }
  .eco-line-base,
  .eco-line-live {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0,
      #000 var(--eco-line-cut-start, 44%),
      transparent var(--eco-line-cut-start, 44%),
      transparent var(--eco-line-cut-end, 56%),
      #000 var(--eco-line-cut-end, 56%),
      #000 100%
    );
    mask-image: linear-gradient(
      180deg,
      #000 0,
      #000 var(--eco-line-cut-start, 44%),
      transparent var(--eco-line-cut-start, 44%),
      transparent var(--eco-line-cut-end, 56%),
      #000 var(--eco-line-cut-end, 56%),
      #000 100%
    );
  }
  .eco-line-base { background: linear-gradient(180deg, transparent, rgba(24,24,24,.18) 8%, rgba(24,24,24,.11) 92%, transparent); }
  .eco-line-live {
    width: 3px;
    background: linear-gradient(180deg, transparent, var(--orange) 8%, #ffd8bd 52%, var(--orange) 92%, transparent);
    transform-origin: center top;
    animation: eco-line-live-mobile var(--eco-cycle) ease infinite;
  }
  .eco-signal { left: 50%; top: 0; margin: 0 0 0 -3.5px; animation: eco-signal-flow-mobile var(--eco-cycle) linear infinite; }

  .eco-school-node { top: 16%; left: 50%; }
  .eco-school-shell { width: 142px; }
  .eco-school-title { top: calc(100% + 15px); }

  .eco-layers { inset: 0; }
  .eco-layer-ring { top: 16%; left: 50%; }
  .eco-layer-ring-1 { width: 190px; }
  .eco-layer-ring-2 { width: 250px; }
  .eco-layer-ring-3 { width: 310px; }
  .eco-layer-ring-4 { width: 370px; }
  .eco-layer-ring-5 { width: 430px; }

  .eco-layer-card {
    min-width: 166px;
    grid-template-columns: 30px auto;
    gap: 7px;
    padding: 8px 10px 8px 8px;
    border-radius: 12px;
  }
  .eco-layer-icon { width: 30px; height: 30px; border-radius: 9px; }
  .eco-layer-icon svg { width: 17px; height: 17px; }
  .eco-layer-card strong { font-size: 11.5px; }
  .eco-layer-card small { font-size: 7px; }
  .eco-layer-card-1 { top: 31%; left: 22%; }
  .eco-layer-card-2 { top: 36%; left: 37%; }
  .eco-layer-card-3 { top: 41%; left: 50%; }
  .eco-layer-card-4 { top: 36%; left: 63%; }
  .eco-layer-card-5 { top: 31%; left: 78%; }

  .eco-bridge {
    top: 59%;
    left: 50%;
    width: 280px;
    height: 150px;
  }
  .eco-hub {
    width: 114px;
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .eco-hub-core { transform: rotate(-90deg); }
  .eco-orbit { transform: rotate(-90deg); }
  .eco-bridge-caption {
    left: 50%;
    top: calc(50% + 78px);
    width: 114px;
    transform: translateX(-50%);
  }

  .eco-family-node {
    top: 82%;
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .eco-family-shell { width: 142px; }
  .eco-family-title { top: calc(100% + 15px); }
}

@media (max-width: 560px) {
  .ecosystem-map.eco-architecture { height: 760px; margin-top: 50px; }
  .eco-layer-ring-4, .eco-layer-ring-5 { opacity: .62; }
  .eco-layer-card { min-width: 145px; }
  .eco-layer-card-1 { top: 31%; left: 18%; }
  .eco-layer-card-2 { top: 37%; left: 34%; }
  .eco-layer-card-3 { top: 42%; left: 50%; }
  .eco-layer-card-4 { top: 37%; left: 66%; }
  .eco-layer-card-5 { top: 31%; left: 82%; }
  .eco-layer-card strong { font-size: 10.5px; }
  .eco-layer-card small { display: none; }
  .eco-bridge { top: 60%; }
  .eco-family-node { top: 83%; }
  .eco-endpoint-title strong, .eco-bridge-caption strong { font-size: 15px; }
}

@media (max-width: 430px) {
  .ecosystem-map.eco-architecture { height: 720px; }
  .eco-school-node, .eco-layer-ring { top: 15%; }
  .eco-layer-card { min-width: 126px; grid-template-columns: 27px auto; gap: 5px; padding: 7px 8px 7px 7px; }
  .eco-layer-icon { width: 27px; height: 27px; }
  .eco-layer-card strong { font-size: 9.5px; }
  .eco-layer-card-1 { top: 30%; left: 16%; }
  .eco-layer-card-2 { top: 36%; left: 33%; }
  .eco-layer-card-3 { top: 41%; left: 50%; }
  .eco-layer-card-4 { top: 36%; left: 67%; }
  .eco-layer-card-5 { top: 30%; left: 84%; }
  .eco-bridge { top: 59%; width: 250px; }
  .eco-family-node { top: 82%; }
}

@keyframes eco-line-live-mobile {
  0%, 40%, 95%, 100% { opacity: 0; transform: translateX(-50%) scaleY(.02); }
  49%, 88% { opacity: 1; transform: translateX(-50%) scaleY(1); }
}
@keyframes eco-signal-flow-mobile {
  0%, 46% { top: 0; opacity: 0; }
  50% { opacity: 1; }
  82% { opacity: 1; }
  89%, 100% { top: 100%; opacity: 0; }
}

/* Keep the NX artwork upright when the plug assembly turns vertical on mobile. */
@media (max-width: 800px) {
  .eco-hub-core img { transform: rotate(-90deg); }
}

/* FULL ORANGE CONNECTED STATE */
/* JS adds .is-plugged only while the plugs are physically connected. */
.ecosystem-map.eco-architecture::after {
  background: #ff6300;
  transition: opacity .5s cubic-bezier(.22,.75,.22,1);
}

.ecosystem-map.eco-architecture.is-plugged {
  border-color: rgba(17,17,17,.18);
  box-shadow:
    0 34px 90px rgba(255,99,0,.24),
    0 0 0 1px rgba(17,17,17,.03),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.ecosystem-map.eco-architecture.is-plugged::after {
  opacity: 1;
}

/* The old orange glow is unnecessary once the whole canvas is orange. */
.ecosystem-map.eco-architecture.is-plugged .eco-map-glow {
  opacity: 0;
  width: 420px;
  height: 420px;
  left: 53%;
}

/* Layer circles: turn white so they remain clearly visible on #FF6300. */
.ecosystem-map.eco-architecture.is-plugged .eco-layer-ring {
  border-color: rgba(255,255,255,.64) !important;
  box-shadow:
    inset 0 0 24px rgba(255,255,255,.055),
    0 0 26px rgba(255,255,255,.10) !important;
}

/* Cards keep their original colors in both states.
   No .is-plugged overrides are applied to the cards or their icons. */

/* Labels sit directly on the orange background, therefore black gives the best contrast. */
.ecosystem-map.eco-architecture.is-plugged .eco-endpoint-title small,
.ecosystem-map.eco-architecture.is-plugged .eco-bridge-caption small {
  color: #111;
  text-shadow: 0 1px 0 rgba(255,255,255,.12);
}

/* Endpoint bubbles remain white; their surrounding motion changes to a contrasting treatment. */
.ecosystem-map.eco-architecture.is-plugged .eco-school-shell,
.ecosystem-map.eco-architecture.is-plugged .eco-family-shell {
  border-color: rgba(17,17,17,.16);
  background:
    radial-gradient(circle at 34% 27%, rgba(255,255,255,1), transparent 38%),
    rgba(255,255,255,.96);
}

.ecosystem-map.eco-architecture.is-plugged .eco-school-orbit,
.ecosystem-map.eco-architecture.is-plugged .eco-family-orbit {
  border-color: rgba(255,255,255,.88);
}

.ecosystem-map.eco-architecture.is-plugged .eco-school-orbit {
  border-right-color: transparent;
  border-bottom-color: rgba(17,17,17,.34);
}

.ecosystem-map.eco-architecture.is-plugged .eco-family-orbit {
  border-top-color: transparent;
  border-left-color: rgba(17,17,17,.34);
}

.ecosystem-map.eco-architecture.is-plugged .eco-endpoint-halo {
  background: rgba(255,255,255,.34);
  opacity: .48;
}

/* The live connection was orange on white. On orange it becomes a bright white energy line. */
.ecosystem-map.eco-architecture.is-plugged .eco-line-base {
  background: linear-gradient(90deg, transparent, rgba(17,17,17,.30) 7%, rgba(17,17,17,.24) 92%, transparent);
}

.ecosystem-map.eco-architecture.is-plugged .eco-line-live {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.88) 8%, #fff 52%, rgba(255,255,255,.88) 92%, transparent);
  box-shadow:
    0 0 9px rgba(255,255,255,.90),
    0 0 27px rgba(255,255,255,.42);
}

.ecosystem-map.eco-architecture.is-plugged .eco-signal {
  background: #fff;
  border-color: rgba(17,17,17,.72);
  box-shadow:
    0 0 0 2px rgba(17,17,17,.08),
    0 0 8px #fff,
    0 0 22px rgba(255,255,255,.90);
}

/* Plug cables and NX motion effects need extra contrast on the orange canvas. */
.ecosystem-map.eco-architecture.is-plugged .eco-plug-cable {
  stroke: rgba(17,17,17,.58);
}

.ecosystem-map.eco-architecture.is-plugged .eco-orbit {
  border-color: rgba(255,255,255,.82);
}

.ecosystem-map.eco-architecture.is-plugged .eco-orbit-1 {
  border-right-color: transparent;
}

.ecosystem-map.eco-architecture.is-plugged .eco-orbit-2 {
  border-left-color: transparent;
  border-top-color: rgba(17,17,17,.30);
}

.ecosystem-map.eco-architecture.is-plugged .eco-impact {
  border-color: rgba(255,255,255,.92);
}

.ecosystem-map.eco-architecture.is-plugged .eco-hub-core {
  border-color: rgba(17,17,17,.16);
}

/* Vertical/mobile connection uses the same white live-flow treatment. */
@media (max-width: 800px) {
  .ecosystem-map.eco-architecture.is-plugged .eco-line-base {
    background: linear-gradient(180deg, transparent, rgba(17,17,17,.30) 8%, rgba(17,17,17,.24) 92%, transparent);
  }

  .ecosystem-map.eco-architecture.is-plugged .eco-line-live {
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.88) 8%, #fff 52%, rgba(255,255,255,.88) 92%, transparent);
  }
}

/* --------------------------------------------------------------------------
   Ecosistema CE · impacto naranja desde el NX hub
   The connected background no longer fades in uniformly. It is revealed as a
   circular burst whose origin is calculated by JS from the real NX hub center.
   -------------------------------------------------------------------------- */
.ecosystem-map.eco-architecture {
  --eco-burst-x: 67.5%;
  --eco-burst-y: 52%;
  --eco-burst-radius: 1200px;
}

.ecosystem-map.eco-architecture::after {
  /* Keep the solid brand orange, but reveal it from the connector itself. */
  background: #ff6300;
  opacity: 1;
  clip-path: circle(0px at var(--eco-burst-x) var(--eco-burst-y));
  -webkit-clip-path: circle(0px at var(--eco-burst-x) var(--eco-burst-y));
  transition:
    clip-path 2.2s cubic-bezier(.16, 1, .30, 1),
    -webkit-clip-path 2.2s cubic-bezier(.16, 1, .30, 1);
  will-change: clip-path;
}

.ecosystem-map.eco-architecture.is-plugged::after {
  opacity: 1;
  clip-path: circle(var(--eco-burst-radius) at var(--eco-burst-x) var(--eco-burst-y));
  -webkit-clip-path: circle(var(--eco-burst-radius) at var(--eco-burst-x) var(--eco-burst-y));
}

/* A short white/orange shockwave at the connection point makes the origin of
   the transition obvious before the orange reaches the edges of the map. */
.ecosystem-map.eco-architecture.is-plugged .eco-impact {
  border-color: rgba(255,255,255,.96);
  filter: drop-shadow(0 0 10px rgba(255,255,255,.58));
}

.ecosystem-map.eco-architecture.is-plugged .eco-hub-core {
  border-color: rgba(255,255,255,.70);
}

/* Cards intentionally receive no connected-state override: original colors stay unchanged. */

@media (prefers-reduced-motion: reduce) {
  .ecosystem-map.eco-architecture::after {
    transition: none;
  }
}

/* iPad Air portrait / tablets around 820px */
@media (min-width: 801px) and (max-width: 900px) {

  .eco-layer-ring-1 { width: 250px; }
  .eco-layer-ring-2 { width: 400px; }
  .eco-layer-ring-3 { width: 600px; }
  .eco-layer-ring-4 { width: 820px; }
  .eco-layer-ring-5 { width: 1100px; }

  .eco-layer-card-1 {
    top: 32%;
    left: 8.5%;
  }

  .eco-layer-card-2 {
    top: 20%;
    left: 25%;
  }

  .eco-layer-card-3 {
    top: 82%;
    left: 40%;
  }

  .eco-layer-card-4 {
    top: 28%;
    left: 58%;
  }

  .eco-layer-card-5 {
    top: 85%;
    left: 75%;
  }
}
/* --------------------------------------------------------------------------
   Impact cards · real puzzle-piece edges
   Each card keeps its own silhouette: the connections live on the INNER sides
   of the four-card block, so the pieces visibly interlock when they snap in.
   -------------------------------------------------------------------------- */
.capability-panels {
  --puzzle-size: 62px;
  --puzzle-tab-depth: 41px;
  --puzzle-notch-offset: -21px;
  --puzzle-side-joint-y: 83%;
}

.capability-panel {
  --puzzle-edge: rgba(255,99,0,.38);
  overflow: visible;
}

/* Paint order is intentional: every protruding tab sits above the matching
   indentation of the neighbouring piece once the four cards are assembled. */
.capability-panel:nth-child(1) { z-index: 4; }
.capability-panel:nth-child(2) { z-index: 3; }
.capability-panel:nth-child(3) { z-index: 2; }
.capability-panel:nth-child(4) { z-index: 1; }

.capability-panel > * {
  position: relative;
  z-index: 5;
}

.capability-panel::before,
.capability-panel::after {
  content: "";
  position: absolute;
  width: var(--puzzle-size);
  height: var(--puzzle-size);
  border: 2px solid var(--puzzle-edge);
  border-radius: 50%;
  pointer-events: none;
  transition: border-color .18s ease, box-shadow .2s ease;
}

/* Tabs use the same dark surface as the card. Only the part beyond the join
   edge is painted, which avoids the old circular-symbol look inside the card. */
.capability-panel:nth-child(1)::before,
.capability-panel:nth-child(1)::after,
.capability-panel:nth-child(2)::after,
.capability-panel:nth-child(3)::after {
  z-index: 4;
  background: linear-gradient(145deg, #111113, #080809);
  box-shadow: 9px 0 20px rgba(0,0,0,.16);
}

/* Matching indentations are cut visually with the page background. */
.capability-panel:nth-child(2)::before,
.capability-panel:nth-child(3)::before,
.capability-panel:nth-child(4)::before,
.capability-panel:nth-child(4)::after {
  z-index: 3;
  background: var(--ink);
  box-shadow: inset 0 0 16px rgba(0,0,0,.42);
}

/* TOP LEFT — tab to the right + tab to the bottom. */
.capability-panel:nth-child(1)::before {
  top: var(--puzzle-side-joint-y);
  right: calc(var(--puzzle-tab-depth) * -1);
  transform: translateY(-50%);
  clip-path: inset(-2px -2px -2px 19px);
}
.capability-panel:nth-child(1)::after {
  left: 50%;
  bottom: calc(var(--puzzle-tab-depth) * -1);
  transform: translateX(-50%);
  clip-path: inset(19px -2px -2px -2px);
}

/* TOP RIGHT — indentation on the left + tab to the bottom. */
.capability-panel:nth-child(2)::before {
  top: var(--puzzle-side-joint-y);
  left: var(--puzzle-notch-offset);
  transform: translateY(-50%);
  clip-path: inset(-2px -2px -2px 19px);
}
.capability-panel:nth-child(2)::after {
  left: 50%;
  bottom: calc(var(--puzzle-tab-depth) * -1);
  transform: translateX(-50%);
  clip-path: inset(19px -2px -2px -2px);
}

/* BOTTOM LEFT — indentation on top + tab to the right. */
.capability-panel:nth-child(3)::before {
  left: 50%;
  top: var(--puzzle-notch-offset);
  transform: translateX(-50%);
  clip-path: inset(19px -2px -2px -2px);
}
.capability-panel:nth-child(3)::after {
  top: var(--puzzle-side-joint-y);
  right: calc(var(--puzzle-tab-depth) * -1);
  transform: translateY(-50%);
  clip-path: inset(-2px -2px -2px 19px);
}

/* BOTTOM RIGHT — matching indentations on top and left. */
.capability-panel:nth-child(4)::before {
  left: 50%;
  top: var(--puzzle-notch-offset);
  transform: translateX(-50%);
  clip-path: inset(19px -2px -2px -2px);
}
.capability-panel:nth-child(4)::after {
  top: var(--puzzle-side-joint-y);
  left: var(--puzzle-notch-offset);
  transform: translateY(-50%);
  clip-path: inset(-2px -2px -2px 19px);
}

.capability-panel:hover {
  --puzzle-edge: rgba(255,99,0,.45);
}

.capability-panels.is-assembled .capability-panel {
  --puzzle-edge: var(--linestrong);
}

.capability-panels.is-assembled .capability-panel:nth-child(1)::before,
.capability-panels.is-assembled .capability-panel:nth-child(1)::after,
.capability-panels.is-assembled .capability-panel:nth-child(2)::after,
.capability-panels.is-assembled .capability-panel:nth-child(3)::after {
  box-shadow: 0 0 18px rgba(255,99,0,.10), 9px 0 20px rgba(0,0,0,.14);
}

/* On phones the four cards become one vertical puzzle. Keep the same idea,
   but move every connector to the vertical joins so nothing sticks sideways. */
@media (max-width: 800px) {
  .capability-panels {
    --puzzle-size: 54px;
    --puzzle-tab-depth: 36px;
    --puzzle-notch-offset: -18px;
  }

  .capability-panel:nth-child(1) { z-index: 4; }
  .capability-panel:nth-child(2) { z-index: 3; }
  .capability-panel:nth-child(3) { z-index: 2; }
  .capability-panel:nth-child(4) { z-index: 1; }

  /* Reset all desktop connector placement first. */
  .capability-panel:nth-child(n)::before,
  .capability-panel:nth-child(n)::after {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    clip-path: none;
    box-shadow: none;
  }

  /* Piece 1: bottom tab only. */
  .capability-panel:nth-child(1)::before { display: none; }
  .capability-panel:nth-child(1)::after {
    display: block;
    left: 50%;
    bottom: calc(var(--puzzle-tab-depth) * -1);
    transform: translateX(-50%);
    clip-path: inset(17px -2px -2px -2px);
    background: linear-gradient(145deg, #111113, #080809);
  }

  /* Pieces 2 and 3: top indentation + bottom tab. */
  .capability-panel:nth-child(2)::before,
  .capability-panel:nth-child(3)::before {
    display: block;
    left: 50%;
    top: var(--puzzle-notch-offset);
    transform: translateX(-50%);
    clip-path: inset(17px -2px -2px -2px);
    background: var(--ink);
  }
  .capability-panel:nth-child(2)::after,
  .capability-panel:nth-child(3)::after {
    display: block;
    left: 50%;
    bottom: calc(var(--puzzle-tab-depth) * -1);
    transform: translateX(-50%);
    clip-path: inset(17px -2px -2px -2px);
    background: linear-gradient(145deg, #111113, #080809);
  }

  /* Piece 4: top indentation only. */
  .capability-panel:nth-child(4)::before {
    display: block;
    left: 50%;
    top: var(--puzzle-notch-offset);
    transform: translateX(-50%);
    clip-path: inset(17px -2px -2px -2px);
    background: var(--ink);
  }
  .capability-panel:nth-child(4)::after { display: none; }
}


/* --------------------------------------------------------------------------
   Capability puzzle cards · stronger 3D relief, original colours preserved
   -------------------------------------------------------------------------- */
.capability-panels {
  --puzzle-size: 160px;
  --puzzle-tab-depth: 105px;
  --puzzle-notch-offset: -22px;
}

.capability-panel {
  /* Keep the original card colour exactly as defined above. */
  border-radius: 20px;
  box-shadow:
    0 26px 54px rgba(0,0,0,.42),
    0 8px 18px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -2px 0 rgba(0,0,0,.32),
    inset 10px 0 18px rgba(255,255,255,.012),
    inset -12px -12px 24px rgba(0,0,0,.20);
}

.capability-panel:hover {
  box-shadow:
    0 30px 62px rgba(0,0,0,.48),
    0 10px 22px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,99,0,.08),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -2px 0 rgba(0,0,0,.34),
    inset 10px 0 18px rgba(255,255,255,.012),
    inset -12px -12px 24px rgba(0,0,0,.22);
}

.capability-panel::before,
.capability-panel::after {
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.22));
}

/* Protruding tabs keep the exact same original card surface. */
.capability-panel:nth-child(1)::before,
.capability-panel:nth-child(1)::after,
.capability-panel:nth-child(2)::after,
.capability-panel:nth-child(3)::after {
  background: linear-gradient(145deg, #111113, #080809);
  box-shadow:
    10px 12px 22px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset -6px -8px 14px rgba(0,0,0,.18);
}

/* Indentations keep the original page colour and gain only inset depth. */
.capability-panel:nth-child(2)::before,
.capability-panel:nth-child(3)::before,
.capability-panel:nth-child(4)::before,
.capability-panel:nth-child(4)::after {
  background: var(--ink);
  box-shadow:
    inset 9px 10px 18px rgba(0,0,0,.48),
    inset -1px -1px 0 rgba(255,255,255,.018);
}

.panel-icon {
  /* No background or colour change; only physical depth. */
  box-shadow:
    0 8px 16px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(0,0,0,.26);
}

.capability-panels.is-assembled .capability-panel {
  box-shadow:
    0 28px 60px rgba(0,0,0,.46),
    0 10px 22px rgba(0,0,0,.28),
    0 0 22px rgba(255,99,0,.07),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -2px 0 rgba(0,0,0,.32),
    inset 10px 0 18px rgba(255,255,255,.012),
    inset -12px -12px 24px rgba(0,0,0,.20);
}

.capability-panels.is-assembled .capability-panel:nth-child(1)::before,
.capability-panels.is-assembled .capability-panel:nth-child(1)::after,
.capability-panels.is-assembled .capability-panel:nth-child(2)::after,
.capability-panels.is-assembled .capability-panel:nth-child(3)::after {
  box-shadow:
    0 0 16px rgba(255,99,0,.07),
    10px 12px 22px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset -6px -8px 14px rgba(0,0,0,.18);
}

@media (max-width: 800px) {
  .capability-panels {
    --puzzle-size: 58px;
    --puzzle-tab-depth: 38px;
    --puzzle-notch-offset: -19px;
  }

  .capability-panel {
    border-radius: 18px;
  }
}

/* --------------------------------------------------------------------------
   Puzzle joint cleanup · one contour per assembled connection
   -------------------------------------------------------------------------- */
.capability-panels {
  /* Keep tab + receiving notch on the exact same geometric centre. */
  --puzzle-notch-offset: -23px;
}

/* Once assembled, the protruding piece owns the visible shared contour.
   The receiving indentation remains as the physical cut/depth, but its
   duplicate border is hidden so the join never renders as two orange arcs. */
.capability-panels.is-assembled .capability-panel:nth-child(2)::before,
.capability-panels.is-assembled .capability-panel:nth-child(3)::before,
.capability-panels.is-assembled .capability-panel:nth-child(4)::before,
.capability-panels.is-assembled .capability-panel:nth-child(4)::after {
  border-color: transparent;
}

@media (max-width: 800px) {
  .capability-panels {
    --puzzle-notch-offset: -20px;
  }
}


/* --------------------------------------------------------------------------
   Impact puzzle · repeatable orange join flash
   The JS removes .is-assembled after the block leaves the viewport, so these
   animations restart every time the user comes back through this section.
   -------------------------------------------------------------------------- */
.capability-panels.is-assembled {
  animation: capability-join-impact 2.35s cubic-bezier(.18,.82,.22,1) .18s both;
}

.capability-panels.is-assembled::before {
  animation: puzzle-center-impact 1.5s cubic-bezier(.16,.86,.2,1) .12s both;
}

.capability-panels.is-assembled .capability-panel {
  animation:
    puzzle-piece-snap .42s cubic-bezier(.12,1.08,.28,1) both,
    capability-piece-flare 2.35s cubic-bezier(.18,.82,.22,1) .22s both;
}


@keyframes capability-join-impact {
  0%, 16% {
    filter: drop-shadow(0 0 0 rgba(255,99,0,0));
  }
  32% {
    filter:
      drop-shadow(0 0 20px rgba(255,99,0,.92))
      drop-shadow(0 0 62px rgba(255,99,0,.56));
  }
  55% {
    filter:
      drop-shadow(0 0 18px rgba(255,99,0,.76))
      drop-shadow(0 0 52px rgba(255,99,0,.40));
  }
  76% {
    filter:
      drop-shadow(0 0 10px rgba(255,99,0,.38))
      drop-shadow(0 0 30px rgba(255,99,0,.16));
  }
  100% {
    filter: drop-shadow(0 0 0 rgba(255,99,0,0));
  }
}

@keyframes puzzle-center-impact {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.30);
    filter: blur(58px);
  }
  27% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(.86);
    filter: blur(44px);
  }
  48% {
    opacity: .98;
    transform: translate(-50%, -50%) scale(1.18);
    filter: blur(58px);
  }
  68% {
    opacity: .82;
    transform: translate(-50%, -50%) scale(1.12);
    filter: blur(64px);
  }
  84% {
    opacity: .46;
    transform: translate(-50%, -50%) scale(1.05);
    filter: blur(68px);
  }
  100% {
    opacity: .18;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(70px);
  }
}

@keyframes capability-piece-flare {
  0%, 17% {
    border-color: rgba(255,99,0,.38);
  }
  33% {
    border-color: rgba(255,126,48,.96);
    box-shadow:
      0 28px 60px rgba(0,0,0,.46),
      0 10px 22px rgba(0,0,0,.28),
      0 0 18px rgba(255,99,0,.76),
      0 0 42px rgba(255,99,0,.34),
      inset 0 0 24px rgba(255,99,0,.10),
      inset 0 1px 0 rgba(255,255,255,.045),
      inset 0 -2px 0 rgba(0,0,0,.32);
  }
  61% {
    border-color: rgba(255,116,28,.78);
    box-shadow:
      0 28px 60px rgba(0,0,0,.46),
      0 10px 22px rgba(0,0,0,.28),
      0 0 15px rgba(255,99,0,.52),
      0 0 34px rgba(255,99,0,.22),
      inset 0 0 20px rgba(255,99,0,.075),
      inset 0 1px 0 rgba(255,255,255,.045),
      inset 0 -2px 0 rgba(0,0,0,.32);
  }
  82% {
    border-color: rgba(255,99,0,.52);
  }
  100% {
    border-color: rgba(255,99,0,.38);
    box-shadow:
      0 28px 60px rgba(0,0,0,.46),
      0 10px 22px rgba(0,0,0,.28),
      0 0 22px rgba(255,99,0,.07),
      inset 0 1px 0 rgba(255,255,255,.045),
      inset 0 -2px 0 rgba(0,0,0,.32),
      inset 10px 0 18px rgba(255,255,255,.012),
      inset -12px -12px 24px rgba(0,0,0,.20);
  }
}

@media (prefers-reduced-motion: reduce) {
  .capability-panels.is-assembled,
  .capability-panels.is-assembled::before,
  .capability-panels.is-assembled .capability-panel {
    animation: none !important;
  }
}


/* --------------------------------------------------------------------------
   Smooth single-impact glow override
   Replaces the stepped feeling with one continuous burst and decay.
   -------------------------------------------------------------------------- */
.capability-panels.is-assembled {
  animation: none;
}

.capability-panels.is-assembled::before {
  animation: puzzle-center-smooth-glow 3s cubic-bezier(.22,.61,.36,1) .04s both;
}

.capability-panels.is-assembled .capability-panel {
  animation:
    puzzle-piece-snap .42s cubic-bezier(.12,1.08,.28,1) both,
    capability-piece-smooth-flare 3s cubic-bezier(.22,.61,.36,1) .05s both;
}

@keyframes puzzle-center-smooth-glow {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.58);
    filter: blur(28px);
  }

  18% {
    opacity: .98;
    transform: translate(-50%, -50%) scale(.98);
    filter: blur(32px);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.20);
    filter: blur(66px);
  }
}

@keyframes capability-piece-smooth-flare {
  0% {
    border-color: rgba(255,99,0,.38);
    box-shadow:
      0 28px 60px rgba(0,0,0,.46),
      0 10px 22px rgba(0,0,0,.28),
      0 0 0 rgba(255,99,0,0),
      0 0 0 rgba(255,99,0,0),
      inset 0 0 22px rgba(255,99,0,.035),
      inset 0 1px 0 rgba(255,255,255,.045),
      inset 0 -2px 0 rgba(0,0,0,.32);
  }

  18% {
    border-color: rgba(255,126,48,.95);
    box-shadow:
      0 28px 60px rgba(0,0,0,.46),
      0 10px 22px rgba(0,0,0,.28),
      0 0 24px rgba(255,99,0,.95),
      0 0 55px rgba(255,99,0,.48),
      inset 0 0 22px rgba(255,99,0,.10),
      inset 0 1px 0 rgba(255,255,255,.045),
      inset 0 -2px 0 rgba(0,0,0,.32);
  }

  100% {
    border-color: var(--linestrong);
    box-shadow:
      0 28px 60px rgba(0,0,0,.46),
      0 10px 22px rgba(0,0,0,.28),
      0 0 0 rgba(255,99,0,0),
      0 0 0 rgba(255,99,0,0),
      inset 0 0 22px rgba(255,99,0,.035),
      inset 0 1px 0 rgba(255,255,255,.045),
      inset 0 -2px 0 rgba(0,0,0,.32);
  }
}

/* Ecosystem performance: keep every infinite animation asleep until the map is
   close to the viewport. JS adds .is-eco-active shortly before it is visible. */
.ecosystem-map.eco-architecture:not(.is-eco-active),
.ecosystem-map.eco-architecture:not(.is-eco-active)::before,
.ecosystem-map.eco-architecture:not(.is-eco-active)::after,
.ecosystem-map.eco-architecture:not(.is-eco-active) *,
.ecosystem-map.eco-architecture:not(.is-eco-active) *::before,
.ecosystem-map.eco-architecture:not(.is-eco-active) *::after {
  animation-play-state: paused !important;
}

/* --------------------------------------------------------------------------
   Capability cards · classic jigsaw connectors
   Replaces the old circular pseudo-element joints with a true jigsaw profile:
   narrow neck + rounded head, while preserving every existing joint position.
   -------------------------------------------------------------------------- */

/* The old encajes were drawn with ::before/::after circles. They are disabled
   here; the inline SVG connectors below own the complete visible silhouette. */
.capability-panel::before,
.capability-panel::after {
  content: none !important;
  display: none !important;
}

.capability-panel > .puzzle-joint {
  --joint-surface: #0c0c0e;
  position: absolute;
  z-index: 4;
  width: var(--puzzle-size);
  height: var(--puzzle-size);
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.20));
}

.puzzle-joint-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.puzzle-joint-fill {
  fill: var(--joint-surface);
}

.puzzle-joint-outline {
  fill: none;
  stroke: var(--puzzle-edge);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke .18s ease, filter .2s ease;
}

/* Tabs are card material; notches are the page material painted over the card. */
.puzzle-joint-tab {
  --joint-surface: #0c0c0e;
}

.puzzle-joint-notch {
  --joint-surface: var(--ink);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.12));
}

/* Preserve the exact connector centres/depths from the previous version.
   The SVG's root is x=23 in a 66px box, matching --puzzle-notch-offset:-23px
   and --puzzle-tab-depth:43px. */
.puzzle-joint-right,
.puzzle-joint-left {
  top: var(--puzzle-side-joint-y);
  transform: translateY(-50%);
}

.puzzle-joint-right {
  right: calc(var(--puzzle-tab-depth) * -1);
}

.puzzle-joint-left {
  left: var(--puzzle-notch-offset);
}

.puzzle-joint-bottom,
.puzzle-joint-top {
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
}

.puzzle-joint-bottom {
  bottom: calc(var(--puzzle-tab-depth) * -1);
}

.puzzle-joint-top {
  top: var(--puzzle-notch-offset);
}

/* When pieces are assembled, the protruding piece owns the shared contour.
   This keeps one clean orange line instead of two overlapping strokes. */
.capability-panels.is-assembled .puzzle-joint-notch .puzzle-joint-outline {
  stroke: transparent;
}

.capability-panels.is-assembled .puzzle-joint-tab .puzzle-joint-outline {
  /* No persistent halo: the visible encaje follows the exact card-border burst. */
  filter: none;
}

/* Mobile keeps the existing vertical-only puzzle arrangement. */
@media (max-width: 800px) {
  .capability-panel > .puzzle-joint {
    display: none;
  }

  .capability-panel:nth-child(1) > .puzzle-joint-bottom,
  .capability-panel:nth-child(2) > .puzzle-joint-top,
  .capability-panel:nth-child(2) > .puzzle-joint-bottom,
  .capability-panel:nth-child(3) > .puzzle-joint-top,
  .capability-panel:nth-child(3) > .puzzle-joint-right,
  .capability-panel:nth-child(4) > .puzzle-joint-top {
    display: block;
  }

  /* On mobile card 3's second connector becomes its bottom tab, preserving
     the previous 1 → 2 → 3 → 4 vertical puzzle chain. */
  .capability-panel:nth-child(3) > .puzzle-joint-right {
    top: auto;
    right: auto;
    left: calc(50% + 250px);
    bottom: calc(var(--puzzle-tab-depth) * -1);
    transform: translateX(-50%) rotate(90deg);
  }
}


/* Move ONLY the two horizontal middle joints to the right */
.capability-panel:nth-child(1) > .puzzle-joint-bottom,
.capability-panel:nth-child(2) > .puzzle-joint-bottom,
.capability-panel:nth-child(3) > .puzzle-joint-top,
.capability-panel:nth-child(4) > .puzzle-joint-top {
  left: calc(50% + 150px);
}
/* --------------------------------------------------------------------------
   Capability puzzle · glow only on the VISIBLE jigsaw contour
   Important: do not glow the whole .puzzle-joint wrapper/fill. The SVG fill
   contains the hidden rectangular neck that sits behind the card, so glowing
   that element creates an ugly rectangular halo. Only the exposed outline
   path receives the burst below.
   -------------------------------------------------------------------------- */
.capability-panels.is-assembled .puzzle-joint-tab {
  /* Keep only the normal depth shadow on the connector surface. */
  animation: none;
}

.capability-panels.is-assembled .puzzle-joint-tab .puzzle-joint-outline {
  animation: puzzle-joint-visible-outline-glow 3s cubic-bezier(.22,.61,.36,1) .05s both;
}

@keyframes puzzle-joint-visible-outline-glow {
  0% {
    /* Same resting line colour as the card border. */
    stroke: rgba(255,99,0,.38);
    filter: drop-shadow(0 0 0 rgba(255,99,0,0));
  }

  18% {
    /* Exact same peak colour/timing as capability-piece-smooth-flare. */
    stroke: rgba(255,126,48,.95);
    filter:
      drop-shadow(0 0 24px rgba(255,99,0,.95))
      drop-shadow(0 0 55px rgba(255,99,0,.48));
  }

  100% {
    /* Joined state stays on the strong NumbuX orange. */
    stroke: var(--linestrong);
    filter: drop-shadow(0 0 0 rgba(255,99,0,0));
  }
}

@media (prefers-reduced-motion: reduce) {
  .capability-panels.is-assembled .puzzle-joint-tab .puzzle-joint-outline {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Las familias · clean internal top-left corner
   Removes only the residual rounded line/gap at the central join.
   -------------------------------------------------------------------------- */
@media (min-width: 801px) {
  .capability-panel:nth-child(4) {
    border-top-left-radius: 0;
  }
}

/* --------------------------------------------------------------------------
   Capability puzzle · clean central meeting point
   The visible arc beside "Las familias" is produced by the rounded INNER
   corners of the four neighbouring cards. Square only those four internal
   corners; all exterior corners and jigsaw connectors remain unchanged.
   -------------------------------------------------------------------------- */
@media (min-width: 801px) {
  .capability-panel:nth-child(1) {
    border-bottom-right-radius: 0 !important;
  }

  .capability-panel:nth-child(2) {
    border-bottom-left-radius: 0 !important;
  }

  .capability-panel:nth-child(3) {
    border-top-right-radius: 0 !important;
  }

  .capability-panel:nth-child(4) {
    border-top-left-radius: 0 !important;
  }
}

/* Puzzle size for 801px → 1100px */
@media (max-width: 1100px) and (min-width: 801px) {
  .capability-panels {
    --puzzle-size: 120px;
    --puzzle-tab-depth: 80px;
    --puzzle-notch-offset: -17px;
  }
}

/* --------------------------------------------------------------------------
   Capability puzzle · separated / assembled colour states
   Separated = soft orange. Assembled = strong NumbuX orange.
   -------------------------------------------------------------------------- */
.capability-panels:not(.is-assembled) .capability-panel {
  border-color: rgba(255,99,0,.38);
  --puzzle-edge: rgba(255,99,0,.38);
}

.capability-panels.is-assembled .capability-panel {
  --puzzle-edge: var(--linestrong);
}

/* --------------------------------------------------------------------------
   Capability puzzle · smooth reverse movement when leaving the section
   Exit repeats the physical snap movement in reverse, with NO glow/flare.
   The normal .is-assembled entrance animation remains untouched.
   -------------------------------------------------------------------------- */
.capability-panels.is-separating::before {
  animation: none !important;
  opacity: 0 !important;
}

.capability-panels.is-separating .capability-panel {
  animation: puzzle-piece-release .42s cubic-bezier(.12,.75,.18,1) both !important;
}

.capability-panels.is-separating .puzzle-joint-tab,
.capability-panels.is-separating .puzzle-joint-tab .puzzle-joint-outline {
  animation: none !important;
  filter: none !important;
}

@keyframes puzzle-piece-release {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(var(--start-x), var(--start-y), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .capability-panels.is-separating .capability-panel {
    animation: none !important;
    transform: translate3d(var(--start-x), var(--start-y), 0) !important;
  }
}


/* --------------------------------------------------------------------------
   Capability puzzle · exact same surface on cards and protruding joints
   The previous card gradient and flat SVG joint fill could look like two
   different blacks. Both now share one identical surface value.
   Receiving notches remain page-coloured because they represent real cut-outs.
   -------------------------------------------------------------------------- */
.capability-panels {
  --capability-piece-surface: #0c0c0e;
}

.capability-panel {
  background: var(--capability-piece-surface) !important;
}

.capability-panel > .puzzle-joint.puzzle-joint-tab {
  --joint-surface: var(--capability-piece-surface);
}

/* --------------------------------------------------------------------------
   Capability puzzle · hide receiving silhouette while pieces are separated
   Only the protruding tab is visible outside the section. The matching notch
   becomes visible once the four pieces are assembled, where it is needed to
   cut the receiving card and complete the real jigsaw connection.
   -------------------------------------------------------------------------- */
.capability-panels:not(.is-assembled) .puzzle-joint-notch {
  opacity: 0 !important;
  visibility: hidden !important;
}

.capability-panels.is-assembled .puzzle-joint-notch {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   Capability puzzle · scroll performance pass
   Keep the same snap/jigsaw behaviour, but make the impact animation mostly
   compositor-only. Large animated blurs, multi-layer box-shadows and SVG
   drop-shadows were forcing expensive repaints while the user scrolled.
   -------------------------------------------------------------------------- */
.capability-panel {
  will-change: auto;
}

.capability-panels.is-assembled .capability-panel,
.capability-panels.is-separating .capability-panel {
  will-change: transform;
}

/* Rasterise one stable blur, then animate only opacity + transform. */
.capability-panels::before {
  filter: blur(42px) !important;
  will-change: opacity, transform;
}

.capability-panels.is-assembled::before {
  animation: puzzle-center-composited-glow 3s cubic-bezier(.22,.61,.36,1) .04s both !important;
}

@keyframes puzzle-center-composited-glow {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.58);
  }
  18% {
    opacity: .98;
    transform: translate(-50%, -50%) scale(.98);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.20);
  }
}

/* Keep the strong resting 3D shadow, but do not interpolate all of those
   shadows every frame. The flash now comes from border colour + center glow. */
.capability-panels.is-assembled .capability-panel {
  animation:
    puzzle-piece-snap .42s cubic-bezier(.12,1.08,.28,1) both,
    capability-piece-light-flare 3s cubic-bezier(.22,.61,.36,1) .05s both !important;
}

@keyframes capability-piece-light-flare {
  0%   { border-color: rgba(255,99,0,.38); }
  18%  { border-color: rgba(255,126,48,.95); }
  100% { border-color: var(--linestrong); }
}

/* SVG filters are particularly costly while their parent cards are moving.
   Preserve the contour and timing, but animate only its stroke colour. */
.capability-panel > .puzzle-joint,
.capability-panel > .puzzle-joint.puzzle-joint-notch,
.capability-panels.is-assembled .puzzle-joint-tab .puzzle-joint-outline {
  filter: none !important;
}

.capability-panels.is-assembled .puzzle-joint-tab .puzzle-joint-outline {
  animation: puzzle-joint-light-flare 3s cubic-bezier(.22,.61,.36,1) .05s both !important;
}

@keyframes puzzle-joint-light-flare {
  0%   { stroke: rgba(255,99,0,.38); }
  18%  { stroke: rgba(255,126,48,.95); }
  100% { stroke: var(--linestrong); }
}

/* Isolate style/layout calculations without clipping the protruding jigsaw
   pieces (paint containment would clip them, so it is intentionally omitted). */
.capability-panels {
  contain: layout style;
}

@media (prefers-reduced-motion: reduce) {
  .capability-panels::before,
  .capability-panels.is-assembled::before,
  .capability-panels.is-assembled .capability-panel,
  .capability-panels.is-assembled .puzzle-joint-tab .puzzle-joint-outline {
    animation: none !important;
    will-change: auto !important;
  }
}

@media (max-width: 800px) {
  .capability-panels {
    --puzzle-size: 150px;
    --puzzle-tab-depth: 100px;
    --puzzle-notch-offset: -21px;
    --puzzle-side-joint-y: 83%;
  }

  .capability-panel {
    border: 3px solid var(--linestrong) !important;
    --puzzle-edge: var(--linestrong) !important;
  }
}

/* --------------------------------------------------------------------------
   Capability puzzle · <=800px progressive scroll assembly
   The cards now join vertically one by one as their own row reaches the
   viewport. Only transform is updated during scroll, keeping the section light.
   Connector X positions are untouched, so every encaje remains in the exact
   same position on the right.
   -------------------------------------------------------------------------- */
@media (max-width: 800px) {
  .capability-panels.is-mobile-progressive {
    contain: layout style;
  }

  .capability-panels.is-mobile-progressive::before {
    animation: none !important;
    opacity: 0 !important;
  }

  .capability-panels.is-mobile-progressive .capability-panel {
    --start-x: 0px !important;
    --start-y: 0px !important;
    transform: translate3d(0, var(--mobile-join-y, 96px), 0) !important;
    animation: none !important;
    transition: none !important;
    will-change: transform;
  }

  .capability-panels.is-mobile-progressive .capability-panel:first-child {
    transform: translate3d(0, 0, 0) !important;
  }

  /* While a piece is still separated, close its top edge so it reads as an
     independent card. At the exact join point the shared edge opens again. */
  .capability-panels.is-mobile-progressive
    .capability-panel:nth-child(n+2):not(.is-mobile-joined) {
    border-top: 3px solid var(--linestrong) !important;
  }

  .capability-panels.is-mobile-progressive
    .capability-panel:nth-child(n+2).is-mobile-joined {
    border-top: 0 !important;
  }

  /* Keep receiving silhouettes hidden until their own piece has actually
     reached the previous one. This preserves the clean separated state. */
  .capability-panels.is-mobile-progressive
    .capability-panel:not(.is-mobile-joined)
    .puzzle-joint-notch {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .capability-panels.is-mobile-progressive
    .capability-panel.is-mobile-joined
    .puzzle-joint-notch {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* The receiving notch must cut the next card without drawing a second
     orange contour. The protruding tab from the previous card owns the only
     visible joint outline once the two pieces have met. */
  .capability-panels.is-mobile-progressive
    .capability-panel.is-mobile-joined
    .puzzle-joint-notch
    .puzzle-joint-outline {
    stroke: transparent !important;
    animation: none !important;
  }

  /* Only the already joined part of the chain exposes the tab for the next
     piece. This makes the 1 → 2 → 3 → 4 sequence visually unambiguous. */
  .capability-panels.is-mobile-progressive
    .capability-panel:not(.is-mobile-joined)
    > .puzzle-joint-tab {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .capability-panels.is-mobile-progressive
    .capability-panel.is-mobile-joined
    > .puzzle-joint-tab {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* A small edge flash marks each completed connection. No blur/filter is
     animated, so this remains cheap while scrolling. */
  .capability-panels.is-mobile-progressive
    .capability-panel.is-mobile-joined:not(:first-child) {
    animation: mobile-puzzle-edge-join .48s ease-out both !important;
  }

  @keyframes mobile-puzzle-edge-join {
    0%   { border-color: rgba(255,99,0,.58); }
    45%  { border-color: #ff7e30; }
    100% { border-color: var(--linestrong); }
  }
}

@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .capability-panels.is-mobile-progressive .capability-panel {
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Capability puzzle · <=800px identical join behaviour for every pair
   Centro → Profesorado already joins cleanly with only the protruding tab
   visible while the next card approaches. Apply that exact visual behaviour
   to Profesorado → Alumnado and Alumnado → Familias as well: on mobile the
   receiving notch never paints during the scroll movement, so there is no
   second silhouette crossing the tab while the cards come together.
   -------------------------------------------------------------------------- */
@media (max-width: 800px) {
  .capability-panels.is-mobile-progressive .puzzle-joint-notch {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}


@media (max-width: 800px) {

  .capability-panel:nth-child(3) > .puzzle-joint-right {
    top: auto;
    right: auto;
    left: calc(50% + 220px);
    bottom: calc(var(--puzzle-tab-depth) * -1);
    transform: translateX(-50%) rotate(90deg);
  }

  .capability-panel:nth-child(1) > .puzzle-joint-bottom,
  .capability-panel:nth-child(2) > .puzzle-joint-bottom,
  .capability-panel:nth-child(3) > .puzzle-joint-top,
  .capability-panel:nth-child(4) > .puzzle-joint-top {
    left: calc(50% + 180px);
  }

}


@media (max-width: 500px) {

  /* 1. Make all puzzle joints smaller */
  .capability-panels {
    --puzzle-size: 100px;
    --puzzle-tab-depth: 67px;
    --puzzle-notch-offset: -16px;
  }

  /* 2. Move all joints horizontally */
  .capability-panel:nth-child(3) > .puzzle-joint-right {
    left: calc(50% + 140px);
  }

  .capability-panel:nth-child(1) > .puzzle-joint-bottom,
  .capability-panel:nth-child(2) > .puzzle-joint-bottom,
  .capability-panel:nth-child(3) > .puzzle-joint-top,
  .capability-panel:nth-child(4) > .puzzle-joint-top {
    left: calc(50% + 130px);
  }

}

/* Hide puzzle connectors on very small screens. */
@media (max-width: 400px) {
  .capability-panel > .puzzle-joint {
    display: none !important;
  }
}

/* Keep the impact cards perfectly centered on very narrow phones. */
@media (max-width: 350px) {
  .capabilities-section {
    overflow-x: clip;
  }

  .capability-panels {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .capability-panel:nth-child(n) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    --start-x: 0px !important;
  }

  .capability-panels.is-mobile-progressive .capability-panel {
    transform: translate3d(0, var(--mobile-join-y, 96px), 0) !important;
  }

  .capability-panels.is-mobile-progressive .capability-panel:first-child,
  .capability-panels.is-mobile-progressive .capability-panel.is-mobile-joined {
    transform: translate3d(0, 0, 0) !important;
  }
}

@media (max-width: 800px){
  .difference-section { padding-bottom: 50px; padding-top: 0px; }
}

/* <=500px: connect the process points vertically with the same line treatment as desktop. */
@media (max-width: 500px) {
  .process-list::before {
    display: block;
    left: 6px;
    right: auto;
    top: 18px;
    bottom: 0;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--orange), rgba(255,99,0,.16));
    pointer-events: none;
    z-index: 0;
  }

  /* Stop the vertical line exactly at the centre of the final orange point. */
  .process-list li:last-child::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 4px;
    top: 18px;
    bottom: 0;
    width: 5px;
    background: #050505;
    pointer-events: none;
  }

  .process-list li:last-child .process-dot {
    z-index: 2;
  }
}

.contact-section .eyebrow {
  transform: translateY(-70px);
  font-size: 14px;
}

.contact-copy {
  transform: translateY(-70px) !important;
}

@media (max-width: 1100px) {
  .contact-section .eyebrow {
    transform: translateY(-90px);
    font-size: 14px;
  }

  .contact-copy {
    transform: translateY(-120px) !important;
  }
}


@media (max-width: 800px) {
  .contact-section {padding-top: 220px !important; padding-block: 0px;}

  .contact-section .eyebrow {
    transform: translateY(-60px);
  }


  .contact-section .form-card {
    transform: translateY(-120px);
  }
}

@media (max-width: 500px) {
  .contact-section .eyebrow {
    font-size: 11px;
    .contact-section {padding-top: 0px !important;}
  }
}

/* Premium NumbuX page scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 99, 0, .82) #050505;
}

html::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track {
  background: #050505;
}

html::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 2px solid #050505;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--orange-hot), var(--orange));
}

html::-webkit-scrollbar-thumb:hover {
  background: var(--orange-hot);
}

html::-webkit-scrollbar-corner {
  background: #050505;
}


/* Footer social icons — NumbuX style */
.footerSocialIcons {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footerSocialIcons .socialIcon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  border: 1px solid rgba(255, 99, 0, .72);
  border-radius: 50%;
  background: rgba(255, 99, 0, .025);
  color: #f7f7f4;
  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    color .2s ease;
}

.footerSocialIcons .socialIcon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.footerSocialIcons .socialIcon:hover {
  transform: translateY(-2px) scale(1.06);
  border-color: #ff6300;
  background: rgba(255, 99, 0, .10);
  color: #ff6300;
  box-shadow: 0 0 18px rgba(255, 99, 0, .16);
}

.footerSocialIcons .socialIcon:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .footerSocialIcons {
    margin-top: 18px;
    gap: 10px;
  }

  .footerSocialIcons .socialIcon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .footerSocialIcons .socialIcon svg {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 500px) {
  .ecosystem-link-desktop {
    display: none !important;
  }
}

/* Hide both versions of "Descubrir el ecosistema" from 500px downward. */
@media (max-width: 500px) {
  .ecosystem-link-desktop,
  .ecosystem-link-mobile {
    display: none !important;
  }
}


/* --------------------------------------------------------------------------
   Ecosistema · entrada premium en tablet/móvil (<= 800px)
   The map enters as one polished composition, then its main parts appear in
   sequence. Only opacity + compositor-friendly transforms are used so the
   entrance stays smooth on mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 800px) {
  .ecosystem-map.eco-architecture.reveal {
    opacity: 0;
    transform: translate3d(0, 46px, 0) scale(.975);
    transform-origin: 50% 18%;
    transition:
      opacity .72s cubic-bezier(.2,.75,.25,1),
      transform .92s cubic-bezier(.16,1,.3,1);
  }

  .ecosystem-map.eco-architecture.reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  /* Stagger the visual story without interfering with the ecosystem's
     existing plug/ring/card animations. */
  .ecosystem-map.eco-architecture.reveal .eco-school-node,
  .ecosystem-map.eco-architecture.reveal .eco-layers,
  .ecosystem-map.eco-architecture.reveal .eco-connection-line,
  .ecosystem-map.eco-architecture.reveal .eco-bridge,
  .ecosystem-map.eco-architecture.reveal .eco-family-node {
    opacity: 0;
    transition: opacity .62s cubic-bezier(.2,.75,.25,1);
  }

  .ecosystem-map.eco-architecture.reveal.is-visible .eco-school-node {
    opacity: 1;
    transition-delay: .16s;
  }

  .ecosystem-map.eco-architecture.reveal.is-visible .eco-layers {
    opacity: 1;
    transition-delay: .28s;
  }

  .ecosystem-map.eco-architecture.reveal.is-visible .eco-connection-line {
    opacity: 1;
    transition-delay: .40s;
  }

  .ecosystem-map.eco-architecture.reveal.is-visible .eco-bridge {
    opacity: 1;
    transition-delay: .50s;
  }

  .ecosystem-map.eco-architecture.reveal.is-visible .eco-family-node {
    opacity: 1;
    transition-delay: .64s;
  }
}

@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .ecosystem-map.eco-architecture.reveal,
  .ecosystem-map.eco-architecture.reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .ecosystem-map.eco-architecture.reveal .eco-school-node,
  .ecosystem-map.eco-architecture.reveal .eco-layers,
  .ecosystem-map.eco-architecture.reveal .eco-connection-line,
  .ecosystem-map.eco-architecture.reveal .eco-bridge,
  .ecosystem-map.eco-architecture.reveal .eco-family-node {
    opacity: 1 !important;
    transition: none !important;
  }
}


/* ==========================================================================
   2026 HERO — immersive school world, high-key 3D / EventBeds-inspired rhythm
   ========================================================================== */
.edu-hero {
  --hero-ink: #070707;
  --hero-soft-ink: #4d4d4d;
  position: relative;
  min-height: clamp(860px, 55vw, 1040px);
  padding: 0 !important;
  overflow: hidden;
  isolation: isolate;
  color: var(--hero-ink);
  background: #f8f9fa;
  border-bottom: 0;
}
.edu-hero::before,
.edu-hero::after { display: none !important; }
.edu-hero-scene {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 10%, #fff, #f7f9fb 50%, #eef1f4 100%);
}
.edu-hero-picture {
  position: absolute;
  inset: 0;
  display: block;
}
.edu-hero-image {
  --hero-image-x: 0px;
  --hero-image-y: 0px;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: translate3d(var(--hero-image-x), var(--hero-image-y), 0) scale(1.025);
  transform-origin: 50% 62%;
  filter: saturate(.94) contrast(1.015);
  will-change: transform;
  animation: edu-hero-arrive 1.7s cubic-bezier(.18,.75,.18,1) both;
}
.edu-hero-atmosphere {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.18) 22%, transparent 45%),
    radial-gradient(ellipse at 50% 16%, rgba(255,255,255,.86) 0%, rgba(255,255,255,0) 50%);
}
.edu-hero-bottom-fade {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5,5,5,0), rgba(5,5,5,.12) 58%, #050505 100%);
}
.edu-hero-copy {
  position: relative;
  z-index: 10;
  padding-top: clamp(124px, 9vw, 170px);
  text-align: center;
  pointer-events: none;
}
.edu-hero-copy > * { pointer-events: auto; }
.edu-hero-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin: 0 0 17px;
  color: #505050;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.edu-hero-kicker span {
  width: 24px;
  height: 2px;
  border-radius: 99px;
  background: var(--orange);
  box-shadow: 0 0 13px rgba(255,99,0,.45);
}
.edu-hero h1 {
  width: min(1220px, 100%);
  max-width: none;
  margin-inline: auto;
  color: var(--hero-ink);
  font-size: clamp(4rem, 6.65vw, 8rem);
  line-height: .88;
  letter-spacing: -.07em;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  margin-top: 20px;
}
.edu-hero h1 > span { display: block; }
.edu-hero h1 em {
  position: relative;
  display: inline-block;
  color: var(--orange);
  font-style: normal;
}

.edu-hero-lead {
  width: min(660px, 92%);
  max-width: 660px;
  margin: 26px auto 0;
  color: var(--hero-soft-ink);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.58;
  text-wrap: balance;
}
.edu-hero-actions {
  justify-content: center;
  margin-top: 60px;
}
.edu-primary-cta {
  min-height: 48px;
  border-radius: 999px;
  padding-inline: 22px;
  gap: 18px;
  box-shadow: 0 13px 32px rgba(255,99,0,.18);
}
.edu-primary-cta span { transition: transform .25s ease; }
.edu-primary-cta:hover span { transform: translate(2px,-2px); }
.edu-secondary-link {
  min-height: 48px;
  padding: 0 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border: 1px solid rgba(5,5,5,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  color: #171717;
  font-size: 14px;
  font-weight: 720;
  box-shadow: 0 10px 28px rgba(34,42,48,.06), inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.edu-secondary-link:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.9);
  border-color: rgba(5,5,5,.22);
}
.edu-secondary-link span { color: var(--orange); }
.edu-scene-tag,
.edu-scene-hub-label {
  --depth-x: 0px;
  --depth-y: 0px;
  position: absolute;
  z-index: 5;
  transform: translate3d(var(--depth-x), var(--depth-y), 0);
  will-change: transform;
}
.edu-scene-tag {
  min-height: 30px;
  padding: 0 11px 0 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,99,0,.16);
  border-radius: 999px;
  background: rgba(8,8,8,.94);
  color: #fff;
  font-size: 11px;
  font-weight: 790;
  letter-spacing: -.01em;
  box-shadow: 0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  animation: edu-tag-in .65s cubic-bezier(.18,.8,.2,1) both;
}
.edu-scene-tag i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid rgba(255,99,0,.17);
  box-shadow: 0 0 0 4px rgba(255,99,0,.07), 0 0 14px rgba(255,99,0,.28);
}
.edu-tag-school { left: 67.5%; top: 49%; animation-delay: .42s; }
.edu-tag-teachers { left: 60.5%; top: 59%; animation-delay: .52s; }
.edu-tag-students { left: 21%; top: 61%; animation-delay: .60s; }
.edu-tag-families { left: 23.8%; top: 78%; animation-delay: .68s; }
.edu-scene-hub-label {
  left: 50%;
  top: 62.7%;
  transform: translate3d(calc(-50% + var(--depth-x)), calc(-50% + var(--depth-y)), 0);
  animation: edu-hub-in .8s cubic-bezier(.18,.8,.2,1) .58s both;
}
.edu-scene-hub-label span {
  min-width: 76px;
  min-height: 31px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #080808;
  color: #fff;
  font-size: 11px;
  font-weight: 840;
  letter-spacing: .02em;
  box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 0 0 1px rgba(255,99,0,.18);
}
.edu-scene-hub-label span::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange);
}
.edu-scroll-cue {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.82);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.edu-scroll-cue i {
  position: relative;
  align-self: center;
  width: 1px;
  height: 28px;
  overflow: hidden;
  background: rgba(255,255,255,.28);
}
.edu-scroll-cue i::after {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  width: 1px;
  height: 100%;
  background: var(--orange);
  animation: edu-scroll-line 2s ease-in-out infinite;
}
@keyframes edu-hero-arrive {
  from { opacity: .4; transform: translate3d(var(--hero-image-x), 18px, 0) scale(1.065); }
  to { opacity: 1; transform: translate3d(var(--hero-image-x), var(--hero-image-y), 0) scale(1.025); }
}
@keyframes edu-underline { to { transform: scaleX(1); } }
@keyframes edu-tag-in {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes edu-hub-in {
  from { opacity: 0; scale: .78; }
  to { opacity: 1; scale: 1; }
}
@keyframes edu-scroll-line {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateY(200%); opacity: 0; }
}
@media (max-width: 1200px) and (min-width: 801px) {
  .edu-hero { min-height: 820px !important; }
  .edu-hero-copy { padding-top: 124px; }
  .edu-hero h1 { font-size: clamp(4.35rem, 7.4vw, 6.7rem); }
  .edu-tag-school { left: 68%; top: 51%; }
  .edu-tag-teachers { left: 61%; top: 60%; }
  .edu-tag-students { left: 20%; top: 62%; }
  .edu-tag-families { left: 22%; top: 78%; }
}
@media (max-width: 800px) {
  .edu-hero { min-height: 820px !important; padding: 0 !important; }
  .edu-hero-copy { width: min(100% - 34px, 680px); padding-top: 112px; }
  .edu-hero h1 { max-width: 720px; font-size: clamp(3.25rem, 11vw, 5.3rem); line-height: .9; }
  .edu-hero-lead { width: min(590px, 94%); font-size: 16px; line-height: 1.5; }
  .edu-hero-actions { margin-top: 90px; }
  .edu-hero-image { object-position: 50% 60%; }
  .edu-hero-atmosphere {
    background:
      linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.34) 27%, transparent 47%),
      radial-gradient(ellipse at 50% 13%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 55%);
  }
  .edu-scene-tag { scale: .9; }
  .edu-tag-school { left: 66%; top: 55%; }
  .edu-tag-teachers { left: 58%; top: 64%; }
  .edu-tag-students { left: 12%; top: 67%; }
  .edu-tag-families { left: 15%; top: 81%; }
  .edu-scene-hub-label { top: 68%; }
}
@media (max-width: 560px) {
  .edu-hero { min-height: 750px !important; }
  .edu-hero-copy { width: min(100% - 28px, 520px); padding-top: 104px; }
  .edu-hero-kicker { margin-bottom: 13px; font-size: 9px; letter-spacing: .14em;}
  .edu-hero h1 { font-size: clamp(2.75rem, 12.7vw, 4.25rem); line-height: .91; letter-spacing: -.066em; margin-top: 0px; }
  .edu-hero h1 > span { display: inline; }
  .edu-hero-lead { margin-top: 20px; width: 100%; font-size: 15px; }
  .edu-hero-actions { width: min(320px, 90%); margin: 50px auto 0; flex-direction: column; gap: 16px; }
  .edu-primary-cta, .edu-secondary-link { width: 100%; min-height: 45px; }
  .edu-hero-image {
    width: 145%;
    height: 68%;
    left: -22.5%;
    top: auto;
    bottom: 0;
    object-fit: cover;
    object-position: 50% 54%;
    transform: translate3d(var(--hero-image-x), var(--hero-image-y), 0) scale(1.04) !important;
  }
  .edu-hero-atmosphere { background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.64) 34%, rgba(255,255,255,.04) 61%, transparent 100%); }
  .edu-scene-tag { display: none; }
  .edu-scene-hub-label { left: 50%; top: 71.5%; scale: .88; }
  .edu-scroll-cue { bottom: 17px; }
}
@media (max-width: 500px) {
  /* The portrait artwork is already composed for phones. Do not recrop/reposition it. */
  .edu-hero-image {
    inset: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    object-position: 50% 50%;
    transform: translate3d(var(--hero-image-x), var(--hero-image-y), 0) scale(1.025) !important;
    transform-origin: 50% 50%;
  }

  .eyebrow{
    font-size: 10px !important;
  }
}

@media (max-width: 400px) {
  .edu-hero-copy { padding-top: 96px; }
  .edu-hero h1 { font-size: clamp(2.5rem, 12.4vw, 3.35rem); }
  .edu-hero-lead { font-size: 14px; }
  .edu-scene-hub-label { display: none; }
  .edu-hero h1 {
    margin-top: 0px !important;
  }
  .edu-hero-actions { margin-top: 50px !important; gap: 14px; width: min(320px, 82%);}
  .edu-primary-cta,
  .edu-secondary-link {
    font-size: 13px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .edu-hero-image, .edu-scene-tag, .edu-scene-hub-label, .edu-hero h1 em::after, .edu-scroll-cue i::after { animation: none !important; }
}

@media (max-width: 800px) {
  .edu-scene-tag,
  .edu-scene-hub-label {
    display: none !important;
  }
}

@media (max-width: 330px) {
  .edu-hero { min-height: 675px !important; }

  .edu-hero h1 {
    margin-top: 10px !important;
  }

  .hero-actions {
    margin-top: 40px !important;
    gap: 12px;
  }
  .edu-primary-cta,
  .edu-secondary-link {
    font-size: 12px !important;
  }
}
/* ========================================================================== */
/* HERO — premium "Explorar" scroll cue                                      */
/* Keeps the cue editorial/minimal (not a card or label).                     */
/* ========================================================================== */
.edu-scroll-cue {
  bottom: 18px;
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
  color: rgba(255,255,255,.98);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-shadow:
    0 2px 12px rgba(0,0,0,.72),
    0 0 18px rgba(255,255,255,.18);
  opacity: .98;
  transition:
    opacity .28s ease,
    translate .32s cubic-bezier(.2,.75,.25,1);
}

.edu-scroll-cue span {
  position: relative;
  width: 100%;
  padding-left: 0;
  text-align: center;
  transition:
    color .25s ease,
    letter-spacing .32s cubic-bezier(.2,.75,.25,1),
    text-shadow .25s ease;
}

.edu-scroll-cue span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 16px;
  height: 1px;
  border-radius: 99px;
  background: var(--orange);
  box-shadow: 0 0 11px rgba(255,99,0,.7);
  transform: translateX(-50%) scaleX(.55);
  transform-origin: center;
  opacity: .92;
  transition: transform .3s ease, box-shadow .3s ease;
}

.edu-scroll-cue i {
  position: relative;
  align-self: center;
  width: 1px;
  height: 50px;
  overflow: visible;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.82) 0%,
    rgba(255,255,255,.45) 42%,
    rgba(255,255,255,.10) 100%
  );
  box-shadow: 0 0 10px rgba(255,255,255,.08);
}

.edu-scroll-cue i::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow:
    0 0 0 4px rgba(255,99,0,.10),
    0 0 13px rgba(255,99,0,.85);
  transform: translate(-50%, -50%);
  animation: edu-scroll-dot-pulse 2.25s ease-in-out infinite;
}

.edu-scroll-cue i::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -12px;
  width: 2px;
  height: 19px;
  border-radius: 99px;
  background: linear-gradient(
    180deg,
    rgba(255,99,0,0),
    rgba(255,99,0,1) 48%,
    rgba(255,99,0,0)
  );
  box-shadow: 0 0 10px rgba(255,99,0,.68);
  transform: translate(-50%, 0);
  animation: edu-scroll-line-premium 2.25s cubic-bezier(.55,0,.25,1) infinite;
}

.edu-scroll-cue:hover {
  opacity: 1;
  translate: 0 3px;
}

.edu-scroll-cue:hover span {
  color: #fff;
  letter-spacing: .30em;
  text-shadow:
    0 2px 14px rgba(0,0,0,.78),
    0 0 20px rgba(255,255,255,.24);
}

.edu-scroll-cue:hover span::after {
  transform: translateX(-50%) scaleX(1);
  box-shadow: 0 0 15px rgba(255,99,0,.92);
}

@keyframes edu-scroll-line-premium {
  0% {
    transform: translate(-50%, 0);
    opacity: 0;
  }
  14% { opacity: 1; }
  72% { opacity: 1; }
  100% {
    transform: translate(-50%, 59px);
    opacity: 0;
  }
}

@keyframes edu-scroll-dot-pulse {
  0%, 100% {
    opacity: .68;
    box-shadow:
      0 0 0 3px rgba(255,99,0,.08),
      0 0 9px rgba(255,99,0,.55);
  }
  48% {
    opacity: 1;
    box-shadow:
      0 0 0 6px rgba(255,99,0,.12),
      0 0 17px rgba(255,99,0,.95);
  }
}

@media (max-width: 560px) {
  .edu-scroll-cue {
    bottom: 11px;
    gap: 9px;
    font-size: 10px;
    letter-spacing: .24em;
  }

  .edu-scroll-cue span { padding-left: .24em; }
  .edu-scroll-cue i { height: 40px; }

  @keyframes edu-scroll-line-premium {
    0% {
      transform: translate(-50%, 0);
      opacity: 0;
    }
    14% { opacity: 1; }
    72% { opacity: 1; }
    100% {
      transform: translate(-50%, 49px);
      opacity: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .edu-scroll-cue i::before,
  .edu-scroll-cue i::after {
    animation: none !important;
  }
}