/* VALNET Neural Home · capa visual aislada de la aplicación y sus integraciones. */
:root {
  /* Acento funcional (escaso) y luz ambiental (dominante). Ver jerarquía en neural-system.css. */
  --neural-cyan: #62f2df;
  --neural-blue: #5b7cff;
  --neural-violet: #8163f5;
  --neural-orchid: #a76bf0;
  --neural-magenta: #d158c8;
  --neural-bg: #06101c;
}

.neural-hero {
  isolation: isolate;
  min-height: calc(100svh - var(--header));
  padding-top: 0;
  color: #f5f8ff !important;
  background:
    radial-gradient(ellipse 68% 92% at 76% 46%, rgba(96, 62, 245, .28), transparent 69%),
    radial-gradient(ellipse 42% 68% at 92% 18%, rgba(168, 82, 236, .12), transparent 68%),
    radial-gradient(ellipse 34% 46% at 8% 88%, rgba(58, 210, 198, .045), transparent 70%),
    linear-gradient(120deg, #07131f 0%, #09101f 44%, #0c0b2e 100%) !important;
}
.neural-hero::before {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  filter: none !important;
  opacity: .9 !important;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(141, 132, 255, .075) 50%, transparent 50.1%),
    linear-gradient(rgba(132, 124, 252, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(132, 124, 252, .045) 1px, transparent 1px) !important;
  background-size: 100% 100%, 76px 76px, 76px 76px !important;
  animation: neural-grid-drift 22s linear infinite !important;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 100%);
}
.neural-hero::after { opacity: .12 !important; mix-blend-mode: soft-light; }
@keyframes neural-grid-drift { to { background-position: 0 0, 0 76px, 76px 0; } }

.neural-hero .hero-layout {
  min-height: calc(100svh - var(--header) - 70px);
  width: min(1560px, calc(100% - 96px));
  grid-template-columns: minmax(0, .82fr) minmax(620px, 1.18fr);
  gap: clamp(64px, 5.2vw, 104px);
  padding-block: clamp(22px, 3.5vh, 42px) 18px;
}
.neural-hero .hero-copy { position: relative; z-index: 4; max-width: 650px; }
.neural-hero .hero-kicker { color: #9fb2cb !important; letter-spacing: .115em; }
.neural-hero .hero-kicker::before { display: none; }
.system-pulse {
  width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--neural-cyan);
  box-shadow: 0 0 0 5px rgba(98, 242, 223, .09), 0 0 18px rgba(98, 242, 223, .82);
  animation: neural-pulse 2.2s ease-in-out infinite;
}
@keyframes neural-pulse { 50% { opacity: .55; transform: scale(.72); } }
.neural-hero h1 {
  max-width: 650px;
  margin-top: 24px;
  font-size: clamp(3.5rem, 6.1vw, 6.45rem);
  font-weight: 480;
  line-height: .94;
  letter-spacing: -.072em;
  text-wrap: balance;
}
.neural-hero h1 em {
  display: block;
  margin-top: .08em;
  color: transparent !important;
  font-style: normal;
  font-weight: 520;
  background: linear-gradient(100deg, #fff 0%, #92fff0 32%, #8ba2ff 68%, #e77aff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.neural-hero .hero-description { max-width: 590px; margin-top: 25px; color: #aabbd0 !important; font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.66; }
.neural-hero .hero-benefits { margin-top: 22px; gap: 9px; }
.neural-hero .hero-benefits li {
  border-color: rgba(145, 180, 223, .2) !important;
  color: #d7e1ef !important;
  background: rgba(15, 30, 48, .58) !important;
  backdrop-filter: blur(12px);
}
.neural-hero .hero-benefits .icon { color: var(--neural-cyan); }
.neural-hero .hero-actions { margin-top: 28px; }
.neural-primary {
  position: relative; overflow: hidden; min-width: 205px; color: #06131a !important;
  background: linear-gradient(100deg, #6ff3e2 0%, #60c9ff 54%, #8f7cf7 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 14px 40px rgba(41, 223, 202, .13), 0 8px 30px rgba(118, 78, 244, .2), inset 0 1px 0 rgba(255,255,255,.55);
}
.neural-primary::before { content: ''; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transition: transform .55s ease; }
.neural-primary:hover::before { transform: translateX(110%); }
.neural-link { color: #dbe7f2 !important; }
.neural-hero .hero-note { color: #8299ae !important; }
.neural-hero .hero-note .icon { color: var(--neural-cyan); }

.neural-hero .hero-visual { width: 100%; min-width: 0; justify-self: end; }
.neural-stage {
  --pointer-x: 0;
  --pointer-y: 0;
  position: relative;
  min-height: clamp(610px, 72vh, 790px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(139, 165, 255, .14);
  border-radius: 34px;
  background:
    radial-gradient(circle at 52% 50%, rgba(55, 222, 215, .05), transparent 21%),
    radial-gradient(circle at 62% 52%, rgba(122, 72, 248, .24), transparent 50%),
    linear-gradient(145deg, rgba(13, 24, 48, .76), rgba(10, 9, 42, .74));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075), inset 0 0 95px rgba(96, 62, 245, .1), 0 55px 150px rgba(0,0,0,.42);
  transform: perspective(1200px) rotateY(calc(var(--pointer-x) * .35deg)) rotateX(calc(var(--pointer-y) * -.25deg));
  transition: transform .18s ease-out;
}
.neural-stage::before, .neural-stage::after { content: ''; position: absolute; z-index: 5; pointer-events: none; }
.neural-stage::before { inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgba(255,255,255,.06), transparent 21%, transparent 78%, rgba(138, 96, 250, .12)); }
.neural-stage::after { left: 8%; right: 8%; bottom: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(106, 241, 223, .25), transparent); box-shadow: 0 -90px 120px 34px rgba(70, 76, 255, .08); }
.neural-grid { position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(134,126,244,.085) 1px, transparent 1px), linear-gradient(90deg, rgba(134,126,244,.085) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 55% 53%, #000, transparent 76%); transform: perspective(600px) rotateX(64deg) scale(1.8) translateY(24%); transform-origin: 50% 80%; }
.neural-glow { position: absolute; left: 50%; top: 51%; width: 58%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(99, 245, 225, .085), rgba(104, 70, 246, .2) 30%, transparent 70%); filter: blur(22px); animation: neural-breathe 5s ease-in-out infinite; }
@keyframes neural-breathe { 50% { transform: scale(1.12); opacity: .72; } }
.neural-energy { position: absolute; z-index: 1; left: 52%; top: 51%; width: 55%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; }
.neural-energy i { position: absolute; inset: 0; border: 1px solid rgba(139, 112, 248, .22); border-radius: 50%; box-shadow: inset 0 0 44px rgba(104, 74, 246, .12); animation: neural-wave 5.2s cubic-bezier(.2,.7,.3,1) infinite; }
.neural-energy i:nth-child(2) { animation-delay: -1.75s; }
.neural-energy i:nth-child(3) { animation-delay: -3.5s; }
.neural-energy b { position: absolute; left: 50%; top: 50%; width: 5.5%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #eafffb; box-shadow: 0 0 14px #fff, 0 0 34px #6ef5de, 0 0 120px 30px rgba(108, 82, 250, .42), 0 0 210px 72px rgba(150, 74, 240, .2); animation: neural-core-beat 2.4s ease-in-out infinite; }
@keyframes neural-wave { 0% { opacity: 0; transform: scale(.28); } 28% { opacity: .7; } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes neural-core-beat { 50% { transform: scale(.72); opacity: .78; } }
.neural-beam { position: absolute; z-index: 1; left: 52%; top: 51%; width: 76%; height: 1px; transform-origin: left center; background: linear-gradient(90deg, rgba(106,245,226,.65), rgba(92,116,255,.15) 42%, transparent 78%); filter: drop-shadow(0 0 5px rgba(101,237,222,.7)); opacity: .32; pointer-events: none; }
.neural-beam::after { content: ''; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #d9fff9; box-shadow: 0 0 15px #6cf5df; }
.neural-beam-a { rotate: -32deg; animation: neural-scan-a 9s ease-in-out infinite alternate; }
.neural-beam-b { rotate: 144deg; animation: neural-scan-b 12s ease-in-out infinite alternate; }
@keyframes neural-scan-a { to { rotate: 21deg; opacity: .12; } }
@keyframes neural-scan-b { to { rotate: 204deg; opacity: .5; } }
.neural-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; touch-action: pan-y; }
.neural-fallback { position: absolute; z-index: 1; left: 50%; top: 51%; width: min(48%, 320px); aspect-ratio: 1; translate: -50% -50%; transform-style: preserve-3d; animation: fallback-turn 18s linear infinite; }
.neural-fallback span, .neural-fallback i, .neural-fallback b { position: absolute; inset: 8%; border: 1px solid rgba(132, 112, 248, .4); transform: rotate(45deg); box-shadow: inset 0 0 40px rgba(104, 76, 246, .2), 0 0 28px rgba(81, 240, 218, .07); }
.neural-fallback i { inset: 22%; transform: rotate(18deg); border-color: rgba(150, 86, 255, .6); }
.neural-fallback b { inset: 35%; border-radius: 50%; border: 0; background: radial-gradient(circle at 35% 30%, #fff, #64f1dd 7%, #7a5bf5 34%, transparent 69%); filter: blur(2px); }
@keyframes fallback-turn { to { rotate: 360deg; } }
.webgl-ready .neural-fallback { opacity: 0; transition: opacity .5s; }
.webgl-failed .neural-fallback { opacity: 1; }
.neural-loader { position: absolute; z-index: 10; left: 50%; top: 50%; display: grid; gap: 7px; min-width: 205px; translate: -50% -50%; color: #9fb3cc; font: 500 .68rem/1.4 var(--mono); letter-spacing: .1em; text-align: center; text-transform: uppercase; transition: opacity .45s, visibility .45s; }
.neural-loader b { color: var(--neural-cyan); font-size: .8rem; }
.webgl-ready .neural-loader, .webgl-failed .neural-loader { opacity: 0; visibility: hidden; }
.neural-hud { position: absolute; z-index: 6; display: flex; align-items: center; justify-content: space-between; color: #748ba8; font: 500 .64rem/1.4 var(--mono); letter-spacing: .1em; }
.neural-hud-top { left: 24px; right: 24px; top: 22px; padding-bottom: 13px; border-bottom: 1px solid rgba(134, 164, 223, .13); }
.neural-live { display: inline-flex; gap: 7px; align-items: center; color: #81cfc5; }
.neural-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--neural-cyan); box-shadow: 0 0 10px var(--neural-cyan); }
.neural-callout { position: absolute; z-index: 6; min-width: 128px; padding: 9px 11px; border-left: 1px solid rgba(104, 242, 223, .5); color: #d9e5f2; background: linear-gradient(90deg, rgba(13, 29, 47, .68), transparent); backdrop-filter: blur(5px); pointer-events: none; }
.neural-callout::after { content: ''; position: absolute; top: 0; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--neural-cyan); box-shadow: 0 0 13px var(--neural-cyan); }
.neural-callout span { color: #6f8aa4; font: .58rem var(--mono); }
.neural-callout b { display: block; margin-top: 2px; font-size: .75rem; font-weight: 600; }
.neural-callout small { display: block; margin-top: 2px; color: #8298af; font-size: .62rem; }
.neural-callout-ai { left: 5%; top: 30%; }
.neural-callout-data { right: 3%; top: 43%; }
.neural-callout-auto { left: 10%; bottom: 17%; }
.neural-metric { position: absolute; z-index: 6; display: grid; gap: 2px; color: #607792; font: .55rem/1.4 var(--mono); letter-spacing: .09em; }
.neural-metric b { color: #8ea7c4; font-weight: 500; }
.neural-metric-a { right: 4%; top: 19%; text-align: right; }
.neural-metric-b { left: 4%; bottom: 8%; }
.neural-coordinates { position: absolute; z-index: 6; right: 24px; bottom: 21px; color: #627995; font: .58rem/1.7 var(--mono); letter-spacing: .08em; text-align: right; }
.neural-hero .visual-caption { margin-top: 14px; color: #71879e !important; letter-spacing: .035em; }
.caption-line { width: 24px; height: 1px; background: linear-gradient(90deg, transparent, var(--neural-cyan)); }
.neural-hero .hero-bottom { color: #8499ae !important; border-top-color: rgba(117, 151, 188, .15); }
.neural-hero .sector-list { color: #a9bbcc !important; }

/* El lenguaje visual continúa en la primera pantalla de contenido sin rehacer las integraciones. */
.stats-band { position: relative; overflow: hidden; background: #07131f !important; border-color: rgba(112, 151, 186, .14) !important; }
.stats-band::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(118, 90, 248, .1), transparent); }
.stats-grid { position: relative; }
#servicios .section-head h2 { max-width: 760px; }
#servicios .solution { position: relative; overflow: hidden; transform-style: preserve-3d; transition: border-color .25s, transform .25s, box-shadow .25s; }
#servicios .solution[data-service-url] { cursor: pointer; }
#servicios .solution[data-service-url]:focus-visible { outline: 2px solid var(--neural-cyan); outline-offset: 4px; }
#servicios .solution::before { content: ''; position: absolute; left: -30%; top: -60%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(126, 88, 246, .13), transparent 70%); opacity: 0; transition: opacity .25s; }
#servicios .solution:hover { transform: translateY(-6px) perspective(900px) rotateX(1deg); box-shadow: 0 24px 55px rgba(2, 18, 29, .12); }
#servicios .solution:hover::before { opacity: 1; }

@media (max-width: 1100px) {
  .neural-hero .hero-layout { width: calc(100% - 56px); grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr); gap: 42px; }
  .neural-hero h1 { font-size: clamp(3.25rem, 6vw, 5.2rem); }
  .neural-stage { min-height: 540px; }
  .neural-callout { min-width: 112px; }
}

@media (max-width: 820px) {
  .neural-hero { min-height: auto; }
  .neural-hero .hero-layout { width: calc(100% - 56px); grid-template-columns: 1fr; min-height: 0; padding-top: 56px; }
  .neural-hero .hero-copy { max-width: 720px; }
  .neural-hero h1 { max-width: 680px; font-size: clamp(3.2rem, 9.2vw, 5.2rem); }
  .neural-hero .hero-visual { display: block !important; max-width: none; }
  .neural-stage { min-height: 500px; }
}

@media (max-width: 700px) {
  .neural-hero { padding-top: 0 !important; }
  .neural-hero::before { background-size: 100% 100%, 46px 46px, 46px 46px !important; }
  .neural-hero .hero-layout { display: grid; gap: 22px !important; padding-block: 30px 22px !important; }
  .neural-hero .hero-layout { width: calc(100% - 28px); }
  .neural-hero .hero-copy { text-align: left; }
  .neural-hero .hero-kicker { font-size: .62rem; line-height: 1.4; letter-spacing: .07em; }
  .neural-hero h1 { max-width: 100%; margin-top: 15px; font-size: clamp(2.65rem, 12vw, 3.65rem); line-height: .96; letter-spacing: -.065em; }
  .neural-hero .hero-description { max-width: 34rem; margin-top: 17px; font-size: .93rem; line-height: 1.5; }
  .neural-hero .hero-benefits { margin-top: 16px; gap: 6px; }
  .neural-hero .hero-benefits li { padding: 5px 8px; font-size: .68rem; }
  .neural-hero .hero-actions { margin-top: 19px; gap: 9px 16px; }
  .neural-hero .hero-actions .btn { min-height: 47px; }
  .neural-link { font-size: .8rem; }
  .neural-hero .hero-note { margin-top: 10px; font-size: .69rem; }
  .neural-hero .hero-visual { display: block !important; width: calc(100% + 8px); margin-left: -4px; }
  .neural-stage { min-height: 350px; border-radius: 22px; transform: none; }
  .neural-hud-top { left: 16px; right: 16px; top: 15px; font-size: .54rem; }
  .neural-callout { min-width: 95px; padding: 7px 8px; }
  .neural-callout b { font-size: .66rem; }
  .neural-callout small { display: none; }
  .neural-callout-ai { left: 4%; top: 31%; }
  .neural-callout-data { right: 1%; top: 44%; }
  .neural-callout-auto { left: 7%; bottom: 13%; }
  .neural-coordinates { right: 15px; bottom: 12px; font-size: .48rem; }
  .neural-metric { display: none; }
  .neural-hero .visual-caption { margin-top: 9px; font-size: .62rem; }
  .neural-hero .hero-bottom { display: flex !important; min-height: 48px; padding-block: 8px; }
  .neural-hero .sector-list { font-size: .7rem; }
}

@media (max-width: 390px) {
  .neural-hero .hero-layout { padding-top: 24px !important; }
  .neural-hero h1 { font-size: 2.7rem; }
  .neural-hero .hero-actions { align-items: flex-start; flex-direction: column; }
  .neural-primary { width: 100% !important; }
  .neural-stage { min-height: 318px; }
  .neural-callout-auto { display: none; }
  .neural-hero .visual-caption { justify-content: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .neural-stage { transform: none !important; }
  .system-pulse, .neural-glow, .neural-fallback { animation: none !important; }
}

@media print {
  .neural-hero { min-height: 0; color: #10232e !important; background: #fff !important; }
  .neural-stage { min-height: 320px; box-shadow: none; }
  .neural-canvas { display: none; }
}

/* Fase inmersiva · el Core deja de ser una tarjeta y pasa a vivir en el espacio del Hero. */
html, body { overflow-x: clip; }
.neural-hero { overflow: visible; }
@media (min-width: 821px) {
  .neural-hero { min-height: auto; }
  .neural-hero .hero-layout {
    min-height: 0;
    grid-template-columns: minmax(560px, .78fr) minmax(690px, 1.22fr);
    align-items: start;
    gap: clamp(42px, 4vw, 78px);
  }
  .neural-hero .hero-copy { padding-top: clamp(32px, 7vh, 76px); }
  .neural-hero .hero-visual {
    position: relative;
    z-index: 1;
    right: auto;
    width: 100%;
    height: auto;
    display: block;
    margin: 20px 0 0;
    align-self: start;
    opacity: 1;
    visibility: visible;
  }
  .neural-stage {
    width: 100%;
    height: min(64vh, 700px);
    min-height: 0;
    transform:
      perspective(1300px)
      rotateY(calc(var(--pointer-x) * .42deg))
      rotateX(calc(var(--pointer-y) * -.3deg));
  }
}

.neural-stage {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: transform .22s cubic-bezier(.2,.65,.25,1);
}
.neural-stage::before {
  inset: -14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 44%, rgba(96, 244, 224, .06), transparent 18%),
    radial-gradient(circle at 58% 52%, rgba(104, 74, 248, .27), transparent 45%),
    radial-gradient(circle at 76% 42%, rgba(172, 84, 238, .13), transparent 48%);
  filter: blur(20px);
  opacity: .95;
}
.neural-stage::after {
  left: 10%; right: 2%; bottom: 8%; height: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(108, 82, 250, .24), rgba(54, 238, 214, .04) 32%, transparent 70%);
  box-shadow: none;
  filter: blur(14px);
  transform: perspective(500px) rotateX(68deg);
}
.neural-grid {
  inset: auto -8% -3% 4%;
  height: 43%;
  opacity: .6;
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 55% 40%, #000 0%, rgba(0,0,0,.7) 38%, transparent 76%);
  transform: perspective(520px) rotateX(67deg) scale(1.25);
  transform-origin: 50% 100%;
}
.neural-glow { width: 74%; filter: blur(38px); opacity: .6; }
.neural-energy { width: 63%; }
.neural-canvas { inset: -6%; width: 112%; height: 112%; }
.neural-hud-top { left: 9%; right: 9%; top: 7%; border-bottom: 0; opacity: .72; }
.neural-coordinates { right: 10%; bottom: 11%; opacity: .72; }
.neural-metric-a { right: 11%; top: 23%; }
.neural-metric-b { left: 8%; bottom: 13%; }
.neural-callout {
  min-width: 138px;
  border-left-color: rgba(104,242,223,.7);
  background: linear-gradient(90deg, rgba(7,17,30,.44), transparent 94%);
  text-shadow: 0 2px 10px #06101c;
}
.neural-callout::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  width: clamp(70px, 8vw, 130px);
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(93,242,222,.5), transparent);
}
.neural-callout-ai { left: 6%; top: 34%; transform: translateZ(70px); }
.neural-callout-ai::before { rotate: -28deg; }
.neural-callout-data { right: 6%; top: 46%; filter: blur(.18px); transform: scale(.94); opacity: .92; }
.neural-callout-data::before { left: auto; right: 100%; rotate: 22deg; transform-origin: right center; }
.neural-callout-auto { left: 12%; bottom: 20%; filter: blur(.35px); transform: scale(.9); opacity: .82; }
.neural-callout-auto::before { rotate: 18deg; }
.neural-hero .hero-benefits { gap: 16px; }
.neural-hero .hero-benefits li {
  padding: 2px 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  backdrop-filter: none;
  color: #9fb0c3 !important;
  font-size: .74rem;
}
.neural-hero .hero-benefits li + li::before { content: ''; width: 3px; height: 3px; margin-right: 9px; border-radius: 50%; background: #496378; }
.neural-hero .visual-caption { position: relative; z-index: 7; margin-top: -2.7%; }
.neural-hero .hero-bottom { position: relative; z-index: 7; }

@media (max-width: 1280px) and (min-width: 821px) {
  .neural-hero .hero-layout { width: calc(100% - 56px); grid-template-columns: minmax(460px, .86fr) minmax(540px, 1.14fr); gap: 30px; }
  .neural-hero .hero-visual { width: 100%; }
  .neural-hero h1 { font-size: clamp(3.7rem, 6vw, 5.25rem); }
}

@media (max-width: 820px) {
  .neural-hero { overflow: clip; }
  .neural-hero { min-height: auto; }
  .neural-hero .hero-layout { display: grid; align-items: start; }
  .neural-hero .hero-copy { display: contents; }
  .neural-hero .hero-kicker { order: 1; }
  .neural-hero h1 { order: 2; }
  .neural-hero .hero-visual { order: 3; position: relative; width: 100%; margin: -8px auto -22px; }
  .neural-hero .hero-description { order: 4; }
  .neural-hero .hero-benefits { order: 5; }
  .neural-hero .hero-actions { order: 6; }
  .neural-hero .hero-note { order: 7; }
  .neural-stage { width: min(84vw, 540px); min-height: min(88vw, 480px); margin-inline: auto; overflow: visible; }
  .neural-canvas { inset: -10%; width: 120%; height: 120%; }
  .neural-grid { inset: auto -14% 2%; height: 38%; background-size: 34px 34px; }
  .neural-hud-top, .neural-coordinates, .neural-metric { display: none; }
  .neural-callout { min-width: 90px; padding: 6px 7px; }
  .neural-callout-ai { left: -3%; top: 35%; }
  /* Con el escenario estrechado, un desplazamiento negativo empujaba "Datos" fuera de la pantalla. */
  .neural-callout-data { right: 1%; top: 48%; }
  .neural-callout-auto { left: 3%; bottom: 17%; }
  /* En pantalla pequeña la luz violeta se concentra y deja de leerse como iluminación. Se rebaja. */
  .neural-glow { opacity: .4; }
  .neural-stage::before { opacity: .7; filter: blur(26px); }
  .neural-hero .visual-caption { margin-top: -5%; justify-content: center; text-align: center; }
}

@media (max-width: 430px) {
  .neural-hero .hero-layout { gap: 14px !important; }
  .neural-hero .hero-visual { margin-block: -6px -17px; }
  .neural-stage { width: 84vw; min-height: 78vw; }
  .neural-callout-auto { display: none; }
  .neural-hero .hero-description { margin-top: 2px; }
  .neural-hero .hero-benefits { margin-top: 8px; gap: 8px 12px; }
  .neural-hero .hero-actions { margin-top: 10px; }
  .neural-hero .hero-note { margin-top: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .neural-stage { transform: none !important; }
  .neural-energy i, .neural-energy b, .neural-beam { animation: none !important; }
}

/* ── Neural Core v7 ──────────────────────────────────────────────────────────────
   Con bloom real, los brillos simulados con CSS sobran: se apagan en cuanto WebGL arranca.
   Si WebGL falla, no se toca nada y queda el respaldo de siempre. */
.neural-stage.core-v7.webgl-ready .neural-energy,
.neural-stage.core-v7.webgl-ready .neural-beam,
.neural-stage.core-v7.webgl-ready .neural-fallback { opacity: 0; transition: opacity .8s; }
.neural-stage.core-v7.webgl-ready .neural-glow { opacity: .32; }

/* Etiquetas ancladas: cada una sigue a su nodo en 3D y se enciende cuando le llega un paquete. */
.neural-stage.is-anchored:not(.webgl-ready) .neural-callout { opacity: 0 !important; }
.neural-stage.is-anchored .neural-callout {
  left: 0 !important; top: 0 !important; right: auto !important; bottom: auto !important;
  transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0) scale(var(--cs, 1)) !important;
  transform-origin: 0 50%;
  opacity: var(--co, 0) !important;
  filter: none !important;
  /* Sin transición de opacidad: el motor la actualiza en cada fotograma. */
  transition: box-shadow .25s, border-color .25s;
  will-change: transform, opacity;
  border-left-color: rgba(104, 242, 223, calc(.35 + var(--hit, 0) * .65));
  box-shadow: 0 0 calc(var(--hit, 0) * 28px) rgba(98, 242, 223, calc(var(--hit, 0) * .28));
}
.neural-stage.is-anchored .neural-callout::after { display: none; }
.neural-stage.is-anchored .neural-callout::before {
  left: -20px !important; right: auto !important; top: 12px !important;
  width: 20px !important; rotate: 0deg !important; transform: none !important;
  background: linear-gradient(90deg, rgba(93, 242, 222, .08), rgba(93, 242, 222, calc(.45 + var(--hit, 0) * .55)));
}
.neural-stage.is-anchored .neural-callout.is-flip {
  transform-origin: 100% 50%;
  text-align: right;
  border-left: 0;
  border-right: 1px solid rgba(104, 242, 223, calc(.35 + var(--hit, 0) * .65));
  background: linear-gradient(270deg, rgba(7, 17, 30, .5), transparent 94%);
}
.neural-stage.is-anchored .neural-callout.is-flip::before {
  left: auto !important; right: -20px !important;
  background: linear-gradient(270deg, rgba(93, 242, 222, .08), rgba(93, 242, 222, calc(.45 + var(--hit, 0) * .55)));
}
/* Etiqueta colocada arriba o abajo del nodo: sin línea lateral (no apunta al costado). */
.neural-stage.is-anchored .neural-callout.is-vertical::before { display: none; }
/* Con el bloom real, la neblina violeta de CSS resta contraste: se rebaja para que la escena respire. */
.neural-stage.core-v7.webgl-ready::before { opacity: .5; }
/* Las etiquetas se mueven y pueden pasar sobre los textos de las esquinas: fondo más sólido para que no se mezclen. */
.neural-stage.is-anchored .neural-callout { background: linear-gradient(90deg, rgba(8, 15, 32, .86), rgba(8, 15, 32, .6)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.neural-stage.is-anchored .neural-callout.is-flip { background: linear-gradient(270deg, rgba(8, 15, 32, .86), rgba(8, 15, 32, .6)); }
.neural-stage.is-anchored .neural-callout { z-index: 8; }