:root {
  --bg: #030511;
  --white: #f7f8ff;
  --muted: #b5b9cd;
  --cyan: #39efff;
  --magenta: #df72ff;
  --panel: rgba(6, 8, 26, .68);
  --panel-border: rgba(132, 143, 224, .18);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { width: 100%; min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--white);
  background: #02040d;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.hero {
  width: 100%;
  min-height: 0;
  height: auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 8px;
  background: #02040d;
}
.canvas {
  position: relative;
  container-type: inline-size;
  /*
    La escena conserva su tamaño maestro (1672 × 941) y solo se reduce
    cuando la ventana es más pequeña. Así el zoom del navegador escala
    toda la portada, en lugar de volver a expandirla para ocupar 100vh.
  */
  width: min(1672px, calc(100vw - 16px), calc((100svh - 16px) * 1.776833));
  aspect-ratio: 1672 / 941;
  max-height: 941px;
  overflow: hidden;
  background: #030511;
  filter: drop-shadow(0 26px 70px rgba(0,0,0,.42));
}
.environment { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; user-select: none; -webkit-user-drag: none; }
.ambient-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,4,14,.11) 0%, rgba(2,4,14,.02) 29%, transparent 48%),
    linear-gradient(180deg, rgba(2,4,14,.13) 0%, transparent 19%, transparent 82%, rgba(2,4,14,.16) 100%);
}
.brand, .top-nav, .login, .intro, .core-hit, .territory, .scroll-marker, .orb-hotspot { position: absolute; z-index: 4; }
.brand { left: 2.8%; top: 3.2%; }
.brand__link { display: flex; align-items: flex-start; gap: 1cqw; }
.brand__star { width: 3.18cqw; height: 3.18cqw; min-width: 35px; min-height: 35px; filter: drop-shadow(0 0 .8cqw rgba(57,236,255,.34)) drop-shadow(0 0 1.15cqw rgba(216,102,255,.13)); transform-origin: center; }
.brand__name { font-size: 2.35cqw; line-height: .92; font-weight: 600; letter-spacing: -.045em; text-shadow: 0 0 18px rgba(0,0,0,.26); }
.brand__tagline { margin-top: 1.1cqw; color: #c6cad9; font-size: .67cqw; line-height: 1.55; }
.top-nav {
  left: 60.4%; top: 5.15%; width: 24.9%;
  display: flex; align-items: center; justify-content: space-between;
  color: #eef0f7; font-size: .69cqw; text-shadow: 0 0 12px rgba(0,0,0,.4);
}
.top-nav a:hover { color: var(--cyan); }
.login {
  left: 87.3%; top: 3.4%; width: 9.6%; height: 5.8%;
  display: inline-flex; align-items: center; justify-content: center; gap: .65cqw;
  border-radius: 999px; border: 1px solid rgba(140,145,204,.34);
  background: rgba(18,19,48,.34); backdrop-filter: blur(10px); cursor: pointer;
  font-size: .76cqw;
}
.login__icon { width: 2.1cqw; height: 2.1cqw; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); }
.login__icon svg { width: 1.25cqw; fill: none; stroke: currentColor; stroke-width: 1.4; }
.intro { left: 3.05%; top: 24.2%; width: 24.2%; }
.intro h1 { margin: 0; font-size: 3.25cqw; line-height: 1.08; font-weight: 300; letter-spacing: -.043em; text-shadow: 0 0 15px rgba(0,0,0,.3); }
.intro p { margin: 1.72cqw 0 0; color: #c0c3d3; font-size: .9cqw; line-height: 1.78; }
.primary-cta {
  margin-top: 1.95cqw; width: 88%; height: 3.45cqw; min-height: 42px; padding: 0 1.55cqw;
  display: inline-flex; align-items: center; justify-content: space-between;
  border-radius: 999px; border: 1px solid transparent;
  background: linear-gradient(rgba(5,7,23,.9),rgba(5,7,23,.9)) padding-box,
              linear-gradient(90deg,#d960ff,#5d7cff,#2cf0ff) border-box;
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset, 0 10px 28px rgba(0,0,0,.16), 0 0 20px rgba(73,183,255,.07);
  text-transform: uppercase; letter-spacing: .13em; font-size: .63cqw; cursor: pointer; transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.primary-cta:hover,
.primary-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 14px 34px rgba(0,0,0,.2), 0 0 28px rgba(73,183,255,.11);
  filter: saturate(1.05);
}
.core-hit {
  left: 51.4%; top: 34.3%; width: 18.1%; height: 32.1%;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  display: grid; place-items: center;
  isolation: isolate;
}
.core-hit::before,
.core-hit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.core-hit::before {
  inset: 15% 12%;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.07), rgba(153,172,255,.045) 34%, rgba(71,236,255,.018) 52%, transparent 70%);
  filter: blur(10px);
  opacity: .88;
}
.core-hit::after {
  inset: 16.4% 12.8%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.1px rgba(255,255,255,.2), 0 0 0 1px rgba(158, 175, 255, .12), 0 0 24px rgba(165, 179, 255, .1);
  opacity: .42;
}
.core-copy { text-align: center; text-transform: uppercase; text-shadow: 0 0 18px rgba(0,0,0,.36); }
.core-copy strong { display: block; font-size: 2.28cqw; font-weight: 400; letter-spacing: .055em; }
.core-copy small { display: block; margin-top: .74cqw; color: var(--cyan); font-size: .64cqw; letter-spacing: .30em; }
.node {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 4;
  width: 0;
  height: 0;
}
.node__orb-hit {
  position: absolute;
  left: 0;
  top: 0;
  width: 7.8cqw;
  height: 7.8cqw;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  outline: none;
}
.node__orb-hit:hover,
.node__orb-hit:focus,
.node__orb-hit:focus-visible,
.core-hit:hover,
.core-hit:focus,
.core-hit:focus-visible {
  outline: none;
  box-shadow: none;
}
.node__copy {
  position: absolute;
  z-index: 1;
  width: 13.4cqw;
  text-align: left;
  text-shadow: 0 0 16px rgba(0,0,0,.28);
}
.node__copy::before {
  content: "";
  position: absolute;
  inset: -1.4cqw -1.2cqw;
  background: radial-gradient(ellipse at center, rgba(4,8,22,.64) 0%, rgba(4,8,22,.38) 45%, transparent 78%);
  filter: blur(.7cqw);
  z-index: -1;
  pointer-events: none;
}
.node__copy--left { right: 5.05cqw; top: -1.18cqw; }
.node__copy--right { left: 5.05cqw; top: -1.18cqw; }
.node__copy h2 {
  margin: 0;
  font-size: .9cqw;
  line-height: 1.22;
  text-transform: uppercase;
  font-weight: 600;
}
.node__copy p {
  margin: .72cqw 0 .82cqw;
  color: #c2c6d8;
  font-size: .64cqw;
  line-height: 1.55;
}
.node__link {
  border: 0;
  background: none;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .57cqw;
  cursor: pointer;
}
.node__link span { margin-left: .48cqw; }
.node__link--cyan { color: var(--cyan); }
.node__link--magenta { color: var(--magenta); }
.node__eyebrow {
  display: block;
  margin-bottom: .28cqw;
  color: #c6c9dd;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .51cqw;
}
.node__copy--cyan h2,
.node__copy--cyan-soft h2 { color: var(--cyan); }
.node__copy--magenta h2,
.node__copy--magenta-soft h2 { color: var(--magenta); }

/* Conector editorial: une visualmente cada copy con su orbe sin marcar el hotspot. */
.node__copy--left::after,
.node__copy--right::after {
  content: "";
  position: absolute;
  top: 1.12cqw;
  width: 1.15cqw;
  height: 1px;
  opacity: .58;
  pointer-events: none;
}
.node__copy--left::after {
  right: -1.15cqw;
  background: linear-gradient(90deg, currentColor, rgba(255,255,255,.12));
}
.node__copy--right::after {
  left: -1.15cqw;
  background: linear-gradient(90deg, rgba(255,255,255,.12), currentColor);
}
.node__copy--cyan,
.node__copy--cyan-soft { color: var(--cyan); }
.node__copy--magenta,
.node__copy--magenta-soft { color: var(--magenta); }
.node__copy p { color: #c2c6d8; }
.node--navigation { left: 44.6%; top: 20.2%; }
.node--navigation .node__copy { width: 11.9cqw; right: 5.05cqw; top: -1.18cqw; }
.node--experience { left: 78.5%; top: 20.6%; }
.node--experience .node__copy { width: 12.0cqw; left: 5.05cqw; top: -1.18cqw; }
.node--online { left: 88.15%; top: 59.8%; }
.node--online .node__copy { width: 9.6cqw; right: 5.05cqw; top: -1.18cqw; }
.node--planet { left: 72.45%; top: 81.35%; }
.node--planet .node__copy { width: 10.2cqw; left: 5.05cqw; top: -1.18cqw; }
.node--future-a { left: 32.5%; top: 48.8%; }
.node--future-a .node__copy { width: 9.8cqw; left: 5.05cqw; top: -1.18cqw; }
.node--future-b { left: 39.15%; top: 79.0%; }
.node--future-b .node__copy { width: 9.8cqw; right: 5.05cqw; top: -1.18cqw; }
.scroll-marker {
  left: 43.3%; top: 90.1%; width: 18.5%;
  display: flex; align-items: center; justify-content: center; gap: .88cqw;
  color: #d0d3e4; text-transform: uppercase; font-size: .56cqw; letter-spacing: .34em;
}
.scroll-marker__mouse { width: 1.28cqw; height: 2.15cqw; border: 1px solid rgba(255,255,255,.82); border-radius: 999px; display: flex; justify-content: center; padding-top: .42cqw; }
.scroll-marker__mouse i { width: 2px; height: .48cqw; border-radius: 2px; background: #fff; }

.access-deck {
  position: relative;
  min-height: 56svh;
  overflow: hidden;
  border-top: 1px solid rgba(117, 137, 230, .12);
  background:
    radial-gradient(circle at 34% -20%, rgba(43, 85, 210, .24), transparent 44%),
    radial-gradient(circle at 78% 8%, rgba(126, 48, 172, .18), transparent 42%),
    linear-gradient(180deg, #07091b 0%, #050616 52%, #030411 100%);
}
.access-deck::before {
  content: "";
  position: absolute;
  inset: -30% -5% 0;
  background: url("assets/master-environment-1.0.png") center 93% / 120% auto no-repeat;
  opacity: .11;
  filter: blur(10px) saturate(.85);
  pointer-events: none;
}
.access-deck::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(49,225,255,.38), rgba(205,86,255,.35), transparent);
  box-shadow: 0 0 22px rgba(83, 173, 255, .2);
}
.access-deck__atmosphere {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, transparent 13%, rgba(79, 125, 255, .07) 46%, transparent 66%),
    radial-gradient(ellipse at 52% 4%, rgba(255,255,255,.06), transparent 36%);
  pointer-events: none;
}
.access-deck__inner {
  position: relative;
  z-index: 2;
  width: min(1460px, calc(100% - 80px));
  margin: 0 auto;
  padding: clamp(48px, 6vh, 78px) 0 clamp(46px, 7vh, 88px);
}
.access-deck__header { max-width: 760px; margin-bottom: 30px; }
.access-deck__eyebrow { margin: 0 0 12px; color: var(--cyan); text-transform: uppercase; letter-spacing: .25em; font-size: .66rem; }
.access-deck__header h2 { margin: 0; font-size: clamp(2rem, 3.7vw, 4.3rem); line-height: 1.05; font-weight: 300; letter-spacing: -.04em; }
.access-deck__header > p:last-child { margin: 18px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.access-deck__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 360px); gap: clamp(24px, 3vw, 50px); align-items: stretch; }
.intent-panel,
.news-panel {
  border: 1px solid var(--panel-border);
  border-radius: 22px;
  background: rgba(6, 8, 26, .64);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 70px rgba(0,0,0,.26), inset 0 0 35px rgba(56, 70, 155, .05);
}
.intent-panel { padding: 25px 20px 18px; }
.intent-panel h3,
.news-panel h3 { margin: 0; text-transform: uppercase; letter-spacing: .17em; font-size: .72rem; font-weight: 500; }
.intent-panel h3 { margin-left: 8px; margin-bottom: 20px; }
.intent-grid { display: grid; grid-template-columns: repeat(5,1fr); }
.intent-card {
  min-height: 150px;
  border: 0;
  border-right: 1px solid rgba(151,160,228,.09);
  background: transparent;
  color: #d0d3e2;
  cursor: pointer;
  padding: 8px 12px;
  font-size: .78rem;
  line-height: 1.55;
}
.intent-card:last-child { border-right: 0; }
.intent-card:hover { color: #fff; }
.intent-card__icon { width: 42px; height: 42px; display: block; margin: 0 auto 10px; color: var(--cyan); }
.intent-card--magenta .intent-card__icon { color: var(--magenta); }
.intent-card__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.news-panel { padding: 25px 24px 19px; }
.news-panel h3 { margin-bottom: 18px; }
.news-item { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; padding: 8px 0; }
.news-thumb { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; font-size: .95rem; border: 1px solid rgba(255,255,255,.08); }
.news-thumb--one { background: radial-gradient(circle at 45% 35%,#6e7fc7,#28345f 55%,#1a1533); }
.news-thumb--two { background: radial-gradient(circle at 35% 35%,#ffbc69,#8d445d 50%,#28163d); }
.news-thumb--three { background: radial-gradient(circle at 52% 30%,#6688e0,#393275 52%,#171331); }
.news-item small, .news-item strong { display: block; }
.news-item small { color: #b8bbca; font-size: .66rem; margin-bottom: 3px; }
.news-item strong { font-size: .78rem; line-height: 1.35; font-weight: 500; }
.news-all { display: flex; justify-content: space-between; margin-top: 16px; color: #a6deff; text-transform: uppercase; letter-spacing: .11em; font-size: .65rem; }

.toast {
  position: fixed; z-index: 20; left: 50%; bottom: 22px; transform: translate(-50%,18px);
  max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 999px;
  border: 1px solid rgba(74,225,255,.25); background: rgba(8,11,35,.92);
  backdrop-filter: blur(14px); box-shadow: 0 14px 40px rgba(0,0,0,.4);
  font-size: .78rem; text-align: center; opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }

/* Modo técnico: solo se activa agregando ?hotspots=1. */




@media (max-width: 1050px) {
  .access-deck__inner { width: min(920px, calc(100% - 40px)); }
  .access-deck__grid { grid-template-columns: 1fr; }
  .news-panel { max-width: none; }
}
@media (max-width: 760px), (orientation: portrait) {
  .hero { min-height: auto; padding: 18px 10px 36px; overflow-x: auto; justify-content: start; }
  .canvas { width: 1120px; max-width: none; max-height: none; transform: scale(.58); transform-origin: top left; margin-bottom: -390px; }
  .access-deck { min-height: auto; }
  .access-deck__inner { width: calc(100% - 28px); padding-top: 44px; }
  .access-deck__header h2 { font-size: 2.3rem; }
  .intent-grid { grid-template-columns: repeat(2, 1fr); }
  .intent-card { min-height: 132px; border-bottom: 1px solid rgba(151,160,228,.09); }
  .intent-card:nth-child(even) { border-right: 0; }
  .intent-card:last-child { grid-column: 1 / -1; border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }

.node--future-a .node__link,
.node--future-b .node__link,
.node--planet .node__link { letter-spacing: .15em; }

.node__copy--cyan-soft, .node__copy--magenta-soft { opacity: .92; }
.node__copy--cyan-soft p, .node__copy--magenta-soft p { color: #b9bed2; }

.node__copy .node__link { display: inline-flex; align-items: center; min-height: .9cqw; }


/* Layout 2.0 — Editorial SVG callout system */
.callout-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}
.callout {
  pointer-events: none;
}
.callout__link {
  fill: none;
  stroke-width: 1.4;
  opacity: .55;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.06));
}
.callout__link--cyan { stroke: rgba(71, 236, 255, .78); }
.callout__link--magenta { stroke: rgba(223, 116, 255, .76); }
.callout__dot {
  opacity: .88;
}
.callout__dot--cyan { fill: rgba(71,236,255,.96); }
.callout__dot--magenta { fill: rgba(223,116,255,.95); }
.callout-card {
  width: 100%;
  height: 100%;
  color: #f4f6ff;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-shadow: 0 0 16px rgba(0,0,0,.34);
  pointer-events: auto;
}
.callout-card--left { text-align: left; }
.callout-card--right { text-align: left; }
.callout-card h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.callout-card p {
  margin: 12px 0 12px;
  color: #c6cada;
  font-size: 11.6px;
  line-height: 1.55;
}
.callout-card--cyan h2 { color: var(--cyan); }
.callout-card--magenta h2 { color: var(--magenta); }
.callout-card__eyebrow {
  margin-bottom: 4px;
  color: #cad0e1;
  font-size: 8.6px;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.callout-card__action {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
  cursor: pointer;
  pointer-events: auto;
}
.callout-card__action span { margin-left: 6px; }
.callout-card__action--cyan { color: var(--cyan); }
.callout-card__action--magenta { color: var(--magenta); }
.orb-hotspot {
  position: absolute;
  z-index: 5;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.orb-hotspot:hover,
.orb-hotspot:focus,
.orb-hotspot:focus-visible {
  outline: none;
  box-shadow: none;
}
.orb-hotspot--navigation { left: 44.55%; top: 20.25%; width: 9.2cqw; height: 9.2cqw; transform: translate(-50%,-50%); }
.orb-hotspot--experience { left: 78.5%; top: 20.6%; width: 7.8cqw; height: 7.8cqw; transform: translate(-50%,-50%); }
.orb-hotspot--online { left: 88.15%; top: 59.8%; width: 7.8cqw; height: 7.8cqw; transform: translate(-50%,-50%); }
.orb-hotspot--planet { left: 72.45%; top: 81.35%; width: 7.8cqw; height: 7.8cqw; transform: translate(-50%,-50%); }
.orb-hotspot--future-a { left: 32.5%; top: 48.8%; width: 7.8cqw; height: 7.8cqw; transform: translate(-50%,-50%); }
.orb-hotspot--future-b { left: 39.15%; top: 79.0%; width: 7.8cqw; height: 7.8cqw; transform: translate(-50%,-50%); }
body.show-hotspots .orb-hotspot,
body.show-hotspots .core-hit { box-shadow: inset 0 0 0 1px rgba(72,232,255,.42); }
@media (max-width: 1280px) {
  .callout-card h2 { font-size: 15px; }
  .callout-card p { font-size: 11px; }
}

.callout-card--clickable { cursor: pointer; }